• How To?
  • Tips ‘n Tricks
  • WordPress
  • Snippets
  • Software
    • Browsers
    • Downloads
  • Web
  • Tools
    • Character Counter
    • chmod Calculator
    • Entities Encoder
    • Live HTML Editor
    • My IP
  • Contact
Twitter Facebook Google+ RSS
You are here: SumTips » Google » Customize and Add Google +1 Button to WordPress, Blogger and other Websites

Customize and Add Google +1 Button to WordPress, Blogger and other Websites

Posted on July 4, 2011 by Renji | Short URL: http://sumtips.com/?p=4209
Google +1 button

Google +1 buttons lets users recommend the content they loved to their friends. When a signed-in user does a search on Google, they will get contents recommended by their friends and contacts, helping them get the best results.

On the original page itself, the button shows the aggregate number of +1′s a post has received.

Add Google +1 to a Website

Google +1 buttons are available in numerous sizes. You can select one which suits your website best, and get the code from the official page.

Google +1 Button Sizes

Google +1 Button Sizes

You will get two sets of code from there. The first part is to be inserted inside your website’s <head> </head> tags.

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

And the next set is to be placed where you actually want the button to appear:

<g:plusone></g:plusone>

That’s all to it. It’s as simple as that.

Customize Google +1 button

There are some customizations options available as well. Like if you want to place multiple buttons on a single page, in which one points to another URL,  the above code won’t be useful.

For doing that, edit the button code and use the href attribute to specify the target URL. Example, if you want a particular button to point to another URL than the current page, edit it’s href attribute value like this:

<g:plusone href="http://www.example.com/"></g:plusone>

Buttons can also be displayed without showing count. For that, add the count=”false” parameter in the code. Example:

<g:plusone size="small" count="false"></g:plusone>

Note: This does not work with the Tall size because it must have the count.

The button language can also be customized by including {lang: ‘fr‘} along with the javascript.

Add Google +1 Button to a WordPress Blog

For WordPress, you can use the above code, or just add the following to your theme’s functions.php file:

function googleplusone_button() {
echo '<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>';
}
add_action('wp_footer', 'googleplusone_button');
function share($content){
if(is_single()) {
$content .= '<div><g:plusone size="medium" href="<?php the_permalink(); ?>"></g:plusone></div>';
}
return $content;
}
add_action('the_content', 'share');

That will show Google +1 button after each post. If you need it somewhere else, edit your theme’s templates files and place the below code after the first set above (don’t add the second set).

<g:plusone href="<?php the_permalink(); ?>"></g:plusone>

Add Google +1 Button to a Blogger Blog

In your Blogger’s dashboard, go the Design tab and click on “Edit HTML.” Check “Expand Widget Templates” and search for <data:post.body/>.
Include the following after that:

<div style='float:right; margin-right:10px;'>
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'/>
<g:plusone size='tall'/>
</div>

If you want to show +1 button on the left side of your post , then replace “left” with “right” in the code.


Tweet

Related posts:

  • Get Back Facebook Comment Submit Button and Old Behavior
  • Get Back White Google Navigation Bar, or Customize it to Any Color of your Choice
  • Enable Voice Search Feature on WordPress and Other Websites
  • Customize WordPress TinyMCE Editor With Custom Buttons
  • Customize WordPress Admin Bar by Adding/Removing Links
Categories: Google, How To? | Tags: Google
Download All Your Data Stored On Google with Google Takeout
Apply Ubuntu Theme to Google Navigation Bar

One Response to “Customize and Add Google +1 Button to WordPress, Blogger and other Websites”

  1. Lok Bahadur Thapa says:
    December 20, 2011 at 5:37 AM

    thanks for helpful ideas which helps me in the best way :)

  • Get Updates via Email

  • Recent Posts

    • CMS2CMS: Migrate Site from Drupal or Joomla to WordPress
    • WordPress: Add Preview Button in Distraction Free Writing
    • How to Activate or Deactivate Individual Jetpack Modules
    • Windows 8: Auto Update Defender with Windows Update Disabled
    • Automatically Start and Close Programs at Specific Time
    • How to Copy Code from Notepad++ with Syntax Highlighting
  • Random Posts

    • Speed Up Microsoft Outlook 2007
    • Set Default Windows Drag-n-Drop to Copy, Cut or Create Shortcut
    • Official Holiday Lights Theme for Windows 7
    • Make WordPress Remember Your FTP Details
    • GUI Software To Edit Path & Environment Variables In Windows
    • Chinese University Develops Bacteria to Store Data
  • Categories

    • Blogging
    • Games
    • Google
    • How To?
    • Linux
    • Microsoft
      • Windows
    • Miscellaneous
    • Phone
    • Snippets
      • AutoHotkey Snippets
      • CSS Snippets
      • htaccess Snippets
      • JavaScript Snippets
      • PowerShell Snippets
      • WordPress Snippets
    • Social
    • Software
      • Browsers
    • Tips 'n Tricks
    • Wallpapers
    • Web
© SumTips. Contact | Sitemap | Privacy Policy