Web 2.0 Vernetzung (oder wie ich mir doppelte Arbeit sparen kann)
Social Media ist aktuell DAS Hype-Thema im Internet. Jeder hat schon mal von StudiVZ, Mister Wong, Xing, Flickr oder Twitter gehört oder ist dort schon aktiv. Es gibt immer mehr dieser Dienste und die Nutzerzahlen explodieren regelrecht. Auch ich nutze diese Plattformen, um Wissenswertes auszutauschen und mit Freunden, Kollegen und Bekannten zu kommunizieren.
Ein Grund für die steigende Popularität der Plattformen ist die sehr einfache Möglichkeit mit einer großen Gruppe von Menschen in Verbindung zu treten. Der Nutzer muss lediglich ein Profil anlegen und erhält dann eine eigene Seite im Netzwerk, welche er nach seinem persönlichen Gusto gestalten kann. Auf dieser Seite kann er anderen Nutzern das mitteilen, was er für mitteilungswürdig hält.
Manche Nutzer betreiben auch eine private Website im Internet. Die Attraktivität einer Website hängt, genauso wie das Profil in einem Netzwerk, von der Qualität der Inhalte ab. Die regelmäßige Pflege beider Seiten kann sehr aufwändig sein und viel Zeit kosten.
Wir wollen drei Möglichkeiten aufzeigen, wie man Inhalte von Social Media Diensten auf der eigenen Homepage einbinden kann. Allerdings empfehlen wir dies nur für versierte Internetuser, die sich mit der Erstellung von Webseiten und der Integration von Scripten gut auskennen.
Auf der eigenen Website zwitschern
Tweets aus dem Microblogging-Dienst Twitter können mithilfe von Javascript an jeder beliebigen Stelle auf der eigenen Website eingebunden werden.
Hierfür benötigen Sie zwei Dateien aus dem Internet. Anschließend stehen Ihnen folgende Funktionen zur Verfügung:
- Tweets werden schnell geladen und angezeigt
- Darstellung von bis zu 100 Tweets auf einmal
- Avatar kann eingeblendet werden
- Tweets filtern nach Namen
- Tweets filtern nach Suchbegriffen
- Form des Tweets wird angezeigt (@ = Mentions)
- URL’s werden automatisch verlinkt
- Suchbegriffe mit einer Raute (#) werden automatisch zu der Kategorie verlinkt
- Darstellung der Tweets mit CSS anpassbar
Und so wird es gemacht:
Das Javascript-Framework jQuery kann hier heruntergeladen werden. Diese Datei muss danach auf Ihren Webserver hochgeladen werden.
Die Datei jquery.tweet.js führt die eigentliche Funktion aus. Diese Datei erhalten Sie hier. Hierbei laden Sie ein ZIP-Archiv herunter, es enthält ein Verzeichnis mit mehreren Dateien. Laden Sie anschließend das gesamte Verzeichnis auf Ihren Webserver hoch.
1. Folgendes Script muss in den <head> Tag der HTML-Seite eingefügt werden:
<script language=”javascript” src=”HYPERLINK “http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js”http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js” type=”text/javascript”></script>
2. Diese Zeile muss ebenfalls im <head> vorhanden sein:
<script language=”javascript” src=”jquery.tweet.js” type=”text/javascript”></script>
3. Dieser Code muss auch im Bereich Ihrer Seite für Ihre Tweets integriert und angepasst werden. Die englischen auto_join_… Texte können Sie nach Bedarf „eindeutschen“. Testen Sie einfach, welche automatischen Texte für Ihre Seite am besten geeignet sind.
<script type=’text/javascript’>
$(document).ready(function(){
$(“.tweet”).tweet({
username: “eurowebgroup”, // Hier muss Ihr Accountname stehen, sonst werden auf Ihrer Seite die Tweets der eurowebgroup eingeblendet
avatar_size: 32, // die Größe des dargestellten Avatars
count: 3, // Wie viele Tweets sollen dargestellt werden?
join_text: “auto”, // Abstand zwischen Datum und Tweet, hier automatisch
auto_join_text_default: “we said,”, // Automatischer Text
auto_join_text_ed: “we”, // Automatischer Text
auto_join_text_ing: “we were”, // Automatischer Text
auto_join_text_reply: “we replied to”, // Automatischer Text
auto_join_text_url: “we were checking out”, // Automatischer Text
loading_text: “tweets werden geladen…” // Anzeige beim Laden der Tweets
});
});
</script>
3. Diese Zeile muss im <body> Tag der HTML-Seite stehen (hiermit werden die Tweets dargestellt):
<div class=”tweet”></div>
4. Die Stylesheets müssen noch im <head> Tag der HTML-Seite eingebunden werden:
<link href=”jquery.tweet.css” media=”all” rel=”stylesheet” type=”text/css”/>
Und schon sind die Tweets auf Ihrer Homepage!
Lesezeichen mit anderen Nutzern tauschen
Mit Bookmarks kann man besuchte Webadressen speichern und jederzeit wieder abrufen. Wenn mehrere Internetuser Ihre Bookmarks untereinander austauschen, nennt sich dies Social Bookmarking. Um den Austausch von Bookmarks besser zu koordinieren, wurden sogenannte Social-Bookmark-Dienste (z.B. oneview.de oder delicious.com) ins Leben gerufen.
Hier findet ein User Links zu interessanten Websites, Nachrichten, Videos und Blogbeiträgen, die von anderen Usern empfohlen werden. Gerade für Blogbetreiber mit interessanten Texten ist dies sehr wichtig, um neue Leser auf ihre Seite zu lenken.
Um die Weitergabe von Links zur eigenen Site zu vereinfachen, können Betreiber einer Website oder eines Blogs kleine Symbole (Buttons) auf ihren Seiten einbinden. Klickt ein Besucher auf einen Button, wird der Link zur Seite automatisch im Social-Bookmarking-Dienst oder einem sozialen Netzwerk (z.B. Facebook) gespeichert. Der Besucher muss in diesem Dienst auch einen Account besitzen.
Wenn Sie diese Funktion auf Ihrer Homepage oder in Ihrem Blog anbieten wollen, gehen Sie folgendermaßen vor:
1. Besuchen Sie die Website http://www.social-bookmark-script.de. Stellen Sie mit einem Generator die Buttons zusammen, die Sie auf Ihren Seiten anbieten wollen (z.B. Facebook + Mister Wong + Delicious) und passen Sie die Optionen an.
2. Klicken Sie auf der Website auf “Script erstellen”
3. Fügen Sie den ausgegebenen HTML-Code auf Ihren Seiten an den entsprechenden Stellen ein.
Das war’s schon.
Flickr
Einer der erfolgreichsten Web 2.0 Dienste im Internet ist Flickr, gerne auch als Photo Sharing Dienst bezeichnet. Hier können User Bilder einstellen und Bilder von anderen Usern kommentieren. Die Dateien können auch per E-Mail oder Handy auf die Flickr-Plattform hochgeladen werden. Betreiber von Blogs binden gerne Bilder von Flickr auf ihren Seiten ein, um Botschaften oder Thematiken ihrer Texte visuell besser darzustellen.
Das Einbinden von Flickr-Bildern auf der eigenen Homepage ist auch möglich. Die Bilder können u.a. nach Begriffen und Benutzernamen gefiltert werden. Sie müssen dafür einen Flickr-Account besitzen.
Und so geht’s:
1. Loggen Sie sich in Ihrem Flickr-Account ein.
2. Gehen Sie auf die Seite http://www.flickr.com/badge.gne
3. Wählen Sie den HTML-Modus
4. Bestimmen Sie, ob alle Fotos angezeigt werden sollen, oder filtern Sie nach öffentlichen Fotos, Fotos mit bestimmten Begriffen oder Fotos eines bestimmten Albums.
5. Legen Sie dann fest, ob das Account-Bild, zufällige Fotos oder die neuesten Bilder dargestellt werden sollen. Passen Sie die Größe der Bilder an.
6. Anschließend wird ein HTML-Code generiert, den Sie auf Ihrer Seite einbinden müssen.
<!– Start of Flickr Badge –>
<style type=”text/css”>
#flickr_badge_source_txt {padding:0; font: 11px Arial, Helvetica, Sans serif; color:#666666;}
#flickr_badge_icon {display:block !important; margin:0 !important; border: 1px solid rgb(0, 0, 0) !important;}
#flickr_icon_td {padding:0 5px 0 0 !important;}
.flickr_badge_image {text-align:center !important;}
.flickr_badge_image img {border: 1px solid black !important;}
#flickr_www {display:block; padding:0 10px 0 10px !important; font: 11px Arial, Helvetica, Sans serif !important; color:#3993ff !important;}
#flickr_badge_uber_wrapper a:hover,
#flickr_badge_uber_wrapper a:link,
#flickr_badge_uber_wrapper a:active,
#flickr_badge_uber_wrapper a:visited {text-decoration:none !important; background:inherit !important;color:#3993ff;}
#flickr_badge_wrapper {}
#flickr_badge_source {padding:0 !important; font: 11px Arial, Helvetica, Sans serif !important; color:#666666 !important;}
</style>
<table id=”flickr_badge_uber_wrapper” cellpadding=”0″ cellspacing=”10″ border=”0″><tr><td><a href=”http://www.flickr.com” id=”flickr_www”>www.<strong style=”color:#3993ff”>flick<span style=”color:#ff1c92″>r</span></strong>.com</a><table cellpadding=”0″ cellspacing=”10″ border=”0″ id=”flickr_badge_wrapper”>
<script type=”text/javascript” src=”http://www.flickr.com/badge_code_v2.gne?count=5&display=latest&size=t&layout=v&source=user&user=DEINE FLICKR USER ID HIER“></script>
</table>
</td></tr></table>
<!– End of Flickr Badge –>
WICHTIG: Im Code muss bei “DEINE FLICKR USER ID HIER” die eigene Flickr-ID eingetragen werden!
7. Sie müssen für den Flickr-Badge eine eigene Sytlesheet-Datei anlegen. Kopieren Sie folgenden Code in die CSS-Datei:
#flickrPicContent {width:280px; padding:15px 0 0 0; background:#78B3A8}
#flickrPicContent {padding:0 20px 0 20px; font-size:13px; font-family:Georgia,”Times New Roman”,Times,serif; color:#FFF; font-style:italic}
#flickrPicContent a {color:#4A412C}
#flickrPicContent a:hover {color:#FF564A}
#flickr_badge_wrapper {width:261px; padding:0 19px 0 0; background:#78B3A8; overflow:hidden}
.flickr_badge_image {width: 65px; height: 70px; float: left; background:url(images/Backgrounds/flickrPicBg.jpg) left top no-repeat; padding:5px 0 0 22px; float: left;}
.flickr_badge_image img {width: 60px; height: 50px;}
#flickr_badge_source {text-align:left; margin:0 10px 0 10px;}
#flickr_badge_icon {float:left; margin-right:5px;}
#flickr_www {display:block; padding:0 10px 0 10px !important; font: 11px Arial, Helvetica, Sans serif !important; color:#3993ff !important;}
#flickr_badge_source {padding:0 !important; font: 11px Arial, Helvetica, Sans serif !important; color:#666666 !important;}
Und schon sind die Flickr-Bilder auf Ihrer Seite.
Falls Sie Bilder von Flickr in einem WordPress-Blog einbinden wollen, verwenden Sie das Plugin Flickr Photo Album for WordPress.
Viel Spaß beim Ausprobieren!
Gastautor dieses Beitrags ist Duy Tran, Webdesigner bei der Euroweb Internet GmbH in Düsseldorf, dem Full-Service-Internetdienstleister für Deutschland und Österreich.
Zwitschern mit Duy und der Euroweb Group geht auch.
Informationen über den Autor:
| Name: | Designpicks Gastbeitrag |
| Homepage/Blog: | http://www.designpicks.de |
| Archiv: | Alle Beiträge von Designpicks anzeigen » |
Dieser Beitrag wurde von einem Gastautoren erstellt.
Kategorie: Scripts & Snippets, Web 2.0
Kommentar schreiben:
Weitere Beiträge über dieses Thema:
[...] 2.0 Vernetzung (oder wie ich mir doppelte Arbeit sparen kann)” für die Euroweb bei Designpicks als Gastautorenbeitrag veröffentlicht. Dort thematisiere ich kurz und knapp wie man Social [...]
Hey, endlich mal alles auf einen Blick. Danke für diesen Artikel !