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.
- 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.