How to Develop a Custom Google +1 Button?

Google+, the new social network by internet giant is getting popular at an exponential rate. And of course they already have a huge customer base and all they have to do is to promote this new product among them. However no one can deny the fact that Google+ is very special kind of social network with very unique features.

How-to-Develop-a-Custom-Google-Plus-One-Button

In parallel to Google+ they introduced +1 buttons for web masters. However the design of +1 button is non alterable and doesn’t go with most of the common web templates. And there is no official Google+ share button. If you already have +1 button, when you take your mouse over, it will pop up sharing window which is very user unfriendly.

If you can design your own Google +1 and share button with your own icon, it will be good news for most webmasters.

Steps to Develop

  • As the first step you need a suitable icon for Google+ share button. Find it and edit it the way you want.
  • Then you have to prepare Google+ share URL. Take a look at the below code.
https://plus.google.com/share?url=YOUR URL
  • Replace ‘YOUR URL’ with actual page URL.
  • If you are using wordpress blog, you can use below code.
https://plus.google.com/share?url=<?php the_permalink(); ?>
  • Then the current page URL will be dynamically generated.
  • Finally you have to take your user to another tab or pop up on click.
  • If you want to take your user to another tab use below code.
<a href="https://plus.google.com/share?url=<?php the_permalink(); ?>" >Share on Google+</a>
  • If you want a pop up window use the below code.
<a href="#" onclick="popUp=window.open('https://plus.google.com/share?url=<?php the_permalink(); ?>', 'popupwindow', 'scrollbars=yes,width=800,height=400');popUp.focus();return false">Share on Gogole+</a>
  • Both the above code will give your users a text link to share the page.
  • You can dress it up with an image icon with below code.
<a href="https://plus.google.com/share?url=<?php the_permalink(); ?>" >
	<img src="/icons/gplus.jpg" alt="Google+" title="Google+"/>
</a>
  • Now you have a fully functional Google+ share button and +1 button.

Custom-Google+-Button

  • Once a user will click on the button it will automatically add +1 to page.

Pop-Up

  • It will take the user to share page at the same time. Using that your user can share the page on his Google+ profile.
  • You can see at the end of article I have used a custom Google+ share button.

However this pop up could be buggy with some browsers and may not perform the task smoothly since it’s a work around. Try this out and if you come up with a better creative solution please share it here with Notes of Genius community.

Let’s hope Google engineers will release official Google+ share button soon.

Tags: # #

Get Updates

Spread the Word

What’s Next?

42 Responses to "How to Develop a Custom Google +1 Button?"

  1. Grabowski says:

    Thank you very, very, very much!

  2. Peer says:

    Is it possible to prevent Google to use a picture in the Share-Popup?

    I want only the headline and the text.

  3. Oleg says:

    Super! Thank you for this post. Just placed custom button @ my website :)
    Cheers,
    Oleg

  4. Yeremi says:

    How can I add comments, descriptions or captions informations ?
    I was trying this way:

    https://plus.google.com/share?url={youtubeVideoUrlPath}
    &title={the title}
    &caption={the caption informations}
    &description={some description}

    thanks for the advance.
    Regards, Yeremi

  5. Awesome, your twitter, facebook, and pinterest shares are just as useful.

  6. Irsah Next says:

    Hai. thanks for the tutorial. A little bit work around as I’m using concrete5 CMS but the code really helped in figuring out the structure. Browser friendly too!

  7. rei says:

    hi
    really appreciate your great work!
    I was wondering if your having issues with it not working on chrome?
    it only links me to the google plus site after I refresh.
    issue doesnt happen with firfox
    thx!

  8. Jeni says:

    Hi Malinda,

    I know I’m a little late to this party, but the G+ custom social sharing button works great! Do you have any PHP code for a Pinterest social share button that works? I’ve tried two different versions today with no luck (and the folks at Pinterest’s help desk are *not helpful at all*)…but yours seems to work great! I’d appreciate any help you could give. :)

    Warmly,
    Jeni Elliott
    theblogmaven.com

    • Hi Jeni,

      You have to take few extra steps to develop Pinterest share button. There you have to pass an image and description as parameters. I’m using a custom field to get image URL and using Title as the description. Here is the code.

      <a rel=”nofollow” href=”http://www.pinterest.com/” onclick=”popUp=window.open(‘http://pinterest.com/pin/create/button/?url=<?php the_permalink(); ? rel=”nofollow”>&media=<?php echo get_article_image();?>&description=<?php the_title() ?>’, ‘popupwindow’, ‘scrollbars=yes,width=800,height=400′);popUp.focus();return false”><img src=”/icons/pinterest.jpg” alt=”Pinterest” title=”Pinterest”/></a>

      I’m calling get_article_image() function to get the image URL. Here is the code inside it.

      function get_article_image(){
      global $post;
      $key=”articleimg”;
      return get_post_meta($post->ID, $key, true);
      }

      Or you can use below function to get attached images.

      http://codex.wordpress.org/Function_Reference/wp_get_attachment_image_src

      • Jeni says:

        Thanks for your quick response! I entered everything exactly as you have it above (exchanging the “smart quotes” that WP put in there for plain ones) and I’m still not getting an image in my popup. I looked at the URL for the popup window and there is nothing specified for the &media= variable. Do you know why this might be happening? I made sure there’s a featured image set for this post. Ugh. Here’s a link: http://daze.theblogmaven.com/gluten-free-cheesecake-chocolate-glaze/

        (*thank you*… I do appreciate it!)

        • For that you have to set the custom field in the post you are sharing.

          Make sure you have put the get_article_image() function in function.php in your theme.

          • Jeni says:

            Thanks! I got it to work. Is there no way to automate this – to just have the function choose any image from the post? (This lady has 400+ posts and it would be hard to go in and fill in the custom field for every one of them)

          • Jeni says:

            Never mind about automating; I found a great function that will pull the URL of the first post image…and for this particular project, that will do. :) Thank you for all your help!

          • Great! I was working on that. Could you please share that function here.

  9. Dani Meyer says:

    This is working for me for pinterest:

    <a href="http://pinterest.com/pin/create/button/?url=&media=ID ) ): ?>
    ID ), ‘single-post-thumbnail’ ); ?>

    &description=”>

  10. nav says:

    is there any way to customize google+ follow button

  11. I used to be recommended this blog by my cousin. I
    am no longer positive whether this put up is written via him as nobody else recognise such specific
    approximately my problem. You’re incredible! Thank you!

  12. Alie Alleen says:

    Using the first option Google plus does share but on entering google plus automatically it also gives the message: “The webpage you are viewing is trying to close this window “. Why does it do that? And how can I stop it?

  13. Jerri says:

    I do not even know how I ended up here, but I thought this
    post was great. I don’t know who you are but certainly you are going to a famous blogger if
    you are not already ;) Cheers!

  14. Max says:

    Hello, somethings has changed in popup code? I tryed it and apparently all works fine, but I cannot see the +1 in my Google profile after voting.

  15. Selina says:

    This design is incredible! You definitely know how to keep a
    reader entertained. Between your wit and your videos, I
    was almost moved to start my own blog (well, almost…HaHa!) Excellent job.
    I really enjoyed what you had to say, and more than that, how you presented
    it. Too cool!

  16. Now you have official Google+ share button and URL. But still you can use this customized button..

  17. Jigar Shah says:

    How to call a callback function when some content shared like I want to set a cookie or something like that? how I can do that?

    • I’m not really sure how to do it with this code. Once we look up the URL everything happens in Google server where we have no control. And it’s not coming back to our page either.

  18. Adam says:

    Hi!
    Is it possible to use callbacks with custom gplus button?

  19. Jone Thomas says:

    You are realy good, I used you code and its work..Great :)

Leave a Reply

Copyright © 2014 Silicon Station. All rights reserved.