Google+ Share buttons
All of us know what Google is and how much we need it. Every Developer needs Google. As you see, Google+ is a very useful and beautiful thing. In many-many websites, there are Google+ share buttons, and these buttons can be very different. Let's see what kind of Share/Post buttons Google has and how you can use it. Let's see the first kind of button.
Google+ Simple Share
To use a share button in a simple way you must connect a script to your page. Here it is.
<script src="https://apis.google.com/js/platform.js" async defer></script>This tag is necessary for sharing anything from your website. The script must be sourced at https and can be included at any point on the page without restriction. So when we connect that script, what is the next step? The next step is the share button tag.
Here it is.
<g:plus action="share" ...></g:plus> <!-- HTML -->
<div class="g-plus" data-action="share" ... ></div> <!-- HTML5 --><!DOCTYPE html>
<html>
<head>
<title>www.W3docs.com</title>
<link rel="canonical" href="//www.w3docs.com/" />
<script src="https://apis.google.com/js/platform.js" async defer></script>
</head>
<body>
<g:plus action="share"></g:plus>
</body>
</html>The Google+ Share gets all properties (URL, description, image, website etc..) from you webpage meta (link/canonical) tags. You need to have meta tags for all those properties if you want to have a custom property in your share block.
Google+ Share a Link
Here is another kind of share a page. It's the easiest way to have a share button on your webpage. This kind of share can be handy because it's straightforward, simple and has shortcode.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>W3docs share</title>
</head>
<body>
<a href="https://plus.google.com/share?url=//www.w3docs.com/learn-javascript/google-share.html" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,height=600,width=600');return false;"><img
src="https://www.gstatic.com/images/icons/gplus-64.png" alt="Share on Google+"/></a>
</body>
</html>This type of share button has image three sizes by default. You can use whatever size you want or change the image and set your custom.
| Size | Example | Image URL | Width | Height |
|---|---|---|---|---|
| Large |
| https://www.gstatic.com/images/icons/gplus-64.png | 64 | 64 |
| Medium |
|
https://www.gstatic.com/images/icons/gplus-32.png | 32 | 32 |
| Small |
|
https://www.gstatic.com/images/icons/gplus-16.png | 16 | 16 |
Google+ Share has many APIs, and an API has many properties and functions.
Practice Your Knowledge
Quiz Time: Test Your Skills!
Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.