Social - Facebook, Twitter, Google+ und Co

Twitter !
Auf jeder Seite der MSXFAQ gibt es links oben den Button um diese Seite anderen Personen mitzuteilen, die ihnen folgen.

Social Networking ist schon länger in aller Munde. Früher gab es Webseiten und Mailinglisten, dann wurde die Kommunikation mit RSS-Feeds beschleunigt. Und heute verknüpfen sich Menschen per XING, Facebook oder ersetzten SMS-Mitteilungen durch Twitter-Meldungen mit 160 Zeichen.

Lange Zeit habe ich mir das erst mal betrachtet. Man muss ja nicht jedem Trend nachlaufen aber auch meine Arbeitsweise ändert sich. Der Mailverteiler, den ich vor vielen Jahren mal eingerichtet habe, nutze ich schon länger nicht mehr und für schnelle Updates ist eine "Twitter-Welle" sogar dynamischer und erreicht mehr Personen als "nur" eingetragenen Benutzer. Zudem ändern sich Mailadressen auch, so dass diverse Mails über den Verteiler als "Unzustellbar" zurück kommen. Das war für mich dann auch der Grund zu sehen, was Twitter und Facebook für Sie als MSXFAQ-Leser bedeuten und oben links entsprechende Buttons zu addieren.

Sowohl Twitter, Facebook und alle anderen bieten "Button-Generatoren" an, die den fertigen Code ihnen bereit stellen, damit Sie diesen einfach in ihre Webseite einbinden können.

Achtung:
Diesen Code nutze ich absichtlich nicht, weil dazu entweder IFRAME-Elemente oder JavaScript von fremden Seiten nachgeladen wird und Sie Anwender entweder eine Warnung bekommen oder der Code "irgendetwas" mit der Webseite über DOM machen kann, was ich so nicht möchte. Zudem holt ihr Browser dann bei jedem Zugriff auf die MSXFAQ auch ein bisschen Code von Facebook, Twitter etc. was dort natürlich Spuren hinterlässt
Ich habe daher statische Buttons mit individuellen Links addiert. Erst durch den Klick auf den Button landen Sie dann in einem neuen Fenster bei Twitter und Co und wissen immer genau, wo sie ihre Daten dann eingeben.

Allerdings kann ich ihnen dann natürlich nicht via Icon schon anzeigen, ob sie mir schon folgen und wie viele andere Personen schon ein "I-Like-it" angeklickt haben. Aber ich denke das ist zu verschmerzen.

Teams

Seit Anfang 2021 gibt es links auch ein "Teams"-Icon, mit dem Sie als Teams-Benutzer die gerade betrachtete Seite sehr einfach in einen Kanal in ihrem eigenen Team weiterleiten können. Details zur Umsetzung finden Sie auf der folgenden Seite

Twitter

Eigentlich ist Twitter ein "Kurzmitteilungsdienst", bei dem gerade mal 160 Zeichen übermittelt werden können; quasi SMS im Internet. Aber Twitter ist dann doch etwas mehr, weil ich als Versender nicht die Empfänger aussuchen muss, sondern ich diese einfach als "msxfaq" sende und jeder andere Twitter-Anwender diesen Anwender "Abonnieren" kann. Sobald ich eine kleine Meldung sende, sehen alle "Follower" diese Information. für die Funktion fehlt aber noch ein Baustein.

Wenn Sie mir folgen wollen, dann gehen Sie einfach auf http://www.twitter.com/msxfaq, eventuell ist eine Anmeldung erforderlich und dort auf "Folgen" drücken

Und schon habe ich einen "Follower" mehr und sie bekommen zeitnah Informationen, über alles, was ich als relevant ansehen. Und wenn es ihnen zu viel wird, dann können Sie einfach wieder aussteigen, indem Sie in ihrem Profil mich wieder entfernen.

Hinweis:
Leider aktiviert Twitter nicht per Default HTTPS an allen Stellen. In ihren Accountdaten sollten Sie daher "HTTPS" erzwingen:

Meine Links verweisen per Default aber auf die HTTPS-Adresse

Nun ist es ja so, dass ein "Klick" auf den Twitter-Eintrag natürlich einen Zugriff auf die Webseite von Twitter und optional eine Anmeldung erfordert. Damit kann natürlich Twitter erkennen, wer Sie sind und woher sie kommen.

Das gleiche passiert, wenn Sie auf klicken, nur dass hier die URL noch die Information enthält, auf welcher Seite sie den Button gedrückt haben

http://twitter.com/hare?URL=http%3A%2F%2Fwww.msxfaq.net%2Fpfad%2Fseite.htm&text=Titel+der+Seite

Ich werde in kürze die URL in der folgenden Form generieren.

<a href="http://twitter.com/share?URL=URLencode(link); ?>&amp;text=<?URLencode(title)&amp;via=msxfaq&amp;related=msxfaq"></a>

https://twitter.com/intent/tweet?URL=http%3A%2F%2Fwww.msxfaq.net%2Fpage&text=Seitentitle&via=msxfaq&related=msxfaq

Das hat zudem den Vorteil, dass das Layout der Seite auch "offline" ohne Internetverbindung gegeben ist und sich keine IFRAME-Inhalte dynamisch ändern oder umbauen oder über DOM ein fremdes von mir nicht kontrolliertes JavaScript die Webseiteninhalte verändert.

Auf den Einsatz der IFRAMEs, damit schon beim Laden der Seite JavaScript von Twitter ausgeführt werden, habe ich verzichtet. Genau das machen ja die "Generatoren", die für Twitter-Buttons einen Code generieren.

Das würde zwar zu einer besseren "Benutzererfahrung" (ich mag dieses Wort nicht wirklich) führen, und Zusatzfunktionen erlauben, aber ich möchte ihnen es frei stellen, diese Daten preiszugeben und habe daher die URLs entsprechend abgewandelt.

Allein die Anzeige der MSXFAQ-Webseiten hinterlässt keine Spuren bei Twitter, weil alle Daten von der MSXFAQ kommen. Erst wenn Sie die Buttons anklicken, dann leite ich Sie in einem neuen Fenster auf die entsprechende Seite bei Twitter.

Allerdings führt Twitter schon Buch, wer wo klickt und als Nutzer von Twitter können Sie dies auch einsehen. Starten Sie einfach Twitter im Browser und wechseln sie dann auf die folgende Seite

Interessanterweise startet die Auswertung erst, wenn Sie mit ihrem Account einmal diese Seite gestartet haben.

Facebook

Der zweite große Vertreter ist natürlich "Facebook". Eigentlich eine Seite, mit der man seine Freunde, angeblichen Freunde und Kontakte verwalten kann. In Deutschland ist vielleicht eher OpenBC bzw. nun "XING" bekannt. Auch diese Plattformen erlauben die Übermittlung von Nachrichten aber auch die Anzeige von Statusmeldungen. Bislang habe ich zwar noch keinen Add-on für Lync gesehen, welches meinen Lync-Status auch in Facebook setzt.

Bei Facebook gibt es zwei Funktionen, die für den Einsatz in einer Webseite sinnvoll sein können.

  • Share this
    Damit können Sie eine Seite über ihren eigenen Facebook-Account weiter geben. Das ist unkritisch, da der Code einfach eine URL ist, die sie beim Anklicke auf ihre Facebook-Seite verweist. Diese Funktion habe ich addiert, damit sie sehr einfach eine interessante Seite in Facebook referenzieren können.
  • I Like It/Gefällt
    Über diese Funktion können Leser eine Seite einer Webseite quasi "bewerten". Leider geht dies technisch nur über ein IFRAME oder JavaScript, die schon beim Betrachten der MSXFAQ von der Facebook-Seite nachgeladen werden. Und das alles nur, damit neben dem Icon die Anzahl der Personen stehtn die das mögen und Facebook genau mit bekommt, wo seine Mitglieder sich rumtreiben. Auf diese Funktion haben ich lieber verzichtet.

Technisch ist auch der "Share This"-Butten wie bei Twitter ein Hyperlink auf Facebook mit passenden Parametern

http://www.facebook.com/sharer.php?u=http%3A%2F%2Fwww.msxfaq.net%2Fpfad%2Fseite.htm.htm&t=Titel+der+seite

Natürlich können Sie über Facebook auch das Profil der MSXFAQ ansehen Interessant ist bei Facebook natürlich der "I Like It"-Button, den sie ebenfalls links oben finden.

Dies ist ein eigener Account, der die MSXFAQ repräsentiert und ist nicht mein "Persönlicher" Facebook-Account. So können Freunde und MSXFAQ-Freunde ungestört nebeneinander existieren.

Wer gerne auf seiner Webseite einen "I Like It"-Button addieren will, kann dies gerne tun. die Codegeneratoren von Facebook liefern fertigen Sourcecode zum einblenden.

Hier erfolgt die Integration über aber ein IFRAME oder ein xfbml-Skript. Beide Daten kommen vom Facebook-Server der damit indirekt natürlich auch mittracken kann, dass Sie gerade meine MSXFAQ besuchen, d.h. allein die Anzeige des Buttons links oben ist schon ein "Hit" bei Facebook. Hier ein Mustercode:

<iframe src="http://www.facebook.com/Plugins/like.php?href=http%3A%2F%2Fwww.mxsfaq.net&amp;layout=button_count&amp;show_faces=false&amp;width=50&amp;action=like&amp;colorscheme=light&amp;height=20" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:55px;height:20px" allowTransparency="true"></iframe>

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=234263189930231&amp;xfbml=1"></script><fb:like href="www.msxfaq.net" send="false" width="450" show_faces="false" font=""></fb:like>

Google Plus+

Natürlich musste früher oder später auch Google das "Gefällt-mir"-Prinzip anbieten um damit natürlich auch ein "Rating" der Seiten zu erhalten. Das kann dem Suchindex natürlich gut tun, zumindest solange es keine Lücken gibt, über die Personen oder Bots diese Zahlen verfälschen.

Sie finden auf verschiedenen Webseiten schon das Icon. Allerdings funktioniert das scheinbar auch erst mal nur mit JavaScript und wenn Sie schon auf meiner Webseite sind, dann ist des doch relativ egal, wie viele andere Besucher die gerade angeschaute Seite "mögen". Das addieren eines solchen Icons kann aber für Webmaster interessant sein, wenn Google diese Daten auch in das Ranking seiner Suchergebnisse mit einbezieht.

Aktuell ist diese Funktion aber noch nicht integriert.
Ich hoffe noch, dass es es auch hier mal eine URL-Version ohne IFRAME o.ä. gibt.

Auch diese Icons werden als JavaScript eingebunden, d.h. bei jedem "Lesezugriff" auf die Webseite werden diese Skripte von Google nachgeladen, was die Ladezeit verzögert und natürlich Spuren hinterlässt.

Google+ und Profile in den Suchergebnissen.

Etwa um Juni 2012 bin ich darauf aufmerksam geworden, dass Google Suchergebnisse ein Profilbild des Webautors anzeigen. Nun das wollte ich auch mal ausprobieren und es ist gar nicht schwer, zumindest wenn man ein Google+-Konto hat, welches natürlich wieder erforderlich ist. Damit hat man dann auch eine Profilseite. Mein Profil ist

Damit das Bild aber nun in den Suchergebnissen auftaucht, muss auf der Webseite noch die Referenz addiert werden.

  • Eine "Über Mich"-Seite erstellen.
    Diese Seite gibt es natürlich schon lang auf Kontakt
    Auf dieser Seite muss es einen Link zur Google Profilseite geben, der mit einem 'rel="me" bestückt ist'
<a href="https://plus.google.com/117524239150677935790?rel=me">My Profile</a>
  • Kontakt-Seite verlinken
    Auf jeder Webseite, die ich erstelle, muss ich nun einen Link zu eben dieser Kontaktseite einrichten. Auch hier muss ich mit 'rel=”author"' für Google darauf hinweisen, wer der Autor ist.

<a href="https://plus.google.com/117524239150677935790?rel=author">Frank Carius</a>

  • Kontakt-Seite als zusätzlichen Link im Google Profil addieren
    Damit wird die Verbindung fom Profil zurück zur eigenen Webseite mit der Biographie gelegt. Nur bin ich mal gespannt, wie das mit mehreren Domainnamen und URLs funktioniert.

Hinweis:
Man kann den Umweg über die "me" Seite sich auch ersparen, wenn man auf jeder Seite direkt den Link zu Google einbaut.

<a href="https://plus.google.com/117524239150677935790?rel=author">My Profile</a>

Skepsis.
Wenn es aber so einfach ist, auf einer Webseite einen Link zu einer Google Profilseite zu addieren, damit dann Google das Profilbild damit im Suchergebnis anzeigt, dann ist es doch genauso einfach, dass jemand anderes auf seiner Seite einen Link auf "mein" Profil addiert. Taucht dann mein Bild irrtümlich an seinem Ergebnis auf ?. Eine echte Garantie auf die Autorschaft kann ich da nicht sehen.

Und dann gilt es einfach zu warten, bis Google beim nächsten Indexlauf die Verbindungen erkennt. Über verschiedene Tools bei Google können Sie sehen, was google "sieht:

Hier noch andere Links zu Beschreibung.

Microsoft "pinned Sites"

Mit dem IE9 hat sich Microsoft was nettes einfallen lassen, um Besucher den Zugang zur Webseite einfacher zu machen. Wir können ja alle die neue Taskleiste von Windows Vista und höher und dann sich Anwendungen doch auch "anpinnen" lassen, d.h. die Icons bleiben dort, auch wenn das Programm beendet ist und ein Context-Menü liefert zusätzliche Optionen. Das ganze funktioniert mittlerweile auch mit Webseiten am Internet Explorer 9, wenn die Webseite die entsprechenden Codes enthalten.

Für die MSXFAQ bin ich noch nicht schlüssig, ob diese Funktion einen Mehrwert hat, die das Nachladen von Java-Skripten von anderen Webseiten rechtfertigt. Zumal ich davon ausgehe, dass viele Administratoren vielleicht auf einem Server die MSXFAQ ansurfen und dort jeder Zugriff auf andere URLs entsprechend gemeldet wird. Ich werde die Entwicklung weiter beobachten.

Hintergrund IFRAME und externe JavaScript

Ich leide hoffentlich nicht an Paranoia aber wenn ich auf eine Webseite surfe, dann erwarte ich auch nur Inhalte dieser Seite. Und das meinen auch immer mehr Browser, die Inhalte von anderen Seiten erst nach einer Warnung anzeigen. Hier der IE9 bei der Einbindung von Facebook ohne SSL.

Auch wenn es "einfach" ist, Inhalte anderer Seiten einfach auf dem Client per IFRAME oder JavaScript in die eigenen Inhalte einzubinden, so mache ich mir damit nicht nur die Inhalte der anderen Seiten zu eigen. Schlimmer ist, dass ich gar nicht weiß, was der andere Anbieter im Rahmen des IFRAME gerade "einblendet". Bei einem kleinen Facebook-Button kann das ja auch ein Schadcode sein. Es gibt keinen fehlerfreien Code und wenn genau diese Quelle bei Facebook verändert ist, dann haben alle tausende MSXFAQ-Besucher vielleicht etwas, was sie nicht wollen.

Beim Einsatz von JavaScript ist das meiner Ansicht nach noch kritischer, da ich die Funktion der eingebundenen Skript in der Regel gar nicht kontrollieren kann. Die Skripte laufen aber in ihrem Browser ab und können über das Document Object Model sogar die angezeigte HTML-Seite verändern. Da sollte man als Webautor schon sicher sein, dass man vertrauenswürdige Quellen hat und ist trotzdem nicht sicher, dass ein Hack die Quelle korrumpiert.

Wenn ich den Button per XFBML-Code einbinde, dann könnte ich als Autor sogar sehen, wer auf welcher Seite den "I Like it"-Button gedrückt hat.

Ich habe noch nicht abschließen entschieden, welche Integration ich in welcher Art betreiben möchte. Aktuell ist es eine Pilotphase und ich freue mich auf Feedback.

Direkte Links

Sie haben sicher schon gemerkt, dass ich nicht der Freund von JavaScript oder iFrames bin, die auch noch von anderen Servern herunter geladen werden. Wenn Sie sich aber z.B. eine Seite wie http://www.simplesharebuttons.com/buttons/ anschauen, dann gibt es durchaus sehr viele "Social Dienste" die für Webmaster vielleicht doch interessant sind. Deren "Buttonleiste" (Stand Juli 2013) zeigt einige Dienste:

Fahren Sie dann aber mit der Maus darüber oder schauen sich den Quelltext an, dann ist zu sehen, dass das auch alles ohne Skripte gehen kann.

Zumindest eine Vielzahl von Diensten sind auch direkt per HTTP ansprechbar. Zugegeben sehe ich als Webmaster dann nicht, wann Sie diese Links anklicken und auch die Social Portale sehen Sie erst, wenn Sie den Link angeklickt haben. Aber das ist aus meiner Sicht sogar "sicherer". Versieht man den Link noch mit einem 'Target="_blank"', dann wird einfach ein neues Fenster geöffnet. Die eigentliche Seite bleibt also bestehen. Anstelle der "xxx" muss natürlich die URL der aktuellen Seite stehen:

  • Twitter Tweet
    http://twitter.com/share?URL=&text=@msfaq Buttons
  • Facebook
    http://www.facebook.com/sharer.php?u=xxxx
  • Google Plus
    https://plus.google.com/share?URL=xxx
  • LinkedIn
    http://www.linkedin.com/shareArticle?mini=true&URL=xxxx
  • Tumbl
    http://www.tumblr.com/share/link?URL=xxx&name=MSXFAQ
  • MailTo
    mailto:?Subject=MSXFAQ Seite&Body=Schau dir mal diese Seite an: xxxxx

Sie können auch gerne den Quelltext jeder Seite anschauen.

Weitere Links