Manuelles Einbinden der Topic Box

Um die followthis Topic Box in eine beliebige Webseite einzubinden, muss die entspr. HTML-Datei manuell angepasst werden.

1. Einbinden des Widgets im <head>-Bereich

Der folgende Code wird im <head>-Bereich der Webseite eingefügt. An welcher Stelle dies erfolgt, ist nicht von Bedeutung.

Zuerst wird das Skript eingebunden, das den Widget-Code liefert:

<script src="https://media.followthis.de/static/js/ft.topicbox.min.js"></script>

Um die Domain zu verifizieren, muss der Verifizierungsschlüssel (domain verifier) eingetragen werden:

<meta property="ft:domain_verifier" content="c4e8d074b2914a7db489632c7a56c945">

Der hier dargestellte Wert ist ein Beispiel. Du musst hier selbstverständlich Deinen Verifizierungsschlüssel eintragen.

Die Beschreibung eines Artikels, also die Schnittstelle zwischen followthis und Deinem Blog, erfolgt in Form von Metadaten im Open Graph Protocol, wie im Folgenden beispielhaft dargestellt:

<meta property="og:type" content="article">
<meta property="og:title" content="Hello world!">
<meta property="og:description" content="Welcome to WordPress. This is your first post.">
<meta property="og:image" content="http://goo.gl/RMRR9B">
<meta property="og:article:published_time" content="2013-10-21 13:46:31">
<meta property="og:article:tag" content="foo">
<meta property="og:article:tag" content="hello">

Obligatorisch ist hierbei nur der Eintrag og:article:tag. Die Angabe von Tags ist erforderlich, um die Topic Box anzuzeigen. Die anderen Angaben dienen zur eindeutigen Übergabe des gewünschten Inhalts. Wird z.B. og:image nicht angegeben, wird automatisch das erste Bild auf der Seite verwendet.

2. Einbinden der Topic Box im <body>-Bereich

Das Einbinden der Topic Box erfolgt mit dem folgenden Code-Block im <body>-Bereich der HTML-Seite. An welcher Stelle dies erfolgt, entscheidest Du.

<div id="ft-widget"></div>

Die Breite der Topic Box passt sich automatisch der Breite eines übergeordneten <div>-Containers an.


Beispiel

Hier ein vollständiges, minimales Beispiel:

<html lang="en">
  <head>
    <title>followthis topicbox integration example</title>

    <meta property="og:article:tag" content="fashion">
    <meta property="og:article:tag" content="mode">
    <meta property="og:article:tag" content="Paris">
    <script src="https://media.followthis.de/static/js/ft.topicbox.min.js"></script>
 </head>
  <body>
    <h1>This is sample content</h1>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy 
    eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam 
    voluptua. At vero eos et accusam et justo duo dolores et ea rebum. 
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor 
    sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, 
    sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. 
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit 
    amet.</p>

    <div id="ft-widget"></div>
  </body>
</html>

Hinweis: Das Testen der Seite sollte von einer öffentlich erreichbaren Adresse durchgeführt werden. Ein Test mit localhost funktioniert nicht.

Hinweis:

Als Publisher musst Du erst freigeschaltet werden. Bitte gib uns dafür einige Tage Zeit.

Top