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

Durch einen einfachen Klick auf den Button „Gefällt mir“ werden Inhalte im Internet mit „Gefällt mir“ markiert und auf Facebook geteilt. Du kannst auch einen Button „Teilen“ neben dem Button „Gefällt mir“ anzeigen, damit Personen eine persönliche Nachricht hinzufügen und anpassen können, mit wem die Meldung geteilt wird.

Konfigurator für Button „Gefällt mir“Codebeispiel Einstellungen Sprache anpassen FAQs

Schritt-für-Schritt

1. URL oder Seite auswählen

Wähle die URL einer Webseite oder Facebook-Seite, die du mit dem Button „Gefällt mir“ verwenden möchtest.

2. Code-Konfigurator

Füge die URL in den Code-Konfigurator ein und passe die Einstellungen wie die width des Buttons „Gefällt mir“ an. Klicke auf den Button Get Code, um den Code für deinen Button „Gefällt mir“ zu erstellen.

3. HTML-Codeausschnitt kopieren und einfügen

Kopiere den Codeausschnitt und füge ihn in die HTML der Ziel-Webseite ein.

4. Gegebenenfalls Duplizierung entfernen

Falls du bereits über Code zur Aktivierung der Protokollierung von App Events verfügst, entfernst du die autoLogAppEvents=1-Anweisung aus dem eingefügten Code, um doppelte Protokollierung zu vermeiden.

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

Vollständiges Codebeispiel

Kopiere das Codebeispiel und füge es in deine Webseite ein. Passe den Wert data-href an deine Webseiten-URL an. Passe anschließend mit den og:***-Meta-Tags deine Linkvorschau an. og:url und data-href müssen dieselbe URL verwenden.

<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=v3.0"></script>

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

</body>
</html>

Linkvorschau anpassen

Einstellungen

Neben den oben aufgeführten Einstellungen sind auch folgende Änderungen möglich:

Einstellung	HTML5-Attribut	Beschreibung	Standard
`action`	`data-action`	Das Verb, das auf dem Button angezeigt wird. Dies kann entweder `like` oder `recommend` lauten.	`like`
`colorscheme`	`data-colorscheme`	Das vom Plugin verwendete Farbschema für jeden Text außerhalb des Buttons selbst. Dies kann `light` oder `dark` lauten.	`light`
`href`	`data-href`	Die absolute URL der Seite, die mit „Gefällt mir“ markiert wird.	Aktuelle URL.
`kid_directed_site`	`data-kid-directed-site`	Wenn deine Webseite oder dein Onlinedienst bzw. ein Teil deines Dienstes sich an Kinder unter 13 Jahren richtet, musst du diese Einstellung aktivieren.	`false`
`layout`	`data-layout`	Wählt eines der verschiedenen für das Plugin verfügbaren Layouts. Die Optionen lauten `standard`, `button_count`, `button` und `box_count`. Weitere Informationen dazu findest du in den FAQ.	`standard`
`ref`	`data-ref`	Ein Label für das Tracking 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.	–
`share`	`data-share`	Gibt an, ob ein Button „Teilen“ neben dem Button „Gefällt mir“ angezeigt werden soll. Das funktioniert nur mit der XFBML-Version.	`false`
`size`	`data-size`	Der Button ist in zwei Größen verfügbar: `large` und `small`.	`small`
`width`	`data-width`	Die Breite des Plugins (nur Standardlayout), die der Mindest- und der Standardbreite unterliegt. Ausführliche Informationen dazu findest du weiter unten unter Layouteinstellungen.	Siehe `standard` in Layouteinstellungen

Layouteinstellungen

Die folgenden Optionen sind verfügbar:

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

Ändern der Sprache

Du kannst die Sprache des Buttons „Gefällt mir“ ändern, indem du eine lokalisierte Version des Facebook-JavaScript-SDK lädst. Ändere den Wert von js.src beim Laden des SDK, um deine Ländereinstellung zu verwenden. Ersetze en_US durch deine Ländereinstellung, z. B. fr_FR für Französisch (Frankreich):

js.src = "https://connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v7.0";

Möglicherweise musst du die Breite eines sozialen Plugins anpassen, um ausreichend Platz für andere Sprachen zu schaffen. Weitere Informationen dazu findest du auf unserer Seite Lokalisierung und Übersetzung.