How to Create and Add Google Plus Badge to Your Blog or Website?

Posted by on Mar 1, 2014 in Blogging Tips, Website ·

Google Plus is one of the most important social networking sites available out there. From the beginning only it grew up very fast. Many websites have their business pages and profiles there. Adding a Google Plus badge on website or blog helps significantly in growing the number of followers. More followers then help in SEO and the overall reputation of you or your brand.

In this post I will be explaining how to create and add Google plus badge on your website or blog.

What is Google Plus badge?

Just like the Facebook Like Box, it is a snippet for websites. It allows users to engage with you directly on your website. They can add your page or profile to their circles or follow you. This doesn’t require the users to open your page or profile manually. They can simply click on the follow button on your website itself.

Google plus badge on your website or blog

Adding Google Plus badge to your website

Generating the badge code

Let’s begin with generating the code for your first ever G+ badge.

Step 1 : Go to Google+ Badge page.

Step 2 : Enter the URL of your G+ page, profile or website according to your choice.

Step 3 : Select the features, layout, badge width, theme etc. and let the preview reload.

Google Plus badge generator

Step 4 : Now copy the snippet code shown below the badge preview.

Google Plus badge preview and code

The code will be like shown below. Copy it.

<!-- Place this tag where you want the widget to render. -->
<div class="g-page" data-width="301" data-href="https://plus.google.com/108328036055990268862" data-rel="publisher"></div>

<!-- Place this tag after the last widget 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/platform.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>

Adding the code to the website

Look at the code above carefully. It is divided into two parts.

Step 1 : Copy the code below the line <!-- Place this tag after the last widget tag. --> before closing the body tag (</body>).

• For WordPress users : Edit your theme’s footer.php file and find this line </body>. Add the piece of code exactly below this line.

Step 2 : Then copy the code below the line <!-- Place this tag where you want the widget to render. --> wherever you want to display the code.

• For WordPress users : Go to WP-admin -> Appearance -> Widgets. Drag a Text widget to the desired sidebar and paste this piece of code in it.

Done! Now reload your website to see the Google plus badge on it.

Advanced option and resources :

https://developers.google.com/+/web/snippet/

https://developers.google.com/+/web/badge/

Last updated on : March 2, 2014.

2 Comments on “How to Create and Add Google Plus Badge to Your Blog or Website?”

Leave a Reply