Using Blogger’s Read More Links with Outbrain’s Rating Widget

As you’ve no doubt noticed I use post snippets or read more links on my blog using Blogger’s jump-links code. I’ve also recently added the Outbrain Rating Widget (ORW). Unfortunately, the two don’t play well together as the ORW is always displayed above the read more link and I’d rather it appeared below, or failing that, not at all.

While searching for a solution I found this post on the Outbrain support forum regarding this, but sadly no answer. After several unsuccessful attempts at trying to fix this, including positioning the ORW with CSS and some JavaScript, I came up with a workaround which, while not perfect, is appropriate for my situation.

The workaround is fairly simple to implement. I emphasise though that this is not a fix, but merely a workaround. Essentially, it removes the ORW from post summaries. The ORW will only appear when the full post is displayed. If you’re happy with that, this workaround might be for you. You can see the results here on my blog before deciding to make any changes yourself.

IMPORTANT! Be aware that for this method to work ALL of the posts being displayed on a page must have a read more link. If one or more don’t, the ORW will appear on all posts including those with a read more link.

1. Removing the Outbrain Ratings Widget

You first need to remove the ORW from your template. From the Blogger Dashboard choose Layout > Page Elements. Then click Edit on the ORW (the widget title is most likely Ratings and Recommendations). Before removing the widget copy the code displayed in the widget’s Content box and paste it somewhere safe.

Although I’ve taken the liberty of formatting the code to make it more readable it should look like this:

	<script language='JavaScript'>
		var OB_platformType = 1;
		var OB_demoMode = false;
		var OB_langJS = &quot;http://widgets.outbrain.com/lang_en.js&quot;;
		var OBITm = &quot;XXXXXXXXXXXXX&quot;;
	</script>
	<script language='JavaScript' src='http://widgets.outbrain.com/OutbrainRater.js'> </script>

You’ll use this code later to add the widget back to the template. I’ve assumed that the variable OBITm contains a number unique to individual blogs so it’s represented here simply as a series of Xs.

2. Editing your Blogger Template

Before making any changes to your template you should save the current one by choosing Download Full Template.

After removing the ORW, choose Edit HTML and ensure Expand Widget Template is checked. In your template locate the line of code containing data:post.hasJumpLink. This is the start of the code block that controls whether or not a read more link is displayed.

<!-- Read More Link Code -->
<b:if cond='data:post.hasJumpLink'>
	<div class='jump-link'>
		<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
	</div>
</b:if>
<!-- //Read More Link Code -->

Next, you need to add a <b:else/> condition immediately below the closing </div> on line 5 and insert the ORW code you copied earlier so that the ORW is displayed when the post doesn’t have a read more link i.e. when the full post is displayed. The revised code block should look like this. The new code is highlighted.

<!-- Read More Link Code -->
<b:if cond='data:post.hasJumpLink'>
	<div class='jump-link'>
		<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
	</div>
	<b:else/>
	<!-- Outbrain Code -->
	<script language='JavaScript'>
		var OB_platformType = 1;
		var OB_demoMode = false;
		var OB_langJS = &quot;http://widgets.outbrain.com/lang_en.js&quot;;
		var OBITm = &quot;XXXXXXXXXXXXX&quot;;
	</script>
	<script language='JavaScript' src='http://widgets.outbrain.com/OutbrainRater.js'> </script>
	<!-- //Outbrain Code -->
</b:if>
<!-- //Read More Link Code -->

Save your template and you’re done.