How to Add Google+ Follow Button to Your Website

The Google+ social platform is not just another Google service for us anymore. Online users have been embracing this social platform and its new features, eventhough some used to hate it initially and couldn't find many advantages over the leading social networks like Facebook and Twitter. It's been 2 years since Google+ started to evolve on the web and now it's enriched with pretty interesting features. Aren't you on Google+ yet?

Social Plugins

If you are a blogger or webmaster, you can't deny the fact that you love having social plugins offered by your favorite social networks. Having social plugins has a greater potential on socializing with visitors online. With social plugins installed, it just takes few seconds for someone to change the social status from stranger to follower.

Google+ has been introducing few social plugins for websites over the last two years, starting from the nifty Google +1 button. Google+ profile and page badges are among popular social plugins, as they let visitors connect with you or your business instantly on Google+.

Google+ Follow Button

Eventhough Google+ badges are popular everywhere, yet its not flexible enough to be used in all places on a web page. You can think of using it on your sidebar, in the middle of a web page or in a reserved space. But you can't use it for a small space when you need to. That's where Google+ follow button comes in handy. Yeah, Google+ follow button is the new addition of Google+'s social plugins family. Need an example?

Got it? If you are familiar with Google+ badges or at least Twitter follow button, you won't find something new with Google+ follow button. Google+ follow button comes in various sizes and annotation options like Google +1 button did, and users can follow a Google+ profile or page right away just by hovering over the button. Would you like to have one implemented on your blog or website? Can think of a place it might fit in? You are few steps away.

Steps:

1. Search for </body> tag in your page's HTML code and add following script just before the </body> tag.

Notes:

* If you are a Blogger user and don't know how to edit your template, read How to Edit Your Blogger Template.

* If you already have Google +1 button or another Google+ plugin on your blog or website, implementing this script is not compulsory.

<script type="text/javascript">
window.___gcfg = {lang: 'en'};
(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>

Color Indication Information:

   - Language Code

The Default language associated with Google+ follow button is English (US). If you prefer to use another available language, find language code from Language Codes page and replace respective value here.

2. Now select your preferred button style from below and place corresponding code snippet where you wanna render your button. You can either use Standard or HTML5 syntax.

Note: If you are a Blogger user and wanna add it as an element, you can add your button code snippet via HTML/JavaScript element. Read How to Add an External Widget or Codes to Blogger. Else if you wanna render it in a Blogger post or page, read How to Embed External Content on Your Blogger Posts or Pages.

Small

Standard Syntax

<g:follow annotation="none" height="15" href="//plus.google.com/[Google+ ID]"></g:follow>

HTML5 Valid Syntax

<div class="g-follow" data-annotation="none" data-height="15" data-href="//plus.google.com/[Google+ ID]"></div>

Medium

Standard Syntax

<g:follow annotation="none" height="20" href="//plus.google.com/[Google+ ID]"></g:follow>

HTML5 Valid Syntax

<div class="g-follow" data-annotation="none" data-height="20" data-href="//plus.google.com/[Google+ ID]"></div>

Large

Standard Syntax

<g:follow annotation="none" height="24" href="//plus.google.com/[Google+ ID]"></g:follow>

HTML5 Valid Syntax

<div class="g-follow" data-annotation="none" data-height="24" data-href="//plus.google.com/[Google+ ID]"></div>

Color Indication Information:

   - Google+ Profile / Page ID

Specify the Google+ ID of your profile or page

Notes:

* If you don't know your Google+ profile ID, you can grab it by follow the steps below.

How to Find Your Google+ Profile ID

i. Navigate to your Google+ profile.

ii. Get your profile ID from the URL displayed in your web browser address bar. Your profile ID is a number similar to the highlighted value in below example.

https://plus.google.com/110895337863776656534

* If you don't know your Google+ page ID, you can find it as below.

How to Find Your Google+ Page ID

i. Sign in to your Google+ profile.

ii. Navigate to Google+ Page Management page.

iii. Click on the page title.

iv. Now get to your web browser address bar and copy Google+ page ID from the URL which is similar to the highlighted value in below example.

https://plus.google.com/111117610607219889806/posts

   - Button Annotation

You can associate the preferred annotation for your Google+ follow button. You have 3 choices - None, Bubble (Horizontal) and Bubble (Vertical).

None



Annotation Value: none


Bubble (Horizontal)

Annotation Value: bubble


Bubble (Vertical)

Annotation Value: vertical-bubble

Enjoy :-)