Outbrain is a free service to integrate the related links with thumbnails into your blog posts. It is pretty easy to use, good looking and all over, it consumes a great traffic for your site. Outbrain supports WordPress, TypePad, Blogger and many more blogging platforms. You can download their widget by matching with your platform after registering with Outbrain.
Recommended reading: Insert Pagination in Custom Archive Page for WordPress Blog.
After the successful registration, you can get your widget from here. If you are using WordPress then the widget comes in a form of plugin. This plugin adds the related links with thumbnails at the very after your content. But if you want to change the position of the Outbrain related links in your WordPress blog then it is tough to adjust the position by editing the plugin.
How to place Outbrain related links at any place of WordPress blog
To solve this problem you can use javascript instead of the plugin. To get the javascript for your blog:
1. Log-in to Outbrain and click on ‘Get widgets’ > select the recommendation type > choose other options and select ‘Javascript’ from the list of platforms (by the way, javascript is a platform independent script).
2. Put your blog URL, choose the language, do agree with the Outbrain’s ‘Terms of Service and Privacy Policy’ then click on ‘Get code’.
3. It will land you to the page containing the code with the installation guide.
Grab the code and paste it into your WordPress blog template where you want to show the widget after applying the following tweaks.
The code should look like this:
<script language='JavaScript'> var OB_langJS = 'http://widgets.outbrain.com/lang_en.js'; var OBITm = '1290512064730'; var OB_raterMode = 'none';var OB_recMode = 'strip'; var OutbrainPermaLink='DROP_PERMALINK_HERE'; if ( typeof(OB_Script)!='undefined' )OutbrainStart(); else { var OB_Script = true; var str = unescape("%3Cscript src='//widgets.outbrain.com/OutbrainRater.js' type='text/javascript'%3E%3C/script%3E"); document.write(str); } </script>In the above code, replace DROP_PERMALINK_HERE by <?php echo currentPageURL(); ?>
and add the following code before the ?> sign at the end of your theme’s functions.php.
function currentPageURL() { $curpageURL = 'http'; if ($_SERVER["HTTPS"] == "on") {$curpageURL.= "s";} $curpageURL.= "://"; if ($_SERVER["SERVER_PORT"] != "80") { $curpageURL.= $_SERVER["SERVER_NAME"].":".$_SERVER["SERVER_PORT"].$_SERVER["REQUEST_URI"]; } else { $curpageURL.= $_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"]; } return $curpageURL; }[Via WebCheatSheet.com]
Note: You would think that why I did not put the WordPress permalink function to get the permalink of the post. Actually, the WP function does not work outside the loop.
That’s it! Enjoy the Outbrain related links with thumbnails at any position of your WordPress blog.
Great advice guys, I’ve just added Outbrain plugin just where I’ve wanted.
Now, just one question about adding the code in the functions.php
On Outbrain website that part isn’t mentioned so I’m a bit curious why is it important or necessary?
Cheers and tanks!
Radomir Basta: Yes, it is essential if you want to show the post link at each related post.
How do you add it to a phpfox site? What do you replace the DROP_PERMALINK_HERE with?
This was super useful, thank you! Was about to give up before I found this, the Outbrain plugin is nearly impossible to customize otherwise – and the idea of creating some kind of custom filter melted my head.
very very nice and useful information for me. thanks for sharing this