July 3, 2013

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.


* 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.



   - 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 :-)




Awesome! Thanks for coming by and taking your time to read this post :) I hope you have learnt something today. Now you can share it with your friends and I'd love to hear from you too.






Related Posts and Categories


Category, , , , ,





Comments

* Make sure your comment is genuine and comply with our commenting guidelines.

* Review your email and reply notification settings to receive replies via email.


Bren Lee said...

SLAM DUNK Mayura! Woohoo! This is awesome! I love the badges although I haven't added them to my sites .....yet. Your tutorial is very user friendly which I love because some "tech" blogs use so much "techy" talk that those who are unfamiliar with CSS and coding just don't get it. I always refer my friends to your blog. :)

Harleena Singh said...

Hi Mayura,

Lovely tutorial once again :)

Yes, I did read about these badges coming up when I was travelling back home but didn't look into them further until I came across your post once again here.

You are right, it's tough to have the G+ button everywhere and that's where these follow badges will come in handy. But I was just thinking as to where I could use them, as I already have the small ones on the top and below my posts and on the sliding floating bar too. I guess anywhere else that I need, I would use these smaller versions, though I hope they are all counted as one and not different from the existing buttons on the blog?

Thanks for sharing. Have a nice week ahead :)

Corina Ramos said...

This is awesome Mayura a slam dunk just as our friend Bren said LOL! I like the one with your profile pic, I'd love to have that on my site somewhere.

As you know I'm tech challenged...is there an undo button if I mess anything up LOL? Or can you be on-call if I goof up?

Your tutorial makes it easy to set up but I'm still a little intimidated :)

Mayura De Silva said...

Hi Bren,

lol :D SLAM DUNK?! You just scored!

Awesome indeed dear :) I think follow buttons are perfect when it comes to about pages and author bios. People can follow authors instantly and it can be embedded in a small space.



Simple is the best. Isn't it? :) I'm trying to be simple and make 'em helpful to as many as possible Brenda. I'm doing my best and glad to hear they are not advanced as they seems :)


I really appreciate recommendations coming from your dear :)


Thanks for coming over and contributing your thoughts on Google+ follow buttons Brenda :)


Cheers...

Mayura De Silva said...

Hi Harleena,


Actually Google+ introduced them along with their 2nd birthday :) Can you believe it's almost 2 years? Time is flying.


Google+ badges need more room than these small buttons Harleena :) Badges would be great for sidebars and so, but not applicable for any place though.


Mmm... I think follow button is better away from share buttons Harleena. Sharing happens for each post, but following happen once, no? How about using them in author bio or at your about page? I believe they are the best places. Yet you can think of sidebar or footer too ;)


I hope the suggestions will help you figure out best place for you dear :) Let's see where they will pops up.


Thanks for coming by and letting us know about your thoughts on Google+ follow buttons Harleena :)


You have a fantabulous week too dear! :)


Cheers...

Mayura De Silva said...

Hi Corina,


I had to look up the dictionary for that dear :D lol... I'm learning all the way!


I thought of showing how follow button can be used dear :) I think it's best next to your profile pic. Author bio, eh? Or else it can be included in about page too. Well, where you would love to have it on ;)


As it's about adding the code, the undo action is removing the code you have already placed dear :) However as you are on WordPress, you can search plugin directory too.

What not?! You can always reach out if you need help there ;) Hope you will think about having one set up for your blog too.


Thanks for coming by and sharing your thoughts about having Google+ follow button Corina :)


Cheers...

Tim Bonner said...

The Google+ badges look really cool Mayura.



I've got a premium plugin on my website for each of the social networks.


I've been trying to get more followers on Facebook but sure is hard work.


Maybe it's time to go with Google+ instead!

Sue Price said...

Hi Mayura, thanks for this awesome tutorial. As you know I am not a techie person at all and I can follow this. Bren has said it well you are a great resource for this information for people like me :-)


I think most of us are on Google+ now. I do not spend as much time there as I do on Facebook but the hangout feature for example is one I use regularly.



Thanks again Mayura and have a nice weekend.

Sue

Dan Black said...

Thank you for another great how-to post. These posts really help, especially since I'm not a technical person. Social media is a powerful way to spread our message. Keep up the great work!

Adrienne said...

Another awesome tutorial from the man himself. Great job Mayura!


I do think the badges are kind of cool looking but I've decided to not add a bunch of stuff on my blog anymore. I've limited myself to that which is why my sidebar is rather bare these days. Along with all the other problems I've had recently I learned that that stuff just adds to the load time and I just don't want to worry about that anymore. But, great job explaining how this is done.


~Adrienne

Neamat Tawadrous said...

Hi Mayura,

Another awesome tutorial from you. Great job Mayura!

You really make things so easy for non-techies like myself and lots of tutorials I applied following your simple instructions and they were so easy.

Thanks Mayura for another great tutorial and keep up the great work my friend.

Be Blessed,

Neamat

Donna Merrill said...

Once Again Mayura you took something that seemed so complicated and made it easy to follow! You are AWESOME!!!
You know me, and how difficult it is for me to do all this stuff. But every time I come to your post, you make it easy as pie! Well done for people like me who have a hard time installing putting a plug in he he he.
Two years already? Holy Smokes...I cannot believe how fast time flies. Most of my friends are on Google and I just love hanging out there.

As for the badge? Hmmmm I don't know yet. I've been seeing it around but I am trying to keep my blog as plain as possible.
Actually by 2014 I want to re-do my entire blog...
Thanks so much,
Donna

Mayura De Silva said...

Hi Tim,


Yeah, Google+ follow buttons are really cool :) Their badges too. However as they don't take up much space, we can use it wherever we need 'em.


Well, you can try out Facebook advertising for getting more likes on your page :) Businesses getting creative with it. Not too costy either, However Google+ is another platform bloggers shouldn't overlook. Keep engaging mate ;)


Thanks for dropping by and sharing your thoughts Tim :)


Cheers...

Mayura De Silva said...

Hi Sue,


I get it dear :) Well, it's not a big deal if you do play with your theme and source code for few times. Eventhough there's a risk involved in, yet you can do it too ;)


Now Google+ is not a ghost city anymore, and individuals and businesses embracing the platform :) You have seen it growing over time, no? Well, Hangouts is a popular feature there since the start. Let's see what's it hold for us in future ;)


Thanks for coming over and adding your thoughts on Google+ and the tutorial Sue :)


You have a lovely weekend too dear! :)


Cheers...

Mayura De Silva said...

Hi Dan,


You're most welcome mate :) I believe it will help for those who would love to have Google+ follow button implemented too.


Hey, you don't wanna be too techy to add 'em either ;) Actually having follow buttons statistically proved increase of followers for many users too.


Thanks for dropping by and adding your thoughts on this topic Dan :)


Cheers...

Mayura De Silva said...

Hi Adrienne,


I know you are much considerate about the performance of your blog dear :) True! We gotta balance everything, else we will be keeping visitors away.


As bloggers, we never wanna find that our actions keeping readers out of our blogs, right? :)


However still we can be creative at some points too dear. You know, adding one just for the author page wouldn't hurt much. Well, here it goes whenever you need it ;)


Thanks for coming by and sharing your thoughts on adding elements vs performance Adrienne :)


Cheers...

Mayura De Silva said...

Hi Neamat,


That's the point dear :) I don't think just sharing all the code snippets make any change here. That'd be just boring, no? :)


Well, I hope anyone interested in adding Google+ follow button will find this post helpful too dear :) It will make it easy to get followed on Google+.


Thanks for stopping by and contributing your thoughts on Google+ follow buttons Neamat :)


Cheers...

Mayura De Silva said...

Hi Donna,


Ha ha... We don't need 'em to be complicated. Don't we Donna? :)


I'm totally aware of it dear :) But still you can do it too. Matter of copying and pasting at right place. Quite like solving a puzzle though :D


Ohw YES! Believe me, I thought Google was wrong or it was just a printing mistake too. But it's been two years and that makes me feel how fast time can fly by.


Alrighty Donna :) You can have it whenever you think that you need it there. It's a really good news that you are gonna give it a new look. Now that'd be a surprise for sure ;)


Thanks for coming over and contributing your thoughts on Google+ platform and follow buttons Donna :)


Cheers...

Ashutosh said...

Thanks for sharing such a technical stuff in such a simple way. It is one of those good piece of information that lets you feel that you haven't wasted your day without learning something new.


Thanks once again for the informative post.

Mayura De Silva said...

Hi Ashutosh,

You're most welcome mate :)

Ha ha... Sometimes guides can be advanced to follow. I believe simpler is better too. Glad you found it helpful :)

Thanks for coming over and sharing your thoughts about the post Ashutosh :)

Cheers...

Carolyn Nicander Mohr said...

Hi Mayura, This is very helpful information. Those who want to put a Google Plus badge on their blogs may have no idea how to do so. It's a very helpful thing to have as Google Plus is gaining importance, both as a website and as an integral part of Google Search.

Mayura De Silva said...

Hi Carolyn,

I believe it helps to figure out how to add Google+ follow buttons too dear :)

Yeah, Google+ is getting enough attention now. Buttons and badges are effective than links too. Plus, as you implied, Google+ integration contributes to build authority on Google search and we can count on other products as Google integrating social layer in their popular products.


Way to go, nah? ;)


Thanks for coming over and contributing your thoughts on the importance of having Google+ follow buttons Carolyn :)


Cheers...