≡ Menu
SearchTechWord

How To Show Google +1 (plus one) Share in Thesis WordPress Theme Without Plugin

Google has released its official share button “Google +1” for social sharing. Already there is a talk that it will benefit SEO in a positive way. Someone clicking on Google +1 for a page means that the page is important and he recommends other to view the same. More the recommendation, better the SERP. Today we will focus on how we can integrate this Google plus one with our thesis theme. I will give out different CSS styles to display the button on top right or floating  left hand side of the post, similar to what you can see on this site.

Most Efficient Way To Add Google +1 (plus one) in Thesis Theme

There are different ways you can add this option to your site and it is very well explained on the official DIY Thesis Theme site. So I wont repeat that all over again here. I will simply give out the most efficient method that is recommended to integrate this button. The code to display this button consists of two parts.

  • Call to Google +1 JS API
  • Actual code to display the button.

Since javascript might take time to load, you dont want to interfere it with the loading time of your main content on the page. So we will place the JS API call right before the closing BODY tag. This will ensure that it is the last thing to load on the page.

Enough of explanation now. Lets get directly to the actual code to display the Google +1 button.

To display the Google +1 button after title of the post and before the contents start

Place the below code in you custom_functions.php

/************************************************************************************* **                                                                                                                           ** **  Function to add the Google plus one JS API at the bottom of the html page  ** **                                                                                                                           ** *************************************************************************************/ function google_plus_one_integration() { ?> <script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script> <?php } add_action('thesis_hook_after_html', 'google_plus_one_integration'); /************************************************************************************* **                                                                                                                           ** **  Function to add the Google +1 on single post before the contents of post     ** **  Size can be small (15px), medium (20px), standard (24px)                           ** **                                                                                                                           ** *************************************************************************************/ function google_plus_one_output() { if (is_single()) { ?> <div class="google-plus-one"> <g:plusone size="medium"></g:plusone> </div> <?php } } add_action('thesis_hook_before_post', 'google_plus_one_output');

Now that we have finished the coding part, the visual polishing part comes into picture. Below CSS style will dislay the button on the right hand side after the title.

Place the below code in your custom.css

.custom .google-plus-one { float:right; padding-bottom:2px;}

To display the Google +1 button floating left hand side of the post

Place the below code in you custom_functions.php

/************************************************************************************* **                                                                                                                           ** **  Function to add the Google plus one JS API at the bottom of the html page  ** **                                                                                                                           ** *************************************************************************************/ function google_plus_one_integration() { ?> <script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script> <?php } add_action('thesis_hook_after_html', 'google_plus_one_integration'); /************************************************************************************* **                                                                                                                           ** **  Function to add the Google +1 on single post before the contents of post     ** **  Size can be small (15px), medium (20px), standard (24px)                           ** **                                                                                                                           ** *************************************************************************************/ function google_plus_one_output() { if (is_single()) { ?> <div class="google-plus-one"> <g:plusone size="tall"></g:plusone> </div> <?php } } add_action('thesis_hook_before_post', 'google_plus_one_output');

Place the below code in your custom.css

/*************************************************************************************
**
**  You need to change the value of left and top parameter according to your
**  Layout
**
**************************************************************************************/
custom .google-plus-one {
clear:both;
margin:4px 4px 4px 4px;
width:60px;
height:60px;
padding-bottom:2px;
}

Now that you know the basic logic to integrate the code, you are smart enough to play around with the CSS and add spice to it as per your taste.

In my next post, I will combine twitter, facebook like and Google +1 share together. Dont forget to leave a link to your site for others to see the integration of Google +1 on your proud Thesis Theme site.

Hope you read my previous article on showing related post in Theis with thumbnails.

Comments on this entry are closed.

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close