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

Wenn eine Person, die deine Webseite besucht, auf den Button „Gefällt mir“ klickt, wird ein App Event ausgelöst, um diese „Gefällt mir“-Markierung auf Facebook zu protokollieren.

Angepassten Button „Gefällt mir“ abrufen

Rufen Sie 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.

  1. Gib die URL deiner Webseite an, in die du den Button „Gefällt mir“ einfügst.
  2. Dein angepasster Button „Gefällt mir“
  3. Vorschau deines Buttons anzeigen
  4. 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
Handlungstyp
Größe des Buttons

Hinweis: Falls du bereits App Events protokollierst, entfernst du die autoLogAppEvents=1-Anweisung aus dem Button-Code, um doppelte Protokollierung zu vermeiden.

Du kannst deine Link-Vorschau mit Open Graph-Meta-Tags anpassen. Das og:url-Tag und das data-ref-Attribut sollte 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}
             &autoLogAppEvents=1" 
        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 Webseite 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-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.

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.