How to Customize +1 Button in Different Ways

                         Customizing the Plus One button is a option that provided by official Google developer site. But Here is the complete description and guide with demos.

Customize +1 button

Before All

before all, you have to copy this code and past it Just before the  </head>  tag.

<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

It's the script that allows Google to Plus One your pages under that "head".

A Regular Button

If you did not do any customization to your +1 button, your code will looks like this one.

<g:plusone></g:plusone>

And the button will be looks like this.    " " ( A Stranded, with a bubble counter )

Customize the +1 button Outlook

 Customize with tags

 7 Simple tags are supplied to customize the +1 buttons outlook to fir with your page. Lets Get to know them One by one.

1.href

href tag allows you to add +1 button in other sites OR other pages (Not the current page). To do this you have to edit your +1 button code to look like the following .

<g:plusone href="http://www.blogtrickstream.com"></g:plusone>

Don't forget to replace " http://www.blogtrickstream.com " with the URL you need to be +1-ed. 

2.Size

Size is not about Height and Width. There are 4 different sizes. Small, Standard, Medium and Tall  you can switch between them by changing the size tag. Just like this code.

<g:plusone size="small"></g:plusone>

You can replace the small with standard, medium or tall.

Demo:
     Small »
    
     Medium »
    
     Standard »
    
     Tall »

3.annotation

This will change you counter style, 2 types of counters are available. " Bubble and Inline " also it can be changed to none, if you do not need a counter with the button.

<g:plusone annotation="bubble"></g:plusone>

replace bubble with inline or none.

Demo:
bubble»

inline»

none»

When you choose the inline option, you can change your button with 3 different widths as you can see in the picture.

Change your inline width by this code

<g:plusone annotation="inline" width="300"></g:plusone>

Image Credits to "Google Developers"

Change the 300 to any value you need.

4.expandTo

 If you keep you mouse pointer hover There will be a bubble to allow you to share the link in Google Plus. The expandTo code is to change the position of it. The code will be looks like this.

<g:plusone expandTo="left"></g:plusone>

by changing left to right, top or bottom you can manage the code.

5.align

Only 2 options to use with the tag, Just left or right the code must be looks like the following.

<g:plusone align="right"></g:plusone>

Customize loading method and language

Language

To change the language, you have to replace this Java Script with the first script, before  </head>

<script type="text/javascript">
  window.___gcfg = {lang: 'en-GB'};

  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

You can Change " en-GB " to the any of the followings.

Loading Method

Basically the +1 button will be appear after the page fully loaded. but if you need you can change it by replacing this scripts with the Java script i gave you.

Explicit Load

This will make the +1 button to load just like an element in your page. It'll load with your page constants. Not after the page load.
Java script:

<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
      {"parsetags": "explicit"}
    </script>

And the Button code must be looks like this,

<div id="content">
      <g:plusone></g:plusone>
    </div>
    <script type="text/javascript">
      gapi.plusone.go("content");
    </script>

Explicit Render

Explicit Render is using to load +1 button from a click on a link. That means readers have to click a link to see the +1 button. Here is the Java script,

<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
      {"parsetags": "explicit"}
    </script>
    <script type="text/javascript">
      function renderPlusone() {
        gapi.plusone.render("plusone-div");
      }
    </script>

And the Button code must be replaced with this.

    <a href="#" onClick="renderPlusone();">Render the +1 button</a>
    <div id="plusone-div"></div>

---

---

Subscribe to Get Latest Posts in your Inbox