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.


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

Leave a Reply

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