Button „Gefällt mir“ für das Web

Änderungen an sozialen Plugins in der Region Europa

Bei sozialen Plugins kann es demnächst zu gewissen Beeinträchtigungen kommen. Grund dafür ist eine aktualisierte Aufforderung zur Einwilligung in Cookies, die Nutzer*innen von Facebook-Produkten in der Region Europa angezeigt wird. Für Nutzer*innen aus der Region Europa werden die sozialen Plugins „Gefällt mir“ und „Kommentieren“ nur noch dann unterstützt, wenn die Nutzer*innen 1) bei ihrem Facebook-Konto angemeldet sind und 2) ihre Zustimmung zu Cookies für Apps und Websites erteilt haben. Wenn diese Bedingungen beide erfüllt sind, können Nutzer*innen Plugins wie die „Gefällt mir“- oder „Kommentieren“-Buttons sehen und nutzen. Ist eine dieser Bedingungen nicht erfüllt, können Nutzer*innen diese Plugins nicht sehen.

Die Region Europa umfasst bestimmte Länder, darunter:

Die europäische Union (EU): Belgien, Bulgarien, Dänemark, Deutschland, Estland, Finnland, Frankreich, Griechenland, Irland, Italien, Kroatien, Lettland, Litauen, Luxemburg, Malta, Niederlande, Österreich, Polen, Portugal, Rumänien, Schweden, Slowakei, Slowenien, Spanien, Tschechische Republik, Ungarn, Zypern
Nicht-EU-Staaten, die dem EWR / der EFTA oder der EU-Zollunion angehören: [Nur EWR-/EFTA-Mitgliedsstaaten] Island, Liechtenstein und Norwegen; Schweiz: [EU-Zollunion] alle Kanalinseln, Isle of Man, Monaco; die britischen Hoheitsgebiete in Zypern; [Europäische Zollunion] Andorra, San Marino, Vatikanstadt
Europäische Gebiete in äußerster Randlage (GÄR), die nicht direkt zur EU gehören: Martinique, Mayotte, Guadeloupe, Französisch-Guayana, Réunion, St. Martin, Madeira, Azoren, Kanarische Inseln
Vereinigtes Königreich (alle Britischen Inseln)

Angepassten Button „Gefällt mir“ abrufen

Rufe mit dem Konfigurator für Button „Gefällt mir“ den Code für Button „Gefällt mir“ ab, um ihn in deine Webseite einzufügen.

Gib die URL deiner Webseite an, in die du den Button „Gefällt mir“ einfügst.
Dein angepasster Button „Gefällt mir“
Vorschau deines Buttons anzeigen
Klicke auf Code abrufen, kopiere den Code und füge ihn in deine Webseite ein.

Konfigurator für Button „Gefällt mir“

URL für „Gefällt mir“

Width

Layout

standard

Handlungstyp

Größe des Buttons

small

Button „Teilen“ hinzufügen

Code generieren

Du kannst deine Link-Vorschau mit Open Graph-Meta-Tags anpassen. Das og:url-Tag und das data-ref-Attribut sollten dieselbe URL aufweisen.

Vollständiges Codebeispiel

Für Lesbarkeit formatiert.

<html>
<head>
  <title>Your Website Title</title>
    <!-- You can use open graph tags to customize link previews.
    Learn more: https://developers.facebook.com/docs/sharing/webmasters -->
  <meta property="og:url"           content="https://www.your-domain.com/your-page.html" />
  <meta property="og:type"          content="website" />
  <meta property="og:title"         content="Your Website Title" />
  <meta property="og:description"   content="Your description" />
  <meta property="og:image"         content="https://www.your-domain.com/path/image.jpg" />
</head>
<body>

  <!-- Load Facebook SDK for JavaScript -->
  <div id="fb-root"></div>
  <script async defer crossorigin="anonymous" 
        src="https://connect.facebook.net/en_US/sdk.js#xfbml=1
             &version={graph-api-version}
             &appId={your-facebook-app-id}" 
        nonce="FOKrbAYI">
  </script>

  <!-- Your like button code -->
  <div class="fb-like" 
       data-href="https://www.your-domain.com/your-page.html" 
       data-width=""
       data-layout="standard" 
       data-action="like" 
       data-size="small"  
       data-share="true">
  </div>

</body>
</html>

HTML5-Attribute für Button „Gefällt mir“

HTML5-Attribut	Beschreibung
`data-action`	Das Verb, das auf dem Button angezeigt wird. Dies kann entweder `like` (Standard) oder `recommend` lauten.
`data-colorscheme`	Das vom Plugin verwendete Farbschema für jeden Text außerhalb des Buttons selbst. Dies kann entweder `light` (Standard) oder `dark` lauten.
`data-href`	Die URL der Webseite, die mit „Gefällt mir“ markiert wird.
`data-kid-directed-site`	Wenn deine Website oder dein Onlinedienst bzw. ein Teil deines Dienstes sich an Kinder unter 13 Jahren richtet, musst du diese Einstellung mit `true` aktivieren. Der Standardwert ist `false`.
`data-layout`	Wählt eines der verschiedenen für das Plugin verfügbaren Layouts. Hierbei kannst du zwischen `standard` (Standard), `button_count`, `button` und `box_count` wählen. Weitere Informationen dazu findest du in den FAQ.
`data-lazy`	`true` bedeutet, dass du den Lazy Loading-Mechanismus des Browsers verwenden sollst, indem du das iframe-Attribut `loading="lazy"` festlegst. Der Effekt ist, dass der Browser das Plugin nicht rendert, wenn es sich nicht in der Nähe des Ansichtsfensters befindet, sodass es möglicherweise nie gesehen wird. Die Optionen lauten `true` und `false` (Standard).
`data-ref`	Ein Label für die Verfolgung von Weiterleitungen, das weniger als 50 Zeichen umfassen muss und alphanumerische Zeichen sowie einige Interpunktionszeichen (derzeit +/=-.:_) enthalten darf. Weitere Informationen dazu findest du in den FAQ.
`data-share`	Gibt an, ob ein Button „Teilen“ neben dem Button „Gefällt mir“ angezeigt werden soll. Verwende hierfür `true` oder `false` (Standard). Das funktioniert nur mit der XFBML-Version.
`data-size`	Der Button ist in zwei Größen verfügbar: `large` und `small` (Standard).
`data-width`	Die Breite des Plugins (nur Standardlayout), die der Mindest- und der Standardbreite unterliegt. Weitere Einzelheiten dazu findest du in der Tabelle mit Layouteinstellungen.

Layouteinstellungen

Layouteinstellungen sind optional.

Layout	Standardgrößen
`standard`	Mindestbreite: 225 Pixel Standardbreite: 450 Pixel Höhe: 35 Pixel (ohne Fotos) oder 80 Pixel (mit Fotos)
`box_count`	Mindestbreite: 55 Pixel Standardbreite: 55 Pixel Höhe: 65 Pixel
`button_count`	Mindestbreite: 90 Pixel Standardbreite: 90 Pixel Höhe: 20 Pixel
`button`	Mindestbreite: 47 Pixel Standardbreite: 47 Pixel Höhe: 20 Pixel

Sprache ändern

Du kannst die Sprache des Buttons „Gefällt mir“ ändern, indem du eine lokalisierte Version des Facebook-JavaScript-SDK lädst. Ersetze en_US durch dein Gebietsschema, z. B. fr_FR für Französisch (Frankreich).

js.src = "https://connect.facebook.net/fr_FR/sdk.js#xfbml=1&version={graph-api-version} />";

Möglicherweise musst du die Breite eines sozialen Plugins anpassen, damit andere Sprachen vollständig angezeigt werden.