Social Media Widgets
-
Upload
kuhni- -
Category
Social Media
-
view
95 -
download
0
Transcript of Social Media Widgets
![Page 1: Social Media Widgets](https://reader034.fdocuments.in/reader034/viewer/2022052602/559b5cb41a28abbc7f8b4766/html5/thumbnails/1.jpg)
Social-Media-Widgets am Beispiel Facebook
IMK-MA
Medieninformatik 1
Kathrin Schütte
Martina Zangl
Johannes Kuhn
![Page 2: Social Media Widgets](https://reader034.fdocuments.in/reader034/viewer/2022052602/559b5cb41a28abbc7f8b4766/html5/thumbnails/2.jpg)
Unsere Agenda
• Widgets / Social-Media-Widgets Facebook
• Einbinden Like Box über WordPress
• Auswirkungen auf Seitenladezeiten
• Open Graph Protokoll & Meta Tags
• Rechtliche Aspekte
![Page 3: Social Media Widgets](https://reader034.fdocuments.in/reader034/viewer/2022052602/559b5cb41a28abbc7f8b4766/html5/thumbnails/3.jpg)
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.
![Page 4: Social Media Widgets](https://reader034.fdocuments.in/reader034/viewer/2022052602/559b5cb41a28abbc7f8b4766/html5/thumbnails/4.jpg)
• 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
![Page 5: Social Media Widgets](https://reader034.fdocuments.in/reader034/viewer/2022052602/559b5cb41a28abbc7f8b4766/html5/thumbnails/5.jpg)
Einbinden der Like Box über WordPress
https://developers.facebook.com/docs/plugins/like-box-for-pages
TUTORIAL
![Page 6: Social Media Widgets](https://reader034.fdocuments.in/reader034/viewer/2022052602/559b5cb41a28abbc7f8b4766/html5/thumbnails/6.jpg)
Auswirkungen auf die Ladezeit
• Social Plugins setzen Anfragen an Server ab
• Aufblähen der übertragenen Datenmenge
• kann Performance der Seite beeinflussen
![Page 7: Social Media Widgets](https://reader034.fdocuments.in/reader034/viewer/2022052602/559b5cb41a28abbc7f8b4766/html5/thumbnails/7.jpg)
Like Box HTML5-Variante
![Page 8: Social Media Widgets](https://reader034.fdocuments.in/reader034/viewer/2022052602/559b5cb41a28abbc7f8b4766/html5/thumbnails/8.jpg)
Like Box IFRAME-Variante
![Page 9: Social Media Widgets](https://reader034.fdocuments.in/reader034/viewer/2022052602/559b5cb41a28abbc7f8b4766/html5/thumbnails/9.jpg)
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!
![Page 10: Social Media Widgets](https://reader034.fdocuments.in/reader034/viewer/2022052602/559b5cb41a28abbc7f8b4766/html5/thumbnails/10.jpg)
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
![Page 11: Social Media Widgets](https://reader034.fdocuments.in/reader034/viewer/2022052602/559b5cb41a28abbc7f8b4766/html5/thumbnails/11.jpg)
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
![Page 12: Social Media Widgets](https://reader034.fdocuments.in/reader034/viewer/2022052602/559b5cb41a28abbc7f8b4766/html5/thumbnails/12.jpg)
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="..."/>
![Page 13: Social Media Widgets](https://reader034.fdocuments.in/reader034/viewer/2022052602/559b5cb41a28abbc7f8b4766/html5/thumbnails/13.jpg)
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="..."/>
![Page 14: Social Media Widgets](https://reader034.fdocuments.in/reader034/viewer/2022052602/559b5cb41a28abbc7f8b4766/html5/thumbnails/14.jpg)
Rechtliche Aspekte
• Datenübertragung bei Seitenaufruf
• problematisch für Datenschutz
• Hinweis im Impressum
– Haftungsfragen
![Page 15: Social Media Widgets](https://reader034.fdocuments.in/reader034/viewer/2022052602/559b5cb41a28abbc7f8b4766/html5/thumbnails/15.jpg)
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
![Page 16: Social Media Widgets](https://reader034.fdocuments.in/reader034/viewer/2022052602/559b5cb41a28abbc7f8b4766/html5/thumbnails/16.jpg)
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
![Page 17: Social Media Widgets](https://reader034.fdocuments.in/reader034/viewer/2022052602/559b5cb41a28abbc7f8b4766/html5/thumbnails/17.jpg)
Danke für euer LIKE!