Google has created a new social button (+1), integrated into its search engine, that can be added to WordPress and Blogger websites. How to add the Google +1 Button to WordPress and Blogger is straight forward, either via a java script, a plugin, or social button manipulation. Supposedly, the Google +1 button can or will eventually impact “your site’s visibility in search”. Below you will find how to add the Google +1 button to a self-hosted WordPress site and to a Blogger website.
Google +1 Button Page
Here you will find the Google + 1 button page, which showcases the buttons different sizes and basic installation information.
The official Google information about the +1 button
How to add the Google +1 Button to a WordPress site
Step 1: Add a Line of JavaScript to Your Theme Files
The +1 button tool page lays out what webmasters need to add to their website. For users who have a standard XHTML website (or are using Tumblr), copying and pasting
<script type=”text/javascript” src=”http://apis.google.com/js/plusone.js”></script> before the </body> tag
on a website works just fine. WordPress users, however, will need to add that snippet to their theme files.
WordPress Footer Editor, Google +1 Button
Simply Go to the Appearances section in the WordPress dashboard and select “editor.” Then find the footer.php file in your template listing. Scan through the file until you see the area marked
</body>
, then paste in the JavaScript line.
Hit update and you’re ready for step two!
Step 2: Add a Button to Your Sidebar
After the JavaScript snippet has been added to your website, users can paste the wherever they want a button to appear. Using the +1 button tool, you can configure the button size and include other advanced options.
Another common use for the +1 button, besides on individual blog posts, will likely be in sidebar widgets on a homepage. This can act as a nice, generic hub for +1 activity.
To add the +1 button to a sidebar in WordPress (assuming your theme supports sidebars), simply go to the Appearances section in the Dashboard and select “Widgets.”
We’ll assume that you want to create a new widget for the +1 button, but other sidebar widgets can also be customized to display the button.
WordPress Widget, Google +1 Button
Drag a new “Text” widget to the sidebar location of your choice. You can add a header if you want, or you can leave it blank. In the text portion, paste the button configuration you want using the +1 button page. The standard code is
<g:plusone></g:plusone>
You can choose how you want the button to align itself using HTML or referring to CSS classes from your stylesheet.
Additional Tips
At this point, we’ve successfully added the +1 button to a WordPress website. Users can add the button to individual posts by entering the button code in the body of a post, or add it in automatically by adding a line to the WordPress loop in the post.php and loop.php theme templates.
Here are a few things you might want to take into consideration when using the +1 button on your site:
By default, the button doesn’t have a URL parameter set. Instead, the JavaScript will crawl your page and make its best guess for the URL that you are liking. If you want to specifically ask users to +1 a certain URL, add
[code]href=”http://example.com”[/code]
to the button’s tag. For instance, if I wanted to add a +1 button that reported to Mashable, this is the code I would use:
<g:plusone href=”http://mashable.com”></g:plusone>
For sites with the popular Bad Behavior WordPress plugin it can interfere with the +1 button, at least as of this writing. Disabling the plugin will allow users to add +1 buttons to their site.
The Digg Digg WP plugin (written about here: Starting a Movie Website: WordPress Plugins) has been update with the Google + 1 button in all its sizes.
More on adding a Google +1 button to main index posts in WordPress
Now, simply adding the above code [<g:plusone></g:plusone>] on the homepage below each post excerpt won’t generate a +1 button for each individual post. To add the +1 button on WordPress homepage, use the code given below and paste it on the index.php file where you want it to appear.
<g:plusone size=”small” href=”<?php echo urlencode(get_permalink($post->ID)); ?>”></g:plusone>
This will now add a plus +1 button that corresponds to each post appearing on the index page. You can add the code in similar manner to category pages as well.
Thus, by modifying the code snippet given by Google by adding the URL attribute, you can embed the Google +1 button to WordPress blog homepage.
How to add the Google +1 Button to a Blogger site
The first method:
To add the +1 button to your blog directly without any code then you’ll need to enable Share buttons on Blogger. To do this, go to Design > Page Elements on your Blogger dashboard, find the Blog posts area, click on Edit, and select the “Show Share Buttons” option. If you are already using Share buttons, then you don’t need to worry as the +1 button will automatically show up as a new share button.
Blogger Share Buttons, Google +1 Button
The second method:
1. Go To Blogger > Design > Edit HTML
2. Backup your template
3. Search for
</head>
4. Paste the code below just above </head>
<script type=”text/javascript” src=”http://apis.google.com/js/plusone.js”> {lang: ‘en-US’} </script>
5. Now Check the “Expand Widgets Templates” Box at the top right corner. In order to place the button just below Post titles then search for this code and place the +1 button code given below just above it,
<div style=’float:left’>
<g:plusone size=”standard” expr:href=”data:post.url”/>
</div>
You can display it to “left” and “right” by adjusting left
You can change standard to medium, small or tall. Choose the size that may blend your template.6. If you want the button to appear below blog posts then add the button code just below
<data:post.body>
7. Save your template to see it working.
A list of important Google +1 button facts to ponder:
Natalie Portman, Interview Magazine, September 2009
1. The +1 button will influence search rankings. Here is the exact quote from Google’s David Byttow, from when the feature was first announced: “We’ll also start to look at +1’s as one of the many signals we use to determine a page’s relevance and ranking, including social signals from other services. For +1′s, as with any new ranking signal, we’ll be starting carefully and learning how those signals affect search quality over time.”
2. When a user searches, while signed in, their search result snippets may be annotated with the names of their connections who have “+1′d” the page. When none of the user’s connections have +1′d a page, the snippet may display the aggregate number of +1′s the page has received.
3. Google says publishers could see “more, and better qualified traffic coming from Google” as potential visitors see recommendations from friends and contacts beneath their search results
4. Google calls the +1 button “shorthand for ‘this is pretty cool’ or ‘you should check this out’.
5. One a user clicks the button, a link to the content appears under the +1′s tab on the user’s Google Profile.
6. Google suggests clicking the button when you “like, agree with, or want to recommend” something to others.
7. The +1 Button is not the same as Google Buzz, though there are similarities. They both appear on your Google Profile under different tabs, but +1′s don’t allow for comments (at least yet. I would not be surprised to see Buzz’s functionality get rolled into +1 eventually).
8. +1′s are public by default. Google may show them to any signed-in user who has a social connection to one. Users can choose not to have them displayed publicly on their Google Profile, however.
9. There are different sizes and styles of the button that you can use on your site.
10. The button is even more customizable if you want to get more technical. The API documentation can be found here: http://code.google.com/apis/+1button/
11. When a user clicks on the +1 button it applies to the URL of the page they’re on.
12. Still, multiple buttons can be placed on a single page that all +1 different URLs (refer to the above documentation).
13. While Google suggests you use the button where you think they’ll be most effective in terms of placement around your content, the company recommends above the fold, near the title of the page, and close to sharing links. Google also says it can be effective if you put it at the end of an article as well as the beginning.
14. By placing the <script> tag at the bottom of the document, just before the body close tag, Google says you may improve loading speed of the page (which is another factor Google takes into account in terms of ranking).
15. If you try to +1 a private URL, it won’t work, according to Google.
16. You have to be logged into a Google account for the button to work.
17. While everyone can see aggregate annotations, signed in users can also see personalized annotations from people in their Gmail/Google Talk Chat list, My Contacts group in Google Contacts, and people they’re following in Google Reader and Google Buzz.
18. Google points to these canonicalization strategies to ensure the +1s “apply as often as possible to the pages appearing in Google search results.” http://www.google.com/support/webmasters/bin/answer.py?answer=139066
19. The button is supported in 44 languages (though the annotations only appear in the English language Google.com search results for the time being).
20. The button will be seen in the Android Market, Blogger blogs, Product Search, and YouTube, in addition to any other sites that add them.
21. A lot of sites have already replaced the Google Buzz button on content pages with the +1 button
22. If you have a Blogger blog, you can add the button by going to Design > Page Elements on the dashboard, finding the “Blog posts” area, clicking edit, and selecting the “Show Share Buttons” options, where you should find the +1 button as an option.
23. The +1 Button will be available on YouTube watch pages under the “share” feature. Consider how valuable YouTube can already be to SEO, and take then take into consideration the search implications of the +1 button.
24. If you’re signed into your Google account, Google will show you +1 annotations from your Google contacts on YouTube search results.
25. Google says adding +1 buttons to your pages can help your ads stand out on Google. “By giving your visitors more chances to +1 your pages, your search ads and organic results might appear with +1 annotations more often. This could lead to more–and better qualified–traffic to your site,” the company says.
26. The +1 button will appear next to the headline on search ads. Personalized annotations will appear beneath the Display URL.
27. Publishers can get updates about the button by joining this group.
28. Google may crawl or re-crawl pages with the button, and store the page title and other content, in response to a +1 button impression or click.
29. Google has strict policies for publishers that it says it will use (along with the Google ToS) to govern use of the +1 button. Here are these policies in their entirety:
Publishers may not sell or transmit to others any data about a user related to the user’s use of the +1 Button. For the avoidance of doubt, this prohibition includes, but is not limited to, any use of pixels, cookies, or other methods to recognize users’ clicks on the +1 Button, the data of which is then disclosed, sold, or otherwise shared with other parties.
Publishers may not attempt to discover the identity of a +1 Button user unless the user consents to share his or her identity with the Publisher via a Google-approved authorization procedure. This prohibition includes identifying users by correlating +1 Button reporting data from Google with Publisher data.
Publishers may not alter or obfuscate the +1 Button, and Publishers may not associate the +1 Button with advertising content, such as putting the +1 Button on or adjacent to an ad, unless authorized to do so by Google.Publishers may not direct users to click the +1 Button for purposes of misleading users. Publishers should not promote prizes, monies, or monetary equivalents in exchange for +1 Button clicks. For the avoidance of doubt, Publishers can direct users to the +1 Button to enable content and functionality for users and their social connections. When Publishers direct users to the +1 Button, the +1 action must be related to the Publishers’ content and the content or functionality must be available for both the visitor and their social connections.
Google may analyze Publishers’ use of the +1 Button, including to ensure Publishers’ compliance with these policies and to facilitate Google’s development of the +1 Button. By using the +1 Button, Publishers give Google permission to utilize an automated software program (often called a “web crawler”) to retrieve and analyze websites associated with the +1 Button.
30. The button is not available on mobile search results yet, though users may still be able to see the buttons on your pages.
31. According to Search Engine Land, while they may still be a while away, Google will launch analytics for the button, to show webmasters info on geography, demographics, content, and search impact. Apparently Google is working with launch partners to make sure reporting is accurate before they offer it on a wider scale.
If you want the code for the button to add to your site, you can get it here.
Source: Mashable, Techattitude, Mybloggertricks, Webpronews
