Add A Related Posts Widget With Google CSE To Retain And Engage Visitors

It has been seen that adding a related posts widget after your page or post content helps retain visitors longer and keeps them engaged by offering them additional content they may be interested in. While there are many wordpress plugins which offer this functionality they are often not relevant, clog the wordpress database or use arbitrary logic to calculate related posts. Wouldn’t it be wonderful if you could harness the power of Google Search to give your blog visitors related content that is relevant, ranked and from your own blog? Read on.

Google CSE provides functionality to automatically execute and present search results based on particular keywords. This means that you can pre-populate such a search box with a related keyword and automatically present the results after the post content. Bingo, you have a related posts plugin. Here’s the basic code which you’ll need to place in your blog template.

<div id="cse" style="width: 100%;">Loading</div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
 google.load('search', '1', {language : 'en'});
 google.setOnLoadCallback(function(){
 var customSearchControl = new google.search.CustomSearchControl('xxxxxxxxxxxxxxxxxxxxx:xxxxxxxxxxx');
 customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
 customSearchControl.draw('cse');
customSearchControl.execute('keywords go here');
}, true);
</script>
<link rel="stylesheet" href="http://www.google.com/cse/style/look/default.css" type="text/css" />

The key command in the code that will perform the search when the search form loads is the line containing customSearchControl.execute. Depending on you preferences you may want to prepopulate this with the post title. However the ideal keywords will be the post tags or even better — the post category. It is the post category which is the subject, the topic of the post the visitor reads. You can be quite certain that if the visitor has read the post to the end, they will be interested in other posts in the same category. Thus here’s the final code you will use in the wordpress template —

<div id="cse" style="width: 100%;">Loading</div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
 google.load('search', '1', {language : 'en'});
 google.setOnLoadCallback(function(){
 var customSearchControl = new google.search.CustomSearchControl('xxxxxxxxxxxxxxxxxxxxx:xxxxxxxxxxx');
 customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
 customSearchControl.draw('cse');
 customSearchControl.execute('<?php foreach((get_the_category()) as $category) {echo $category->cat_name . " "; } ?>');
}, true);
</script>
<link rel="stylesheet" href="http://www.google.com/cse/style/look/default.css" type="text/css" />

Given that you’ve taken care to implement the html part and html and php part as php in your wordpress template, this should populate and automatically execute a search using the post categories as the keywords. You can experiment and populate the search box with the first few post tags or any other parameter you find useful (like getting the search keywords from the referring search engine) this will open a wide window to some of the most relevant content on your site extending the reach of the visitors to some of the oldest posts etc.

If you are monetizing the Google CSE unit with AdSense, it is against the policy/ terms and conditions of Google AdSense to prepopulate such search boxes with keywords.

One special thing about such auto searches is that Google does not show any AdSense ads within these results (until the submit button is triggered by the visitor). Thus while it provides safety from possible AdSense exploits, do note that it is against AdSense terms and conditions to prepopulate Google search boxes with keywords. Take case that the CSE unit employed in this widget is dissociated from AdSense monetization. What do you have to say about this related posts widget powered by Google custom search?

6 Comments

  1. Wow this would be great if it worked. I have blog with 50,000 posts and I can’t use any of the wordpress related posts plugin because of the database load they carry. Similar Posts especially was a disaster.

    is your “Suggested Reading” generated from this? Can you give a template example, cause i can’t figure it out.

    Thanks.

    Reply
  2. Hey,

    What do you mean? I’m not seeing anything?

    Thanks.

    Reply
  3. I want to do it on blogger…what do I need to change in place of {{{cat_name . ” “; } ?>}}}

    I want to use my post title to populate

    Reply
  4. Hi, thanks for the code, it’s amazing. However, i need to get only the related keyword, and link it to the wp search result page (core), how to link them?

    Please help,
    Thanks

    Andhie.

    Reply
  5. Hallo master,
    can you help me, how to show search result by title content automatically?
    It like show in http://hargasmartphone.id
    Please, open one of posts to see the result.
    thanks

    Reply

Comment on Add A Related Posts Widget With Google CSE To Retain And Engage Visitors

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