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.

See Live Demo

Now, let’s begin to create it by following steps below.

I. Creating Google Page Code

Step 1.
To create google badge, first, you have to find your google page id, in this case we use Google Developer Page.

How to Add Google+ Badge WordPress

Step 2.
After you found it, you are ready to create the code by visiting this URL: https://developers.google.com/+/plugins/badge/

How to Add Google+ Badge WordPress

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.

Step 3.
Let’s begin to make your Google Plus Page Badge.
In this case we will add Google Plus Page Badge at the sidebar of our free wordpress theme: Upside Version 1.1.

How to Add Google+ Badge WordPress

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.

By checking HTML 5 valid syntax the format code of your google page badge is HTML 5.

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

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

How to Add Google+ Badge WordPress

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:

Step 1.
Open file header.php of Upside theme.

How to Add Google+ Badge WordPress

This file contains <head>…</head> tag.

Step 2.
Copy the first code before </head> tag (after line 57).

<!-- Place this tag in the <head> of your document -->
<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>

Step 3.
Open file sidebar.php of Upside theme.

Step 4.
Copy the first code after

tag (after line 76). You also can add code needed to make your Google Plus Page Badge more appropriate with your theme. In this case we add code to show title like the other widgets at the sidebar:
<h2 class="sidehead">Google Plus Fan Page</h2>
<!-- 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="267" data-height="131" data-theme="light"></div>

Now, let’s see the result.

How to Add Google+ Badge WordPress

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

How to Add Google+ Badge WordPress

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

<h2 class="sidehead">Google Plus Fan Page</h2>
<!-- 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="312" data-height="131" data-theme="dark"></div>

Let’s see the result

How to Add Google+ Badge WordPress

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.

How to Add Google+ Badge WordPress

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.

See Live Demo

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

Add Comments (+)

  1. Chaitanya says:

    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

Leave a Reply

 

Amazingly Beautiful WordPress Themes