Google +1 Button – One of those “Sharing” Button

In my old post, titled, floating social media button video post, I posted how to add floating social media buttons, such as Digg, Stumble Upon, Google Buzz, Twitter and Facebook share button.

And surely, not to forget add a new service in ShareDaddy with Jetpack plugin. (related: jetpack plugin wordpress).

Last few months there was a hot news about Google +1 button, which will represent like “a stamp” for an authority or useful page in your website or blog, which is very nice in my opinion, but like another social media or network website, it just requires more of your time.

If you have time, you can generate traffic through this button or make your blog popular, or even using Yahoo Answers, that I have personally also tried them all, but again, as I mentioned above, it needs your spare time.

Google +1 Button – How to add this button using Twenty Ten theme and Twenty Eleven

I have created a video on how to add this button using WordPress 3.2 Beta 2’s default theme, Twenty Eleven, and also Twenty Ten theme.

Although in the video, I mentioned, “Twenty Ten Eleven” theme lol..but I meant Twenty Eleven.

I still care about Twenty Ten, because I notice alot of wordpress bloggers still use this theme as their website’s template. This is why, I created two version of tutorials, first using Twenty Ten theme, and then Twenty Eleven theme.

So in case you are using Twenty Ten theme, you can watch the first minutes of the video below, but if you use Twenty Eleven theme, you can watch almost at the end of the video.

But generally, the result of the tutorial is the same, which will embed its  Javascript in the footer, and then render the button in post pages (or single post page) file in Twenty Ten theme file, as well as Twenty Eleven theme single post file.

That single post files are named differently, which is called loop-single.php in Twenty Ten theme, and content-single.php in the Twenty Eleven file.

Another note, if you want to add it in your index or home page, then you should add the render code in index.php.

Google +1 Button in Twenty Ten and Twenty Eleven video tutorial

For me personally, adding plugins to add this little button is just not making sense because we can easily add those functionality without adding extra plugin. More plugin = more loading time in your blog, so if you want to use plugin, you can add or install a plugin, but if you want to add manually, you can follow this tutorial.

Video:

Twenty Ten theme steps:

1. Visit this Google +1 button official website page.

2. Choose how big you want to display your button, is it small, standard, big or tall. Once you are sure which size you want to have, go back to your admin dashboard.

3. In your dashboard, go to “Appearance” and then “Editor”.

4. Navigate to “footer.php” in the right sidebar, click that link.

5. You will want to copy this code and paste it in your footer. (see screenshot)

Code that you will copy and paste:<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>

Here is where we going to paste: (before /body)

Click “Update file” to save.

6. Now if you refresh your post page, it won’t show, because we need to add the code to display the button image. To do that, you have to open loop-single.php file, so again to “Appearance” → “Editor”→ “loop-single.php”

Right below the title tag, we add this code:

<g:plusone></g:plusone>

Click “Update File”.

Now for Twenty Eleven steps:

Follow the step 1 until 5 above to find “footer.php” of Twenty Eleven theme, and paste the code (from step 5) exactly the same before the /body tag as well.

1. After we pasted the code in footer.php, we now look again in “Appearance” → “Editor”→ “content-single.php”

2. Paste the code <g:plusone></g:plusone> in this content-single.php right after the title.

Screenshot:

3. Click “Update File”.

That’s how I would insert Google +1 button if I would use Twenty Ten theme or Twenty Eleven theme.