Related Post Widget for Blogger using OutBrain

You Might LikeRelated 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.



Lets get started: 

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

outbrain homepage


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

outbrain registration page


3.
Now you will be asked to confirm your email 

outbrain confirmation page


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

outbrain add a blog


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

outbrain select a platform

Note: Make sure to set the Install widget option to Yes


6.
After clicking the Continue button you will be presented with a option to Add the widget to your blog. Select your blog and click the Add Widget button 
Pro Tip: 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>

add widget to blogger


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

outbrain settings page

Enhancements 
The widget you added gives such a formal and dull look which will in no way interest readers to click on these links. Lets Stylify it a bit using some CSS ! 

Rounded Edges
The square shapes are a bit too standard , lets round things up

#ob_strip_container_rel_0_stripBox .strip-rec-link-img , #ob_strip_container_rel_0_stripBox .strip-img {border-radius: 100px !important;}


Removing attribution
Under each widget a link is added to the Outbrain service. To remove it add

.what_is_container{display:none !important;}

Changing Title Font 

The “You might Like” font is a standard font , you can easily change it to another font by

.strip-like {
font-family: FONT-OF-YOUR-CHOICE ;
font-weight: normal !important;
}


Adding background
 As you might observe that I have added a background to this blogs related post widget , you can do the same with the following

#outbrain_widget_0 {
background: url('http://2.bp.blogspot.com/-QWfcjpDDT6U/T9JHe-j4UEI/AAAAAAAAFTo/YHOE2Rojgmo/s1600/pattern.png');
}

Note: You might have to adjust the background a bit using padding and margin CSS property to make sure that it aligns well .

Over to you


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

48 Replies to “Related Post Widget for Blogger using OutBrain”

  1. I always loved this on your blog, and also wondered how can I make one for my blog, but couldn't manage to understand even after checking the page source.

    But thank you so much for sharing it, will add it soon on my blog and let you know if I face any issues with this.

    1. Yes you can add more than one blog in the same account , for doing that go to the Manage Blogs option and there you will see a Add Blog button. After that the procedure is similar to Step 5 onward

    1. Yes you can surely replace it with this one

      Firstly you will have to remove the HTML and CSS related to it from the template

      Remove this piece of HTML

      <b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='stay-connected'>
      <h8>You Might Also Like</h8>
      <script type='text/javascript'>
      var defaultnoimage=&quot;https://lh3.googleusercontent.com/_FQCCkMjyvSA/TWoCU9DxctI/AAAAAAAAAHk/ZW-sgbYYWBs/thumb_missing.jpg&quot;;
      var maxresults=4;
      </script>
      <script type='text/javascript'> //<![CDATA[
      var relatedTitles = new Array();
      var relatedTitlesNum = 0;



      <script type='text/javascript'>
      removeRelatedDuplicates_thumbs();
      printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
      </script>

      </div>
      </b:if>

      and also The following CSS

      ul#related-posts{font-family:Helvetica,Arial,sans-serif !important;font-size:11px !important;list-style:none !important;margin:20px 0 !important;padding:0 !important;text-transform:none !important;}
      ul#related-posts li{float:left !important;height:auto !important;margin:0 15px !important;padding:2px 1px 4px !important;}
      *html ul#related-posts li{margin:0 13px !important;}
      ul#related-posts li a{-moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.15) !important;border:2px solid #FFFFFF !important;display:block !important;height:100px !important;position:relative !important;width:100px !important;}
      ul#related-posts li a{color:#474C51 !important;text-decoration:none !important;text-shadow:0 1px 0 #FFFFFF !important;}
      ul#related-posts li .overlay{height:100px !important;line-height:14px !important;padding:6px 0 0 6px !important;position:absolute !important;width:100px !important;z-index:10 !important;}
      ul#related-posts li a:hover .overlay{background:#fff !important;display:block !important;opacity:0.9 !important;}
      ul#related-posts li img{bottom:0 !important;padding:0px !important;}
      ul#related-posts li a:hover{-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25) !important;}

      And then you can follow this tutorial

    1. I suggest you ping them on Twitter ones , they are fairly active there and they will be glad to help you out

      In case the problem persists feel free to share it and I will see what I can do

    1. LinkWithin is fast and effective, anxiously waiting for your tutorial on LinkWithin rounded corners, or if you don't mind, you can explain it here? 🙂

  2. its not working..I applied first out brain code for 1 day.. I applied your trick too..But thumbnails are not appearing! what to do. the settings are same as u have told. Can u guess whats wrong?

  3. Hi there!

    I am moving my blogger blog over to Squarespace, do you know if the code will be the same as the code for Blogger to make the buttons round? Do you know where I could insert this code> Thanks so much for the help!

    1. Hi Roxy
      You will have to select Squarespace rather than Blogger in Step 5 above
      Also this thread might be helpful http://answers.squarespace.com/questions/5009/has-anyone-successfully-integrated-outbrain-with-squarespace?page=1#5270 , as some people suggest to use the generic JS option for SquareSpace v6

      For making edges round , these are steps on how to add custom CSS in Squarespace http://help.squarespace.com/customer/portal/articles/438114-making-style-changes
      CSS should remain same , if you have problems , then feel free to ask

      Also had a question , Any specific reasons/features for switching from Blogger to SquareSpace ? Trying to find why people leave Blogger

    2. Thanks so much for getting back to me. Will pop on over and check out those forums now. My main reason for making the switch is to accommodate my new online store. I've loved blogger, but it is a little limiting when it comes to e-commerce and Squarespace is amazing with what you can do with e-ccomerce 🙂

  4. Hi, I did install the widget but frankly NO posts are related to each other. The whole point (for me at least) would be to have a Related Posts widget. Anyone would have a suggestion? Thanks in advance!

  5. what if I do not want to add this widget to several blog posts, including the homepage ..?
    For example, there are 3 or 5 pages in my blog that I did not add this widget ..
    Thank's

  6. Hi friend, Great Post, recently i change my blogger template, and the outbrain widget now its sticked on the left side of the blog, do you know how can i give it more margin on the left or place it at the center of each post?, Thank you very much for any advice!

  7. Yes, its OK now, thank you very much, only the outbrain title is still stuck to the left, but the rest have margin now, perhaps you know how to give margin to the title too?, sorry to bother, i appreciate very much your help :).

  8. Hi,
    Where to paste the code to remove the attribution?
    This one : .what_is_container{display:none !important;}

    And is it possible to change the title?
    Instead of having "you might like" to write "more ideas ?"

    Thank you!

Leave a Reply

Your email address will not be published. Required fields are marked *