Google+ Share

Google+ Share buttons

All of us know what is Google and how much we need it. Every Developer needs Google. As you see Google+ is very useful and nice thing. In many-many websites there are Google+ share buttons and this 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 that properties if you want to have a custom properties in your share block.

Google+ Share a Link

Here is another kind of share a page. This is the easiest way to have a share button in you webpage. This kind of share can be very useful because it's very easy, simple and has short code.

<!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 3 size 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. You can learn about it in Google developer webpage.

Related Resources ΒΆ