X

Headline

This is an important message requiring you to make a choice if you're based in the EU.

Google+ Share

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.




Do you find this helpful?

Related Resources ΒΆ


Related articles