How To Add A Badge To Your Wordpress Blog

Maybe, You have read my tutorial which talks about How to add google+ widget for blogger/blogspot. But, I feel i have not been completed if i just post that tutorial for blogger only. Bloggers in the world don't only use blogger/blogspot as their platform. Some of them also use wordpress or other blogging tools. Even, Maybe some of them also build their blog themselves, without any tools (In this article i called it as "Independent website").

Therefore, Here i will give tutorial for wordpress blog and independent website about how to add google+ badge to site interface. Here I only talk about google+ badge. This because this tutorial is more complicated than previous tutorial (Tutorial for Blogger/blogspot). For tutorial about other google+ platforms, i will post it later. Than you do not understand, it's better I discuss them one by one, right?

Before, I must explain what is google+ badge ?.. Google+ badge is a Goggle+ platform for website that allows to connect your profile or website page in Google+ to your website. So, There are two kinds of google+ badge, those are badge for personal profile and badge for Google+ page. Installed Profile badge on your website/blog allows you to added to cirlces by your website visitors. While, Installed Google+ page badge allows your Google+ page being followed by your website/Blog visitors.
That's cool stuff, right?

Well, To add Google+ badge, Let's follow the tutorial below..

-How To Install Google+ Badges For WordPress Site-

1. Log in to your WordPress Blog Dashboard.

2. Go to Plugins > Add New.

download google+ badge plugin for wordpress

3. In search box, Type "Google+ badge", then Click "Search Plugins".

4. There are some result for your search. Choose one which most suitable with your search (usually the first order of results).

5. Click "Install Now" below the title of plugin.

6. The plugin is downloading now. Wait for about less than 10 minutes. The duration is dependent on your internet connection speed, plugin size, and server of plugin creator.

7. After the plugin have downloaded and installed, then activate it.

8. Next, Go to Setting menu > Google plus badge.

set google+ badge for wordpress

9. You will redirect to Google+ badge setting. Here you can set your badge performance.

set Google+ badge

10. The important point is : you must put your profile or google+ page id at first of your setting. If you don't know your id. just go to profile page of google+ account and see the Url/address bar. There are 21 digits of id number.

11. if you have finished set your badge, Save setting and your badge will be displayed. Your badge displayed by slide style (hover), Like the image below.

Google plus badge in wordpress

The badge will appear when cursor touch google+ icon. You can change the position in Google+ badge setting.

*This tutorial is just for Self-hosted wordpress blog (hosted in wordpress.org or other web hosting services). This is not apply for free wordpress blog which hosted in wordpress.com. This because wordrpess.com don't support plugins installation manually.

-How To Install Google+ Badge For Independent Website-

This is actually general ways to add google+badge. This tutorial apply for all kind of websites/blogs with any blogging tools (Which allows you to edit source codes).

1. Before you add google+ bagde to your Website, you should to log in to your google+ account.

2. Next, Visit this https://developers.google.com/+/plugins/badge/

3. You will find the page of Google+ badge configuration to be installed on your blog.

google+ badge depelover page

4. Choose the account which you want use for your badge. As i explained above, you can choose personal profile or google+ page account.

5. You also can configure your Google+ bagde. Just set as you like. Even, you also can manage advanced options. Advanced options is for badge style and compability.

7. if you have finished set it, Drag and Copy the code.

drag and copy google+ badge codes

8. Log in to your website administrator.

9. Choose the html/php file which you want to add badge.
Usually, google+ badge installed in homepage your website. So, choose and edit index.php or index.html file.

10. Put the codes copied anywhere you like your badge displayed, provided that still between <body> and </body>.

11. Save and your Google+ badge installed.

Other ways :

If you want to use shorter codes, you can change the copied code by this codes :

JavaScript include and a badge tag :

HTML5-valid badge tag :

Note :
*Change {profileId/pageid} by your profile or page id.
*Remove rel="author" if your bagde for Google+ page.
*if you want do the general ways to wordpress. Just copied one of the three codes above.
The steps : Login to wordpress Blog dashboard > appearance > widget > text(arbitrary text or html) > paste the code > save and finish.

Well, That's the tutorial to add google badges. If you have any problems & questions, Feel free to ask. I will always give you my best.

Happy Blogging 🙂