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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEickZY4eKxplcT02yP2McvkQnHGCv58YhDQZZ9yvNTNeiVG4Tg7-3pE7pqnSINNC3lZZ-j_U4RY0ru1EAqGASTTW0rWmFlT9PhHe9b3dax-kXJcF4WNAIpmKSpoD72hBU6UNgHSvw27uvIW/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



Written by Prayag Verma

Find me on Twitter

Email Newsletter

Like what you read here in this post ?
Get new posts delivered straight to your inbox

Post a Comment
Rounaj said...

Thanks a lot.. Just requested this gadget to you yesterday.. And Here it iz.. Really Made My Day...

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.

So many thanks 2 u....but can I add more than 1 blog in outbrain from the same a/c ?

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

Unknown said...

thanks, it seems nice but you dont have mentioned where to paste Css code for round edges?

Add the CSS before the ]]></b:skin> tag in the Edit HTML of the template

Unknown said...

You seem to be busy sir,,we are waiting for you from last 15 days on your help forum

Unknown said...

thanks for reply, i'm using ur template standarize, in which it has its own related posts widget, can i replace it with this one?

Sorry ,just forgot about the forum , replied to all the unanswered threads

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;marg…

Unknown said...

thanks mate this is a great post and your blog design is cool too..i will use it on my Blogger Tricks and Widgets blog...thanks a lot..

John said...

I have added this two days ago and still no sign of it.. Can you help me?

utsav said...

can we do this in link within

utsav said...

can we add rounded corners in linkwithin widget

Yes we can surely do this with LinkWithin , I will do a tutorial about it shortly

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

Jubel said...

My blog www-irctc.blogspot.com not shows outbrain on all the pages. May I know what was the issue??

Farhan said...

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? :)

12 said...

Nice interesting

visi site and learn hacking live tv live chat , flash games, computer tricks books and other education blog

http://minuteeng.blogspot.com/

Unknown said...

the steps are good, what is the main advantage of out brain? we can use others also or what? appreciable work. cheap ink cartridges

12 said...

nice visit
http://minuteeng.blogspot.com/
for arduino labview interfacing , microcontrollers,live tv wedgets of blogger and much more

Thank you @Prayagbhai

Awesome effect in my blog and bounce rate is also decreased by using this related post widget.

Emma said...

For some posts it can't fetch the perfect thumbnails...is there any way to fix that ?

Jayr said...

Oh thanks by the way. I'm gonna try this one.

nice one trick techmediaa.blogspot.com

Unknown said...

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?

Unknown said...

Think better to inform u..its working now after 2 days!I think it was in the process..(:
Nice blog and your name is too nice.
Following u on twitter
http://modonika.blogspot.in/
Goodluck..

Unknown said...

hi, how do we change the font size and text for the title(you may like), and the font and size for the link itself?
thanks!

Abigail said...

Hi,
Is there anyway to have the recommended posts only show up on the actual blog post and not on the main page of my blog? Thanks!

Unknown said...

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!

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

Unknown said...

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

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!

Unknown said...

.what_is_container{display:none !important;}
i dont know what the name....can you u help m??

Jamie said...

You are the best! I've been trying to figure this out on my own, with no luck!
~Jamie

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

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!

@Eduardo Vargas

Try adding the following CSS

.NA .ob_container_recs .item-container {
margin-left: 50px;
}

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

Hi, thank you, it works great, just the title still stuck on the left...

@Eduardo Vargas

For the title you will have to add the following CSS

.ob_org_header {
margin-left: 50px;
}

I think this might not necessary now as you have changed the template

Hi, great, im tweaking the new template and meanwhile using another one, so this info. its useful, thanks for your help!

Great tutorial you have here Verma. Was easy to understand by me though It may not for newbies somehow, I thank you for, you where able to make amends through your comments.

Thank you
Uche Francis
Techdavids.com

Thanks for the post. It helped me to customize for blog http://www.GamesPicnic.com
It will be great if you can edit your post to tell the place to put CSS code. I got to know the exact place from the comments.

Looks like removing the OutBrain link is not working now. May be CSS needs some changes for that.

Unknown said...

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!

Doesn't work unfortunately. Could you check it out: www.laboratoriummuzycznychfuzji.com