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.

Konfigurator für Button „Teilen“
Codebeispiel
Einstellungen
FAQs

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“

Layout

button_count

Größe des Buttons

small

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>(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_iframe`~~	Wenn 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`