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 –
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.
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).
Google Plus buttons and their code
This is how a standard Google +1 button looks like.
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:
Code provided above is for standard button so no need of size attribute.
<div class="g-plusone" data-size="small"></div>
<div class="g-plusone" data-size="medium"></div>
<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.
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>
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.
It doesn’t affect website loading speed hence we prefer to use this on our site.
Let us know if you need any assistance while setting up the Google Plusone button on your site.