How To Add Google+ Badge in WordPress Manually
14th May 2012 | Posted by @lfannotes | 1 CommentOn 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.
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.
Step 2.
After you found it, you are ready to create the code by visiting this URL: https://developers.google.com/+/plugins/badge/
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.
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.
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.
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
<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.
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).
<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
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.
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