Google Plus One Button Tutorial
This Google Plus One (+1) button tutorial gives site owners an easy way to add the social button to each post or page of their blog. Instructions include tutorials for Blogger and WordPress format blogs or you may want to include the Google plus one +1 button on your main site pages.
First, here’s some background information about the new Google +1 application. With the release of Google +1 yesterday going from “by invitation only” to everyone, this allows all users to sign up for the beta version and begin socializing in new ways that are similar yet superior to Facebook.
Where you see the +1 button on any site you visit you may click the +1 button to add and save that post or article to your free Google +1 account. Your +1 feed will look familiar if you’re already using Facebook. Similar to Facebook you may share content you like with a circle of contacts that you can specify by groups as friends, acquaintances, family, and more.
Visit the Google Plus One website to learn more basics.
As with anything new, the technical aspects may be daunting for novice site owners. Adding the Google +1 button to your website and blog should be easy with this +1 button tutorial.
To get the Google +1 application working you need two things. First, you need a script callout to the Google API or Application Programming Interface. Secondly, you need to add a chunk of code that automatically adds the +1 button to your site and blog posts. In layman terms you need 1) a connection to Google to add the function, and then 2) code to display the button on your website.
Important: ALWAYS backup your template before making changes. A single typo can ruin a web design layout, so protect your website to insure a roll back option if something goes wrong.
Blogger with Blogspot Address Instructions
If you have a free Blogger blog with a Blogspot address, the Google +1 button setup is added from the admin backend. Log into your account, select “Design” and then select the “Edit” link to the right under “Posts”. In the popup window of options and settings slide down and select the square radio button for “Show Share Buttons” if not already checked, and then slide to the very bottom and click “Save”.
That’s it. You’re done! Exit and visit your blog to confirm the +1 button has been added to every post.
Blogger Custom Domain, Template Site, or Static Web Pages
If your Blogger blog is on a custom www domain (like yourblog.com, not yourblog.blogspot.com), a template based website, or you have a static website design (no template), begin by inserting the following line of code between the opening <head> and closing </head> tags near the top of your template (or static page).
<script type=”text/javascript” src=”https://apis.google.com/js/plusone.js”></script>
This code will “connect” to Google’s secure server to provide the functionality for your +1 buttons.
Step 2 is adding code that displays the Google +1 button. Copy the code shown below to insert in your Blogger blog, site template, or each individual page if your site uses static pages. Insert the code in the specific place where you want the Google +1 button to appear.
<div style=’float:right’>
<g:plusone size=”medium” expr:href=”data:post.url”/></g:plusone>
</div>
For example, I decided to use the above code as-is modified and placed the Google +1 button (with 3 others) near the top of posts on my Blogger platform personal blog “Growin’ Up in Maine” with childhood stories and floated to the far right on the same line as the date posted. Visit that blog to see it in action.
The code may be customized, also. You may change the Google +1 icon size from small to medium (middle) or standard depending on the size you prefer and where you want it placed. In addition, you may want to change the float right to float left, also.
Note: Once placed in your blog or site template the buttons publish automatically with each new post or article. If your website design doesn’t use a template, but only static pages, you must manually insert both of the above codes each time you create a new page.
WordPress Blog Format Instructions
The majority of my blog designs are in the WordPress format because of ease of use and the large number of plugins designed to do functions automatically. Search and you’ll find several 5-star rated plugins for adding the Google +1 button function. I tested 3-4 and then chose the Google ‘Plus one’ Button by kms for my WordPress blogs and as featured in this tutorial.
The fast and easy way to install the WordPress Google +1 button is from the admin backend. Log into your account and then click on the down arrow in the sidebar heading for Plugins. Select “add new” and a new screen offers a search option. Input “Google ‘Plus one’ Button by kms” then select the Search Plugins.
The only option that should appear is in fact the plugin by kms. Under the name are links to details and install. Click on install and then “yes” on the following “Are you sure” nag message. The plugin will be installed automatically. When you return to the plugin options select “Activate”.
Next, under Settings in the left sidebar you should now see a link to Google +1. Click that to complete the setup. Set the first two options from the dropdown menus. My choices were “middle” under “size” (medium button), “below the post” for location, and then 3 of the 4 check boxes under that leaving “on first page” blank. Select “save changes” and you’re done. (Update: With additional testing, I moved the +1 to the top and added Twitter, Facebook, and a bookmarking dropdown.)
Choose alternate options from those I recommend to suit your preferences. Please note that this blog is a WordPress custom design. View the +1 button after the last line of the text and right above the “Share and Enjoy” date as subsequently moved to the top of posts next to 3 other social icons.
Closing Comments on the Value of Google +1
Besides the social value of Google +1, eventually those “votes” by visitors to your site may affect seo search engine optimization and page ranking. Google has dominated the search engine market for years with superior robotic algorithms to evaluate website content to rank pages.
The human factor of real people making real choices and recommendations that may be measured will certainly enhance Google’s position. Their reputation depends on relevant results to search requests. The human factor of +1 will certainly help.
For site owners, the early adopters adding Google +1 buttons to their website gathering +1 fans may likewise have an SEO advantage over their competition.
Comments are welcome. Feel free to call or email me with any questions, and keep in mind I may be available to handle the Google +1 button installation for a modest fee if you run into problems or lack of patience.
Leave a Reply
Web design full-time since 2004 and giving freely helps me learn what customers need. Call today for no obligation web design advice.