-->

Cool ?

Monday, November 21, 2011

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 google +1 button

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.

Google plusone languages

Google plusone languages

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

15 comments:

  1. very nice information. thanks for that...

    ReplyDelete
  2. I added the plus one button to my website. Thanks for help. I write articles using revenue sharing website platforms and noticed on many of the platforms their are +1 buttons available.

    ReplyDelete
  3. Thank you so much for the information, was really what i've been looking for!

    ReplyDelete
  4. Great post. Thanks for sharing.

    ReplyDelete
  5. This is great! It will help me make the button looks similar to my website...

    ReplyDelete
  6. Chathura thank you for explaining how to set google +1 button...i just checked mine and it was set private, although when i created profile it was set to public...as i forgot how to change it, i saw here instructions so i followed and now my google +1 button is public...thank you very much for this, it was very useful to me

    ReplyDelete
  7. thank you for explanation..it was very useful, as my google +1 was set toprivate and i wanted to change it to public

    ReplyDelete
  8. Oh actually this is a cool blog trick.i actually love this post and i used these tricks to customize my +1 button on my blog.

    ReplyDelete

x

Please Use 10 seconds to Make Us World Wide

A Pluse One will be a great support...
...........................................................................



Also a Like on the Facebook Page
...........................................................................



Get This