1. Social-Media-Widgets am
Beispiel Facebook
IMK-MA
Medieninformatik 1
Kathrin Schütte
Martina Zangl
Johannes Kuhn

2. Unsere Agenda
•
•
•
•
•
Widgets / Social-Media-Widgets Facebook
Einbinden Like Box über WordPress
Auswirkungen auf Seitenladezeiten
Open Graph Protokoll & Meta Tags
Rechtliche Aspekte

3. 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, Social
Bookmarks, Wetterkarten, Uhren,
Ladungsanzeigen, Kartenausschnitte uvm.

4. Social-Media-Widgets von Facebook
•
•
•
•
•
•
Like Button
Share Button
Send Button
Embedded Posts
Follow Button
Comments
•
•
•
•
•
•
Activity Feed
Recommendations Feed
Recommendations Bar
Like Box
Facepile
…

5. Einbinden der Like Box über WordPress
TUTORIAL
https://developers.facebook.com/docs/plugins/like-box-for-pages

6. Auswirkungen auf die Ladezeit
• Social Plugins setzen Anfragen an Server ab
• Aufblähen der übertragenen Datenmenge
• kann Performance der Seite beeinflussen

7. Like Box HTML5-Variante

8. Like Box IFRAME-Variante

9. Performance-Lösungen
„Zwei-Klick-Methode“
Platzhalter werden ausgeliefert, „aktivieren“ des Social
Plugins erst durch Klick von User
Skriptfreies Sharing
speziell codierte URLs mit benötigten Informationen
Nachteil: Keine Kommunikation zwischen Client und
Server  keine aktuellen Daten!

10. 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

11. 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

12. 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="..."/>

13. 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="..."/>

14. Rechtliche Aspekte
• Datenübertragung bei Seitenaufruf
• problematisch für Datenschutz
• Hinweis im Impressum
– Haftungsfragen

15. 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

16. Lösungen
• Cookies von Dritten im Browser blockieren
• 2-Klick-Lösung
– User aktivieren Like Button selbst
Quelle: Heise.de - 2 Klicks für mehr Datenschutz

17. Danke für euer
LIKE!