Button „Teilen“

Mit dem Button „Teilen“ können Personen eine personalisierte Nachricht zu Links hinzufügen, bevor sie diese in ihrer Chronik, in Gruppen oder mit ihren Freunden über eine Facebook-Nachricht teilen.

Wenn es sich bei deiner App um eine iOS- oder Android-native App handelt, empfehlen wir, stattdessen den nativen Dialog „Teilen“ für iOS oder Dialog „Teilen“ für Android zu verwenden.

Wenn deine Webseite keinen Button zum Öffnen des Dialogs „Teilen“ benötigt oder der von Facebook bereitgestellte Button nicht in das Design deiner Webseite passt, gibt es noch den Dialog „Teilen“ für das Web zum Teilen von Links. Beachte, dass du Facebook Login nicht implementieren oder zusätzliche Berechtigungen über App Review anfordern musst, um dieses Plugin verwenden zu können.

Schritt-für-Schritt

1. URL oder Seite auswählen

Wähle die URL einer Webseite oder Facebook-Seite, die du teilen möchtest.

2. Code-Konfigurator

Füge die URL in den Code-Konfigurator ein und passe das layout des Buttons „Teilen“ an. Klicke auf den Button Get Code, um den Code für deinen Button „Teilen“ 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 „Teilen“

URL für „Teilen“
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&version=v3.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

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

</body>
</html>

Einstellungen

Einstellung HTML5-Attribut Beschreibung Standard

href

data-href

Die absolute URL der Seite, die geteilt wird.

XFBML- und HTML5-Versionen verwenden standardmäßig die aktuelle URL.

lazy

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).

false

layout

data-layout

Wählt eines der verschiedenen für das Plugin verfügbaren Layouts. Hierbei kannst du zwischen box_count, button_count und button wählen.

icon_link

mobile_iframe

Veraltet

data-mobile_iframeWenn dies auf true gesetzt ist, öffnet der Button „Teilen“ auf Mobilgeräten den Dialog „Teilen“ in einem iframe über deiner Webseite (anstelle eines Pop-ups). Diese Option ist nur für Mobilversionen und nicht für Desktop verfügbar. Weitere Informationen dazu findest du unter Dialog „Teilen“ für das mobile Web

.

false

size

data-size

Der Button ist in zwei Größen verfügbar: large und small.

small