How To Add Google+ Badge in WordPress Manually

On June 2011, Google have launched a new service called Google+ (Google Plus) and now Google+ has opened the doors for business and brand pages.

By learning and practicing this tutorial you will able to add Google badge (like Facebook Fan Box) on your wordpress website without using plugin.
Then, we assume you have had Google Plus Page before. If you have not had it, please create your google+ page first, here. But before it you need to login with your google plus account.

There two kind of google plus badge. Those are page badge and profile badge. We can practice how to create the last one. By clicking a text link “Google+ Page Badge Configuration Tool” you will bring into Google+ Page Badge Configuration page.

You can see at the picture above, at the top-right is the preview and at the bottom is options for Google Plus Page Badge setting.
The options are:

Link to this Google plus page
This option ID your google plus page. In this case we fiil it with 110967630299632321627. If the ID is right in the right will be appeared “Looks Good” but, if it is wrong, it will be “Oops! This doesn’t look like a valid Google+ Page ID”.

Features
There are three options here. These are icon, small badges, and standard badge. You can see the preview by choosing one of them.

Width
It option is for the width size of the Google Plus Page Badge. In this case we fill it with 267.

Color Theme
There are two options for color theme. They are light and dark. You can choose one according to your theme color. In this case we choose the light one.

<!-- Place this tag where you want the badge to render -->
<g:plus href="https://plus.google.com/110967630299632321627" rel="publisher" width="267" height="131" theme="light"></g:plus>

It is code created with checking “HTML 5 valid syntax” options

<!-- Place this tag where you want the badge to render -->
<div class="g-plus" data-href="https://plus.google.com/110967630299632321627?rel=publisher" data-width="300" data-height="131" data-theme="light"></div>

At the bottom you can find the code of your google page badge.

II. Adding Google Plus Page Badge in Your Theme

After you get the Google Plus Page Badge code, you can add it in the theme. To do that you need open the theme code.

In the picture above, you can see there are two kinds of code. The first code the cod in the top) is the code including Javascriot SDK. You have to add it (by copy and paste) before tag. The second code is for showing your Google Plus Page Badge according to the options you have set.

In this case, you will practice adding the code in the sidebar of our Upside theme. So, let’s do the following step:

III. Other Variation Places for Google+ Page Badge

We have practiced adding Google Plus Page Badge at the sidebar of Upside theme. We also can add Google Plus Page Badge at the footer with change the last options with the following options:

Width : 312

Color Theme : dark

In this case, we will add Google Plus Page Badge at the right footer. So, add the second code in the “Get Code” section in footer.php file in line 17 combining with codes for showing custom title. Before that, you need to remove the last code (line 17 and 18).

We have added Google Plus Page Badge at the right footer. You can see the demo here
You can also add Google Plus Page Badge add index, categories, page or anywhere according your need. If you need help in adding this Google Plus Plugin, you can ask by leaving question in the comment form.

IV. Other Variations of Google Plus Plugins

Beside Google Plus Page Badge you can use and add more Google Plus social plugins, here.

You can see there are 5 social plugins providing by Google Plus that can be added into your blog and can make your blog more interesting. One of those plugins is +1 Button plugin having similar functions with Badge plugin but more simple.

If you need help in adding these plugin you can leave comment below. You can also make an request how to add the other plugins for the next tutorial.

1 Comment to “How To Add Google+ Badge in WordPress Manually”

Nice tutorial Alfan!! I always prefer to do things manually as having more plugins would slow down the site. All the steps shared by you for adding Google+ badge to WordPress are easy to follow. Thanks for this detailed tutorial with screenshots.
Regards,
Chaitanya

About Us

DynamicWp is a site that develops beatiful templates and usefull wordpress plugins by a great team from Indonesia. All of our products are free for personal or commercial use, since they're released under the terms of the GPL license. To keep up to date with new free templates from DynamicWP, subscribe to the RSS or Email feed for exclusive updates.