• Home
  • Archive
  • Tools
  • Contact Us

The Customize Windows

Technology Journal

  • Cloud Computing
  • Computer
  • Digital Photography
  • Windows 7
  • Archive
  • Cloud Computing
  • Virtualization
  • Computer and Internet
  • Digital Photography
  • Android
  • Sysadmin
  • Electronics
  • Big Data
  • Virtualization
  • Downloads
  • Web Development
  • Apple
  • Android
Advertisement
You are here:Home » Google +1 Button for Blogger Blog : How to add

By Abhishek Ghosh June 30, 2011 9:57 pm Updated on June 30, 2011

Google +1 Button for Blogger Blog : How to add

Advertisement

Google +1 Button has got very much importance now as Google has included it to Google Webmaster Tools. Here is how You can add Google +1 button (Plus one) to your Blogger blog very easily.

Probably you know, Google is experimenting with Google+, it started with Google Plus One button (Google +1 is the official way to write).

For WordPress own hosted blogs, we can add the codes for Google +1 Button very easily plus John’s Socialize Plugin is an excellent way to add Google +1 Button just after our posts.

Advertisement

---

Here is the way, you can add Google +1 Button to Blogger Blog too.

 

The Required Code for Google +1 Button

 

You’ll get the required code from Google official +1 Button portal. Choose the template as you like for your Google +1 button; select the Standard (24px) Google +1 option or Medium (20px) from box like the screenshot:

 

Google +1 button for blogger blog

If you expand the Advanced option in the Google +1 Button creation page, you’ll get the way to add your own URL for Goggle +1 (this is important). For Blogger, you have to add your full URL of your Blog in this Google +1 Button code generation page. We will go to further details on advanced usage of Google +1 Button in blogger later.

 

Adding the Google +1 code to blogger blog

 

You’ll see two snippets for the Google +1 Button : one should be added to the header; which is:

 

<script type=”text/javascript” src=”https://apis.google (dot) com/js/plusone.js”></script>

 

The HTML declaration in the first Google +1 Button snippet:

 

<!– Place this tag in your head or just before your close body tag –>

 

Is actually not needed for Google +1 button function. Now, add this first Google +1 button snippet before your </head> thing. Got it? You have to go to design , then HTML mode like the screenshot to add this first part to get the Google +1 snippet :

 

Google +1 button for blogger blog BOLD

Save it.

 

Two ways to use the Google +1 Button : the first way

 

If you want to add the Google +1 Button beside your other social buttons in Blogger blog like the screenshot:

 

Google +1 button for blogger blog beside other buttons

Like we have added the Google +1 Button in our test Blogger blog here; then find the code looking like </Group> before the Group named post  :

 

Add Google plus one to blogger blog

And paste the second part of the Google +1 Button snippet which actually looks like:

 

<g:plusone size=”your specified Google +1 Button size” href=”https://thecustomizewindows.com/”></g:plusone>

 

Which actually give a Google +1 Button for your home page, not the post. So, just like our WordPress PHP hook, we’ll use a hack for this Google +1 Button so that, Google +1 Button will be unique for each post. So, here is the code you have to paste to get the Google +1 button like our test blog:

 

<div>
<g:plusone size=”standard” expr:href=”data:post.url”/>
</div>

 

Save it.

This ends the story of adding Google +1 to Blogger Blog. We also have a Google +1 Button below for your click!

 

Signature
Facebook Twitter Pinterest

Abhishek Ghosh

About Abhishek Ghosh

Abhishek Ghosh is a Businessman, Surgeon, Author and Blogger. You can keep touch with him on Twitter - @AbhishekCTRL.

Here’s what we’ve got for you which might like :

Articles Related to Google +1 Button for Blogger Blog : How to add

  • Nginx WordPress Installation Guide (All Steps)

    This is a Full Nginx WordPress Installation Guide With All the Steps, Including Some Optimization and Setup Which is Compatible With WordPress DOT ORG Example Settings For Nginx.

  • WordPress & PHP : Different AdSense Units on Mobile Devices

    Here is How To Serve Different AdSense Units on Mobile Devices on WordPress With PHP. WordPress Has Function Which Can Be Used In Free Way.

  • Changing Data With cURL for OpenStack Swift (HP Cloud CDN)

    Changing Data With cURL For Object is Quite Easy in OpenStack Swift. Here Are Examples With HP Cloud CDN To Make it Clear. Official Examples Are Bad.

  • Steps To Install Nginx Plus on Ubuntu Server (HP Cloud)

    Here Are the Steps To Install Nginx Plus on Ubuntu Server Running on HP Cloud. Nginx Plus is the Paid Version of Nginx with Extra Features.

performing a search on this website can help you. Also, we have YouTube Videos.

Take The Conversation Further ...

We'd love to know your thoughts on this article.
Meet the Author over on Twitter to join the conversation right now!

If you want to Advertise on our Article or want a Sponsored Article, you are invited to Contact us.

Contact Us

Comments

  1. AvatarCorrine says

    July 1, 2011 at 1:22 am

    Thank you for you timely article. I was wondering about adding it on a post basis rather than the blog URL.

  2. AbhishekAbhishek says

    July 1, 2011 at 5:59 am

    You’re welcome.
    The header code remains same; for post basis adding

    g:plusone size=”standard” expr:href=”data:post.url”

    will serve the purpose.

Subscribe To Our Free Newsletter

Get new posts by email:

Please Confirm the Subscription When Approval Email Will Arrive in Your Email Inbox as Second Step.

Search this website…

 

Popular Articles

Our Homepage is best place to find popular articles!

Here Are Some Good to Read Articles :

  • Cloud Computing Service Models
  • What is Cloud Computing?
  • Cloud Computing and Social Networks in Mobile Space
  • ARM Processor Architecture
  • What Camera Mode to Choose
  • Indispensable MySQL queries for custom fields in WordPress
  • Windows 7 Speech Recognition Scripting Related Tutorials

Social Networks

  • Pinterest (24.3K Followers)
  • Twitter (5.8k Followers)
  • Facebook (5.7k Followers)
  • LinkedIn (3.7k Followers)
  • YouTube (1.3k Followers)
  • GitHub (Repository)
  • GitHub (Gists)
Looking to publish sponsored article on our website?

Contact us

Recent Posts

  • Market Segmentation in BriefSeptember 20, 2023
  • What is Booting?September 18, 2023
  • What is ncurses?September 16, 2023
  • What is JTAG in Electronics?September 15, 2023
  • iPhone 15 Pro Max Vs Samsung Galaxy S22/S23 UltraSeptember 14, 2023
PC users can consult Corrine Chorney for Security.

Want to know more about us?

Read Notability and Mentions & Our Setup.

Copyright © 2023 - The Customize Windows | dESIGNed by The Customize Windows

Copyright  · Privacy Policy  · Advertising Policy  · Terms of Service  · Refund Policy