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“CodebeispielEinstellungenSprache anpassenFAQs

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.

Konfigurator für Button „Gefällt mir“

URL für „Gefällt mir“
Width
Layout
Handlungstyp
Größe des Buttons

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>(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "https://connect.facebook.net/en_US/sdk.js#xfbml=1";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</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" 
    data-show-faces="true">
  </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. Das 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 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.

Keine

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

show_faces

data-show-faces

Gibt an, ob Profilfotos unter dem Button angezeigt werden sollen (nur Standardlayout). Für an Kinder gerichtete Webseiten darfst du diese Option nicht aktivieren.

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=v2.11"; 

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.