Zitat-Plugin

Mit dem Zitat-Plugin können Nutzer Text auf deiner Seite auswählen und diesen ihrem geteilten Beitrag hinzufügen, um eine ausdrucksstärkere Geschichte zu erzählen. Beachte, dass du Facebook Login nicht implementieren oder zusätzliche Berechtigungen über App Review anfordern musst, um dieses Plugin verwenden zu können.

Teilen von Zitaten für mobiles Web

Wenn du eine Webseite für das mobile Web entwickelst oder wenn der bereitgestellte Button nicht zum Design deiner Webseite passt, unterstützt auch der Dialog „Teilen“ für das Web das Hinzufügen eines Zitats zu einem geteilten Link.

Teilen von Zitaten für iOS und Android

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

Probiere das Plugin ausCodebeispielEinstellungen

Probiere das Plugin aus

Wähle einen Teil dieses Satzes aus, um das Plugin in Aktion zu sehen.

Codebeispiel

Passe den Wert data-href an deine Webseiten-URL an. Stelle sicher, dass deine Open Graph-Metatags aktuell sind und data-href für das Plugin der og:url-Eigenschaft entspricht.

<html>
<head>
  <title>Your Website Title</title>
  <!-- Comment #1: OG Tags -->
  <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>

  <!-- Comment #2: SDK -->
  <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=v2.6";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</script>

  <!-- Comment #3: Content -->
  <h1>Your Headline</h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget tristique nibh, 
    vel consequat purus. Praesent molestie, turpis ut ultrices commodo, felis arcu cursus enim, 
    vel porttitor ante quam vel lacus. Quisque at laoreet sapien. Proin nec purus dolor. Integer 
    pharetra nec ligula a condimentum. Fusce sem orci, porta ut felis id, commodo imperdiet risus. 
  </p>

  <!-- Comment #4: Plugin Code -->
  <div class="fb-quote"></div>

</body>
</html>
Probiere es aus!

Code-Kommentare

  1. OG Tags: Du kannst deine Link-Vorschauen mit Open Graph-Tags anpassen.
  2. SDK: Lade das Facebook-SDK für JavaScript.
  3. Content: Deine Seiteninhalte.
  4. Plugin Code: Dein Zitat-Plugin-Code aus dem Konfigurator. Du kannst diesen an einem beliebigen Ort im Dokument platzieren und es wird nur angezeigt, wenn du Text in diesem Container hervorhebst. In diesem Beispiel wird es nur angezeigt, wenn du Text im Haupttext hervorhebst.

Einstellungen

Du kannst die folgenden Einstellungen ändern:

Einstellung HTML5-Attribut Beschreibung Standard

href

data-href

Die absolute URL der Seite, die zitiert wird.

Aktuelle URL

layout

data-layout

  • quote: Bei der Textauswahl wird ein Button mit dem blauen Facebook-Symbol und dem Text „Zitat teilen“ als Overlay angezeigt. Wenn ein Nutzer damit interagiert, wird der Dialog „Teilen“ mit dem hervorgehobenen Text als Zitat angezeigt.
  • button: Verhält sich wie die Option „Zitat“, aber zeigt nur ein blaues Facebook-Symbol im Button an.

quote

Zitierbare Bereiche

Einige Bereiche deiner Webseite sollten möglicherweise nicht zitierbar sein, z. B. Menüs, Seitenleisten und Fußzeilen. Du kannst die zitierbaren Bereiche deiner Seite mit

  • HTML-<article>-Elementen oder
  • einem beliebigen Element mit dem Klassennamen fb-quotable festlegen.

Du kannst die beiden Methoden beliebig kombinieren, um zitierbare Bereiche festzulegen.

Wenn deine Seite weder <article> noch class="fb-quotable" enthält, ist sie komplett zitierbar.

Ändern der Sprache

Du kannst die Sprache des Zitat-Plugins ä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&amp;version=v2.6";

Die unterstützten Ländereinstellungen findest du in der XML-Datei der Facebook-Ländereinstellungen. 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.