Outbrain Releated Post Widget For Blogger

Related Posts are conventionally shown at the end of a article to present interested readers with a choice of reading other similar stories to the one they just read. In Blogger there are no official widget for this purpose so you will have to rely on third party services or a simple JavaScript hack. In this post we will be discussing a step-by-step guide on how to integrate the OutBrain Related posts widget into your blog. Also with a bit of CSS we will make them look better.

Let's Get Started

Go to Outbrain.com and click the Register button on the upper right.

                             

 On the Registration page ,add all the relevant details and click the Register button 

             

 Now you will be asked to confirm your email 

                               

 After confirming you will be redirected to the Dashboard , here in the left side, select the Manage Blog option and after that click the Add a Blog button 

                             

Now you will be asked information about your blog ,its platform (In this case set it to Blogger ) , its URL ,language ,etc.

                                                   

                              

Make sure to set the Install widget option to Yes and click on Get Widget. Then you will see these widgets.Its up to you that what you choose, Thumbnail or Text widget. 

                                     

Preview of Text Related Posts Widget. 

Fill out the form and click on Install. 

    

After clicking on Install button it will show a another web page asking to 
Add Widget to your blog. Make sure you choose only that blog which link you 
typed in the form. 


                           


After adding the widget in your blog and place it below "Blog Posts" (This is not compulsory but if u do that so it will be good and if u have any problem by placing the widget anywhere so do it for sure then check ) and click on save. Wait for some time and after some time it will start showing 

Some Customization

By default the widget is added to all the pages in your blog including your HomePage. In case you want the widget to only appear in the Post pages then add the following code in the Edit Template option as shown in the image below

<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<data:content />
</b:if>

</b:includable>

The widget is installed but you will have to wait around 3-4 hours for OutBrain to index your posts and then only will they start displaying in below your a blog posts. Until then you can customize your widget by going to the Outbrain Dashboard > Manage Blog > Settings ( of the blog )

Facing any problems while implementing this widget or have some nice trick to share. Feel free to ask/share them using the comment box below