Dec 9, 2011

Add Facebook Like Button in Your Google Custom Search Results

If you are using Google custom search engine for your website and want to add Facebook like button in every search result. See following steps to implement this. Assuming you are familiar with basic HTML ,CSS and Javascript.

facebook like google search result

1. Add jQuery in your page (if not added) in HTML head tag.

<script type="text/javascript" src="//"></script>

2. Add XFBML (if not added) in HTML head tag.

 <script src=""></script>

3. login to Google CSE and get code of your custom search engine.

In your code you will see customSearchControl object.

   var customSearchControl = new;

Add following code after this:

customSearchControl.setSearchCompleteCallback(this, showMyCustomHTML);

4. Add following script in your page

<script type="text/javascript"> 
var showMyCustomHTML =function (sc, searcher){
var url = $(this).find("").prop('href');
if (typeof FB !== 'undefined') {
 function AddFacebookLike(url,ctrl){
 ctrl.append('<div class="fblike"><fb:like href="' + url + '" layout="button_count" show_faces="false" width="65" action="like" font="segoe ui" colorscheme="light" /></div>');

Similarly, you can add twitter, Google+, linkedin buttons also.
Hope, you enjoy this. Thanks @labnol.

  • Good Job…need your help to design a other custom search engine…..

  • Geekworldnews

    Like amazing tutorial thanks for sharing.

  • Excellent job, thanks for live demo

  • Amir

    Am little confused..
    In which page I have to add coded under number 1 ,2 & then at 4..

  • Ravi Prakash

    Can we use this in google search result…

  • Abc

    hi…I implemented and it used to work fine but suddenly now the fb like button doesnt show up anymore? Can you suggest anything?

  • Dashen

    Is there an updated version of this tutorial?