How to add a Google +1 (Plus) button to your website

/, Google, Social Media, Website Design/How to add a Google +1 (Plus) button to your website

How to add a Google +1 (Plus) button to your website

Google +1 (Plus) button has become an enigma for website owners. How to add this +1 button on their websites?? Well, it’s no rocket science to add this button to your website and you don’t even need to be a ninja developer! An average web programmer can do it easily. If you want to do this, just follow the simple instructions and you will be able to do.

Recently, Google Inc. released its +1 button in rivalry with the twitter’s Tweet and Facebook’s like button. With this statement, you must have understood the purpose Google +1 button serves? To make it clearer, I would like to elaborate it precisely. Basically, Google +1 button is an easy way to popularize your content. Visitors who like your content can share it on their Google+ account. Moreover, a large amount of clicks on +1 button will display your website on top in Google’ search results. In a nutshell, it is a free way to publicize your website.

Now, when you have gulped information about how Google +1 works, you would be wishing desperately on how to place it on your website, too. Just put a hold for some seconds, as I am now going to show you how you can do it and I guarantee you that by the end of this post, you will have the button on your website.

First of all, just check out this website:

Here you can generate the desired script of placing the button. Just adjust the button according to your need i.e. size, annotation, language, etc. and generate the script. You can also get the customized +Snippet from the same link. Just fill up the details and generate the script. In the script you generated from the link, you will find some comments as well.


The comments are highlighted in the above picture. Removing these comments from the script makes no difference to Google +1 Button’s functionality.

Once you are done with the script, then it’s time to call the API. As the comments on the first line of the Javascript suggests that the Google +1 API must go with the head or just before the close body tag. Therefore, you must consider it and place it properly.

Now when you are done with the API, it’s time for the visibility of the button. You can now use PHP functions and CSS float to locate the Google +1 button. To tighten it to the right of the title of the content (Where these kind of buttons are generally placed), add this command to custom.css

“.custom .my-plus-one { float:right; }”

It will help you to tighten the +1 integration visually. There are many other things left to play with. With “My-plus-one” Selector from the PHP function, additional styling and formatting needs can be catered easily. The remaining exploration is left as an exercise for users. In addition, if you are newbie to the development world and are looking for a detailed tutorial, just visit this link:

So, here is the solution to add a Google+1 button to your website. Just simply follow these steps and enjoy the easiest way to publicize your content.[/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]

By |2018-04-19T19:55:50-05:00September 26th, 2012|Categories: Facebook, Google, Social Media, Website Design|Comments Off on How to add a Google +1 (Plus) button to your website

About the Author: provides FREE computer training on products like Microsoft Windows, Microsoft Office, Microsoft Word 2013, Microsoft Excel 2013, Mozilla Firefox, Microsoft Powerpoint, Microsoft Access, Visual Basic, Internet Explorer, Java, SQL Server 2012, eBay, Windows XP and many more topics on IT training and computer learning.