Social-Media-Widgets am Beispiel Facebook

IMK-MA

Medieninformatik 1

Kathrin Schütte

Martina Zangl

Johannes Kuhn

Unsere Agenda

• Widgets / Social-Media-Widgets Facebook

• Einbinden Like Box über WordPress

• Auswirkungen auf Seitenladezeiten

• Open Graph Protokoll & Meta Tags

• Rechtliche Aspekte

Was sind Widgets?

• kleine, eigenständige Programme mit Fenster

• können in HTML-Seiten eingebettet werden

• verändern sich dynamisch

Beispiele für Widgets: RSS-Feeds, SocialBookmarks, Wetterkarten, Uhren, Ladungsanzeigen, Kartenausschnitte uvm.

• Like Button

• Share Button

• Send Button

• Embedded Posts

• Follow Button

• Comments

• Activity Feed

• Recommendations Feed

• Recommendations Bar

• Like Box

• Facepile

• …

Social-Media-Widgets von Facebook

Einbinden der Like Box über WordPress

https://developers.facebook.com/docs/plugins/like-box-for-pages

TUTORIAL

Auswirkungen auf die Ladezeit

• Social Plugins setzen Anfragen an Server ab

• Aufblähen der übertragenen Datenmenge

• kann Performance der Seite beeinflussen

Like Box HTML5-Variante

Like Box IFRAME-Variante

Performance-Lösungen

„Zwei-Klick-Methode“

Platzhalter werden ausgeliefert, „aktivieren“ des SocialPlugins erst durch Klick von User

Skriptfreies Sharing

speziell codierte URLs mit benötigten Informationen

Nachteil: Keine Kommunikation zwischen Client und Server keine aktuellen Daten!

Open Graph Protokoll

• offene Schnittstelle

• Nachfolger von „Facebook Connect“

• Webseiten werden semantisch klassifiziert

• automatische Meta-Daten im Header

• Inhalte werden ausgelesen & verwertet

• soziale Erweiterungsmodule Social Plugins

Open Graph Protokoll

• Besuch einer beliebigen Webseite

• Klick auf den Like-Button

– Aktivität in der eigenen Timeline

– Freunde erhalten Einblick in Vorlieben

– User sieht auf Webseite, welchen Freunden das ebenfalls gefällt

Meta Tags

• Titel

– <meta property="og:title" content="..."/>

• Typ

– <meta property="og:type" content="..."/>

• URL

– <meta property="og:url" content="..."/>

• Bild (URL)

– <meta property="og:image" content="..."/>

Meta Tags

• Name der Webseite

– <meta property="og:site_name" content="..."/>

• Facebook Benutzer ID

– <meta property="fb:admins" content="..."/>

• Facebook APP ID

– <meta property="fb:app_id" content="..."/>

• Beschreibung

– <meta property="og:description" content="..."/>

Rechtliche Aspekte

• Datenübertragung bei Seitenaufruf

• problematisch für Datenschutz

• Hinweis im Impressum

– Haftungsfragen

Facebook loves data

• IP-Adresse

• Handynummer

• Internetanbieter

• Betriebssystem

• Hersteller und Modell des (mobilen) Geräts

• Standort (GPS)

• Daten über Interaktion mit Freunden

• Daten über Surfverhalten in Bezug auf Werbeanzeigen

• personenbezogene Daten: Alter, Geschlecht,…

Quelle: https://www.facebook.com/about/privacy/your-info

Lösungen

• Cookies von Dritten im Browser blockieren

• 2-Klick-Lösung

– User aktivieren Like Button selbstQuelle: Heise.de - 2 Klicks für mehr Datenschutz

Danke für euer LIKE!