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 anpassenFAQ

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:***-Metatags 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="http://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="http://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 = "//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="http://www.your-domain.com/your-page.html" 
    data-layout="standard" 
    data-action="like" 
    data-show-faces="true">
  </div>

</body>
</html>
Linkvorschau anpassen

Einstellungen

Du kannst neben den oben aufgeführten Änderungen auch Folgendes ändern:

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 Plug-in 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 Plug-in 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.

Keiner

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 Plug-ins (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

Sprache anpassen

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

js.src = "//connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v2.10"; 

Die unterstützten Ländereinstellungen findest du in der XML-Datei der Facebook-Ländereinstellungen. Möglicherweise musst du die Breite eines Sozialen Plug-ins anpassen, um ausreichend Platz für andere Sprachen zu schaffen. Weitere Informationen dazu findest du auf unserer Seite Lokalisierung und Übersetzung.