November 10, 2011

Add Google+ Page Badge to Your Website




Recently we have had a article about how to enable Google+ Direct Connect for your pages by linking your Google+ page to your site. Google proclaimed you need to link your site to your Google+ page to eligible for Google+ Direct Connect which simply means searching your business or brand page via Google search. Google offered you two alternatives in linking pages, either manually or adding a badge to your site. However you have learnt how to link your site manually. And now Google has been introduced you a self-called Google+ page badge to increase user engagement and to grow more audience on Google+ platform. You might have Facebook Like Box, Twitter Follow button already on your blog. In addition as an alternative, still you may using 3rd party Google+ widget on your website. But did you implement official Google+ badge on your blog or website?

Google+ page badge links your site to your Google+ page and it has similar functionality which Facebook Like Box does. Now your fans or friends can directly add your page into their circle while they were on your site. Also the standard badge let them see who +1d your page too. However adding Google+ badge will makes your site eligible for Google+ Direct Connect. But even if you add a badge to your site, still you have to go through manual procedure to connect your site to Google+ page. So here I would be more focused in adding Google+ badge more efficiently and I will direct you to link your site manually.

Before You Go:

Make sure you have a Google+ page in order to add a page badge to your website. If you don't have a Google+ brand page yet, read How to Create a Google+ Page.


Steps:

1. Find </body> tag in your template and add this script just before </body> tag.

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

Notes:

* If you have already implemented Google +1 button on your website, you don't need to add this script.

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


2. Now you have to grab your Google+ Page URL to be used when implementing Google+ badge.

How to Find Your Google+ Page ID

i. Sign in to your Google+ profile.

ii. Navigate to Google+ Page Management page.

iii. Click on page title.


iv. Now get to your browse address bar and copy Google+ page ID as highlighted in this below page URL - i.e: https://plus.google.com/111117610607219889806/posts


3. Take a look at below badges and select one suites for you with its corresponding tag. Either you can use Google+ Badge Tag or HTML5 valid Badge Tag.

Note: If you gonna select Standard badge (either Google+ Badge tag or HTML5 valid Badge Tag), you have to add Google +1 button script to your page to render Google +1 button on the badge. Read Google +1 Button for Your Website and add Google +1 button script to your site. However if you have already using or implemented Google +1 button on your site, you don't need to do this.


Standard Badge


Google+ Badge Tag

<g:plus href="[Google+ Page URL]" width="300" height="131" theme="light"></g:plus>


HTML5 valid Badge Tag

<div class="g-plus" data-href="[Google+ Page URL]" data-width="300" data-height="131" data-theme="light"></div>


Small Badge


Google+ Badge Tag

<g:plus href="[Google+ Page URL]" width="300" height="69" theme="light"></g:plus>


HTML5 Valid Badge Tag

<div class="g-plus" data-href="[Google+ Page URL]" data-width="300" data-height="69" data-theme="light"></div>


Color Indication Information

   - Google+ Page URL

Specify your Google+ page URL here.

   - Width of Badge

Specify the width of the badge in pixels

   - Color Theme

You can change color theme of badge here. Use value light for lighter color badge or dark for dark color badge.


4. After selecting your preferred button, add corresponding code to your site where you wanna show off for your visitors.

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 BloggerElse if you wanna render it in a Blogger post or page, read How to Embed External Content on Your Blogger Posts or Pages.


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.


Bhagwad Jal Park said...

How did you manage to customize your name on the Badge? I only get "We're on" instead of the name I'd like to choose.

Mayura De Silva said...

Oops... The badge always shows your Google+ page name mate :) I didn't customize it. Did you specify your exact Google+ URL in the badge tag?

Cheers...

Seta Tutundjian said...

Mayura, you post are very helpful. can you have one post that includes the script to adding all the share widgets in one go, tweet, Google+, FB like and the share option you have. one that is similar to the share you have at the end of your posts:)
thanks a million.

Mayura De Silva said...

Hi Seta,

Thanks for your kind comments :) I have already published posts on adding Facebook like, Google +1 and Twitter buttons. And working on tutorial about AddThis Share button. You just need to align them either using a table or CSS. However if you unable to do so, you are welcome to drop your problem or question at our Support section. So I can help you on it, specifically.

Cheers...

Seta Tutundjian said...

I dropped it at the support section. I am very new to blogger. what do you mean by aligning them? do I copy the different scripts one after the other? cheers and Happy 2012:)

Mayura De Silva said...

Yeah Seta, exactly :) You can simply use them within a table. However I couldn't find your question at our support section. So please drop your question there as this comment section reserved for post related comments dear :) I hope you wouldn't mind.

Happy 2012... :)

Cheers...

Osaru-yo said...

Thank you that was very helpful ^^

Mayura De Silva said...

You are welcome mate :)

Cheers...

Cool Story Dog said...

Yey! I just implement my own badge on my new blog. Thanks for this! :)

Mayura De Silva said...

You are welcome mate :)

Cheers...

Unknown said...

Well, I figured why the badge doesn't always show your name, and that's because of the width, if it's less then 300px it will show "We're on" if it's less the 400px it will show your full name or the full name of the page, for example my name is too long to fit under 300px

Mayura De Silva said...

Ya mate :) If your page name doesn't fit to width, it'll show We're on. This badge is meant to use with Google+ pages. If you are referring to personal badge, read Add Google+ Profile Badge to Your Website.

Cheers...