How to Add Google Plus Button to Website

You must know how important it is to add social sharing buttons on your site, it brings traffic to your website and are good for SEO too. If your content has become viral on social networking sites such as Google, Facebook, twitter etc. then, there are strong chances that the content will quickly gain a good SERPs. That’s the reason from last couple of days, I have been writing how to manually add social media (G plus, Facebook, twitter) buttons to your website.

Here are the links of few articles, I wrote –

Add twitter button to website
how to put Facebook like button on website

Today, we are gonna cover how to add a Google plus button to your website. You must add a Google +1 button on every webpage of your site as it is surely gonna help you a bit on Google search, if you write quality content and have a good fan following on Google plus. The more +1 a webpage gains, the more chances of that webpage in getting good SERPs.

Google plus icon 300x300 How to Add Google Plus Button to Website

What I need to do to add the button to my Website?

All you have to do is, just follow the below two simple steps:

Step 1: Select the button you like, Copy the corresponding  button code and paste it to the your website’s theme template (at the place where you want the button to be displayed).

Step 2: I have provided two JavaScript after the button code, choose one of them.

Google Plus buttons and their code

This is how a standard Google +1 button looks like.

gplus button How to Add Google Plus Button to Website

Here is the code:

<!-- Place this tag where you want the +1 button to render. -->
<div class="g-plusone"></div>

The above button size is standard and Annotation is bubble. There are few other sizes (small, medium, tall) and Annotations (inline, none) available at the Google +1 developers page.

Basically for the different sizes an extra data-size attribute needs to be added:

Standard button:

Code provided above is for standard button so no need of size attribute.

Small button:

<div class="g-plusone" data-size="small"></div>

Medium button:

<div class="g-plusone" data-size="medium"></div>

Tall Button:

<div class="g-plusone" data-size="tall"></div>

Same way for annotations data-annotation attribute needs to be defined

This is how a small size inline annotation button look like.

gplus button new How to Add Google Plus Button to Website

And, here is the code for above button:

<!-- Place this tag where you want the +1 button to render. -->
<div class="g-plusone" data-size="small" data-annotation="inline" data-width="300"></div>

JavaScript

Synchronous script 

Synchronous script slow down your website a bit. We do not recommend using synchronous script on your blog/ website until unless you have a strong reason to do so.

<!-- Place this tag in your head or just before your close body tag. -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

Asynchronous script

It doesn’t affect website loading speed hence we prefer to use this on our site.

<!-- Place this tag after the last +1 button tag. -->
<script type="text/javascript">
 (function() {
 var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
 po.src = 'https://apis.google.com/js/plusone.js';
 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
 })();
</script>

Let us know if you need any assistance while setting up the Google Plusone button on your site.

0 comments… add one

Leave a Comment