Dissident / Opendix - Blog: Technologie, Politik, Medien, Wirtschaft, Wissenschaft, gegen rechts - Informationen, News, Themen
01010111 01101001 01101100 01101100 01101011 01101111 01101101 01101101 01100101 01101110 00100000 01100001 01110101 01100110 00100000 01100100 01100101 01101101 00100000 01010111 01100101 01100010 01100010 01101100 01101111 01100111 00100000 01110110 01101111 01101110 00100000 01001111 01110000 01100101 01101110 01100100 01101001 01111000 00100001
Social Networks für Webseitenbetreiber

Hallo! Lang ist es her seit meinem letzten Post (8 Monate :P), das soll mich aber nicht davon abhalten einen neuen Blog-Artikel zu verfassen

In diesem Artikel möchte ich euch das Thema Social Networks für Webseitenbetreiber näher bringen. Viele Netzwerkanbieter bieten die Möglichkeit sogenannte Sharing Buttons auf der eigenen Website einzubinden, sowas habt ihr bestimmt schon mal gesehen und seid bestimmt auch absolut heiß darauf zu erfahren wie das funktioniert und wie ihr so etwas auf eurer Website einbauen könnt.

Ich habe mich ein wenig damit auseinandergesetzt und möchte euch natürlich daran Teil haben lassen. Das Prinzip ist immer relativ einfach. Die Buttons bestehen meist nur aus einem a-Tag an den entweder an dem im href-Attribut angegebenen Link selbst einige Werte hinzugefügt werden oder es werden, wie bei Facebook, einige Informationen über Attribute und Meta-Tags an das Social Network übermittelt. Im Falle von Facebook (und wahrscheinlich auch bei anderen, es gibt wirklich sehr viele Social Networks) wird dem Link noch eine kleine Zeile JavaScript hinzugefügt.

Im Folgenden möchte ich euch genauer erklären wie ihr solche Links für Twitter und Facebook erstellt, in den ergänzenden Links werdet ihr aber noch ein paar positive Überraschungen und Anleitungen für weitere Netzwerke finden, wer also nicht so sehr am technischen Gebrabbels interessiert ist, springt am besten einfach weiter zu den Links.

Twitter
Twitter Sharing Buttons sind relativ einfach und auch schnell erklärt:

<a href='http://twitter.com/home?status=HIER DER ZU TWITTERNDE TEXT'>klicken zum twittern</a>

Erläuterung:
Der zu twitternde Text wird über die HTTP GET-Methode in der Variable status an Twitter übermittelt, also: alles was nun hinter http://twitter.com/home?status= steht ist der Inhalt des Twitter-Textes. Beachte dass dieser Text nicht mehr als 140 Zeichen beinhalten darf, da dies die maximale Länge von Twitter-Beiträgen ist.

Und so könnte ein Twitter-Share-Button aussehen wenn er fertig und funktionsfähig auf einer Website eingebaut ist (nur zu, klick ihn ruhig an *gg*):

klicken zum twittern

Facebook
Facebook-Sharing-Buttons sind etwas anders aufgebaut:

<a name='fb_share'></a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

Erläuterung:
Der oben stehende Code würde einen einfachen Share-Button erzeugen der so aussieht und die URL der aktuell aufgerufenen Seite an Facebook übermittelt. Dem a-Tag kann man aber noch weitere Attribute hinzufügen:

share_url="deine URL"

Dieses Attribut sagt dem Share-Button dass er statt der URL der aktuellen Seite eine fest definierte URL an Facebook übermitteln soll.

type="Icon-Typ"

Dieses Attribut legt fest welches Icon der Button haben soll, ihr könnt zwischen fünf Typen wählen: box_count, button_count, button, icon_link und icon. Die Zahlen bei box_count und button_count zeigen an wievielen Leuten der geteilte Link gefällt.

Facebook liest automatisch den Inhalt der geteilten Website aus und stellt die Informationen in einem Link-Post zusammen, den euer Besucher anschließend durch bestätigen in sein Profil posten kann. Natürlich bietet Facebook auch hier Möglichkeiten die automatisch von Facebook gesammelten Informationen zu beeinflussen. Dies geschieht aber im Header-Bereich eurer Website:

<meta name="title" content="Der Titel der Website" />
<meta name="description" content="Beschreibung der Website, bzw. des Inhalts" />
<link rel="image_src" href="Dateipfad zu einem Bild" />

Das Meta-Tag title ist die Überschrift des Facebook-Posts, aber auch gleichzeitig der Seitentitel eurer Seite, dieser sollte daher intelligent gewählt werden.
Das Meta-Tag description ist eine kurze Beschreibung eurer Website und erscheint im Facebook-Post direkt unter der Überschrift.
Mit dem Bezugs-Element image_src könnt ihr ein Bild auswählen welches im Post angezeigt wird.

Und so könnte ein Facebook-Share-Button aussehen:

klicken zum teilen



Facebook Developer Wiki: Facebook Share

w3c Gallery: How to add LinkedIn Share link

w3c Gallery: How to add MySpace Share link

addthis.com: hunderte Share-Buttons in einem

addtoany.com: anderer all-in-one-Share-Button

visitmeon.com: das Ganze geht auch anders: Buttons für eure Social Network-Profile, sogar Barack Obama soll so einen haben

komodomedia.com: und natürlich die Icons für die Share-Buttons
17.2.10 03:37
 


Werbung


bisher 0 Kommentar(e)     TrackBack-URL

Name:
Email:
Website:
E-Mail bei weiteren Kommentaren
Informationen speichern (Cookie)



 Smileys einfügen
Gratis bloggen bei
myblog.de