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.
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.
- Once a user will click on the button it will automatically add +1 to page.
- 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.
Get Updates
Spread the Word
Thank you very, very, very much!
You welcome mate!
If you have any more questions shoot anytime..
Is it possible to prevent Google to use a picture in the Share-Popup?
I want only the headline and the text.
I was trying to do it and couldn’t find a way. Google automatically fetch the image and I’m passing only the URL..
Super! Thank you for this post. Just placed custom button @ my website
Cheers,
Oleg
My pleasure Oleg!
If you come to know more about this please share with us..
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
Google+ share URL doesn’t accept those as parameters. It’s automatically fetching other details.
But you can instruct auto-fetcher altering your markup.
See this..
http://stackoverflow.com/questions/9456592/google-share-url-what-parameters-does-it-use
Awesome, your twitter, facebook, and pinterest shares are just as useful.
Thank you Larry. Always better than bulky JAVA Scrips isn’t it?
nice ‘n neat, and none of the horrid counts next to the icons! Thanks for an excellent resource, Malinda.
Any time!
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!
You are most welcome buddy!
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!
My Primary browser is Chrome and didn’t notice such a issue so far. Update Chrome to the latest version and try again.
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
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.
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)
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.
This is working for me for pinterest:
<a href="http://pinterest.com/pin/create/button/?url=&media=ID ) ): ?>
ID ), ‘single-post-thumbnail’ ); ?>
&description=”>
Not sure why this isn’t coming through…..hopefully this one will:
ID ) ): ?>
ID ), ‘single-post-thumbnail’ ); ?>
Ok code snippet can be found here…..please feel free to delete others.
Working code for pinterest button:
http://pastebin.com/L4vrVAF0
Does not seem to be working on mobile not sure why yet.
Cool!
Thanks for sharing this..