Manual integration of the topic box

To integrate the followthis topic box into an arbitrary web page, you have to modify the web page manually.

1. Integration of the widget into the <head> section

The following code has to be integrated into the <head> section of your web page. It doesn't matter where you paste it on your page.

First you have to add the script which provides the widget code:

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

To verify your domain, you have to add your domain verification key:

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

The shown value is an example. Of course you have to add your own key.

The description of your article, means the interface between followthis and your blog, has to be provided as Open Graph Protocol meta data, as shown in the following example:

<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">

Only the meta data og:article:tag is mandatory. This tag is requires to show the topic box. The other meta data are used for an explicit delivery of your content. E.g., if you don't provide og:image then the first image on your page will be used automatically.

2. Integration of the topic box into the <body> section

The following code integrates the topic box into the <body> section of your web page. You may decide freely where to add it.

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

The width of the topic box adjusts automatically to the widths of the surrounding <div> container.


Example

Here a minimal, but complete example:

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

Note: You have to test your page with a publicly accessible IP address. Testing with localhost doesn't work.

Note:

Keep in mind that we have to activate your publisher account, first. Please allow some days to do it.

Top