How to Add Google's +1 Buttons to Your Genesis Post Info

Google first rolled out +1 back on March 30th, 2011. Today Google announced that +1 can be incorporated on web pages!

So what is Google's +1?

Google writes:

The +1 button is shorthand for "this is pretty cool" or "you should check this out." Click +1 to publicly give something your stamp of approval. Your +1's can help friends, contacts, and others on the web find the best stuff when they search.

And, since it is Google and most SEO people strive and aim towards Google optimization, then adding the +1 will be as important (if not more) than adding social bookmarking and the likes of Facebook and the follows or tweets of Twitter. Simply, as one writer states, "[It's Google's] attempt to become more social" around the web. Just as Google results are now saying who tweeted what, they will also be adding who +1'ed the search results! And while Google hasn't officially (or unofficially to my knowledge) stated that +1 will have an impact on search results or their algorithm I am going to bet that it will.

It will be interesting to watch how Google +1 grows. Facebook's LIKES are powerful social bookmarking tool of sorts because of its powerful social network connection. So if Google figures a way to have this drive search results, which I believe Google Buzz was probably supposed to do, then +1 could be just as powerful as Facebook's Like Us/This button.

Watch this video from Google about +1:

Caveats

Since Google is developing this, it will be driving Google services. So know your audience, for your visitors to be able to use the Google button, they’ll need both a Google Account and a Google Profile. Also, it is only available in US English.

As one Google watcher said:

Google will show +1 buttons next to all search results and ads, while encouraging other sites to include the buttons. All +1's are public and they're tied to Google Profiles. The goal is to use this data to personalize search results and ads by recommending sites +1'd by your friends. Google Social Search already does this, but there's no support for Facebook likes, so Google had to come up with a substitute.

And finally, also note that you can join this social experiment here, and here is what Google said about +1 appearing in searches, which currently appears to be browser specific??:

Please note, this experiment is browser-specific. From within each browser that you want to +1 from, you will need to repeat steps 1-2. Also, it may take a while before you see the button in search results, and it may occasionally disappear as we make improvements.

Customizing Google's +1 Code

However, to implement the Google share button, you don’t need a Google account. Google has provided a “configurator” for web site owners to quickly and easily grab several variations on the necessary Google +1 code.

However, here is their copy and paste code what the code is:
[html]<!-- Place this tag in your head or just before your close body tag -->
<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>

<!-- Place this tag where you want the +1 button to render -->
<g:plusone></g:plusone>[/html]

Now can be further customized. They have four sizes:

1. Small: 15px, size="small"
2. Medium: 20px, size="medium"
3. Standard: 24px, default
4. Tall: 60px, size="tall"

To change the size insert size="small" (or whatever you choose) inside the first , such as . To remove the count just insert count="false". To add the specific URL, insert href="YOURURL".

To add the advanced options of (1) explicit parsing, include {parsetags: 'explicit'} and (2) javascript callbacks, include callback="CALLBACK".

Ok, so how do you add the +1 button to your Genesis site?

There's two methods:

1. Copy and Paste the Google Copy and Paste Code into your Genesis Theme Settings > Header/Footer Scripts
2. Use the following code snippets to further customize the +1's location in functions.php
3. Download the full code, upload to your Child Themes lib folder, include require_once(CHILD_DIR.'/lib/google_plus_one.php'); in your functions.php file. Done!

Genesis Theme Settings

Go to Genesis > Theme Settings and scroll down to the bottom right. Copy and paste the following code into the header or footer box:
[html]<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>[/html]

While Google encourages you to insert the code into the header (and again no one knows yet how Google will search for this code for SEO), it still is possible to place this in the footer too. As as the guys at DIY Themes determined:

The reason for this recommendation applies to load order and priority — if Google Plus One (+1) is having a bad day, your visitors shouldn’t be impacted. Light testing showed the +1 API may require from about 0.2 to 1.0 seconds to load fully when not cached.

Code Snippets for Genesis

In your functions.php, you will need to include Google's main javascript file.

Step 1: Call Google's JS
[php]<?php
function google_plus_one_integration() {
?>
<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>
<?php
}
//add_action('wp_head', 'google_plus_one_integration'); //insert code in header
add_action('genesis_after', 'google_plus_one_integration'); //insert code in footer before </body>
?>
[/php]

Step 2: Display where you want.
For Single Pages:
[php]<?php
//Add to Single pages only
function google_plus_one_output() {
if (is_single()) {
//note the use of the div tag for CSS purposes due to
//Google's funny method of applying a class to plusone
?>
<div class="my-plus-one">
<g:plusone size="medium"></g:plusone>
</div>
<?php }
}
//add_action('genesis_before_post_content', 'google_plus_one_output');
[/php]

For insertion into Genesis's post info:
[php]<?php
//add to post information
add_filter('genesis_post_info', 'my_post_info_filter');
function my_post_info_filter($post_info) {
$permalink = get_permalink();
if (!is_page()) {
$post_info = '[ post_date] By [ post_author_posts_link] [ post_comments] | Share: <g:plusone size="medium" href="'.$permalink.'"></g:plusone> [ post_edit]'; //remove spaces after initial [
//$post_info = 'Custom text'; //edit this to whatever you'd like.
}
return $post_info;
}
[/php]

BONUS: To add Twitter and Facebook with it in post info:
[php]<?php
//with Twitter and Facebook:
function my_post_info_filter($post_info) {
$permalink = get_permalink();
if (!is_page()) {
$post_info = '[ post_date] By [ post_author_posts_link] [ post_comments] | Share: <g:plusone size="medium" href="'.$permalink.'"></g:plusone><a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script><iframe class="fblikebtn" src="http://www.facebook.com/plugins/like.php?app_id=214741845223780&amp;href='.$permalink.'&amp;send=false&amp;layout=button_count&amp;width=50&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:50px; height:21px;" allowTransparency="true"></iframe> [ post_edit]'; //remove spaces after initial [
//$post_info = 'Custom text'; //edit this to whatever you'd like.
}
return $post_info;
}
[/php]

Some CSS styling (please make it fit to your theme)
[html].fb_iframe_widget {float:right; margin-top: -25px;}
.twitter-share-button {float:right; width: 100px !important;}
.my-plus-one { float:right; }
#___plusone_0,#___plusone_1,#___plusone_2,#___plusone_3,#___plusone_4,#___plusone_5,#___plusone_6,#___plusone_7,#___plusone_8,#___plusone_9,#___plusone_10 {float:right; width:61px !important}
.fblikebtn {float:right; width:55px !important}[/html]

Note: The reason for the multiple CSS ids for the Google +1 (#___plusone_0, #___plusone_1, #___plusone_2, #___plusone_3, #___plusone_4, #___plusone_5, #___plusone_6, #___plusone_7, #___plusone_8, #___plusone_9, #___plusone_10) is because that's how Google codes the classes if there is more than one +1 (.___plusone -> 3 underscores + plusone). So if you have 11 posts on one page then you need your CSS to have this. Also note that it starts with zero (0).

<>h2>Download the code

For those of you who love simplicity and ease, just down load this zip file, unzip, upload the php file to your Genesis lib folder, and include the following code in functions.php.
[php]require_once(CHILD_DIR.'/lib/google_plus_one.php');[/php]

Download the file here: [download id="13"]

(The file inserts Google's Plus One in the post info.)