Place Your Ads Here 460x68 ads

Two in One Google plus Follow and Circle Widget for blog/site.



Now a days, Social networking sites plays a great role in increasing your site's organic traffic. Like providing links on Facebook and Twitter will let those users to know about your new articles instantly. You can integrate your website to Facebook and Twitter by adding a simple two in one Likebox for Facebook and Twitter
Google is also  prioritizing search results from its own services like Google Plus profile's posts, Google Plus fan Page's posts, post from other bloggers. And also Google provided some gadgets to integrate its services like Add me to Circles widget for Google Plus profile integration, Follow us widget for Google Plus Fan Page. You can add them using blogger's layout section, by clicking on Add new Gadget. But, doing so will not provide a good look. Similar tohow adding images to a post increase in page views, A consistent design for gadgets also help in more page views conversion. So today, I am covering this post to add  a nice, attractive and very simple combined gadget.

Two in One Google Plus Follow and Add to Circle widget:

  • Go to Blogger's Layout section. (If you are using in some website, the just place the following code to the section where you want your badges appear)
  • Click Add New Gadget.
  • Select html/java script type gadget.
  • Paste the following code inside the content box.
  <script type="text/javascript">

window.___gcfg = {lang: 'en'};
(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>
<div style="background: url(http://4.bp.blogspot.com/-bgyzRKP0CAs/UB7tZB-x4UI/AAAAAAAAELs/7WRs4X_SdNE/s1600/White-Manza.png); 
            border-radius: 3px;
            border: 4px solid #ccc; 
            margin: 0px; padding: 5px 5px 0px 5px;
            width: 280px;">
<b><span style="color: #333333; 
    font-family: arial; 
    font-size: 14px;">
Sandeep Rao In <a href="https://plus.google.com/114596154700417163855/" rel="author" target="_blank">40+</a> Circles →</span></b>
<div style="padding-top:7px;">
<b><a href="https://plus.google.com/114596154700417163855/" rel="author" target="_blank"><img align="left" alt="Sandeep Rao" height="54px" src="https://lh6.googleusercontent.com/-uMhq38aGp6Q/AAAAAAAAAAI/AAAAAAAAAoA/CzD6omXCCXU/s250-c-k/photo.jpg" style="margin-right: 5px;border-top:2px solid #000; border-radius:5px;"/></a>

<script type="text/javascript">

window.___gcfg = {lang: 'en'};
(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>
<g:plus height="69" href="https://plus.google.com/114596154700417163855" rel="author" width="220"></g:plus></b></div>
<b><span style="color: #333333; 
    font-family: arial; 
    font-size: 14px;">
Follow <a href="https://plus.google.com/b/110469018706714674345" target="_blank">only4everyone.blogspot.com</a> on Google+</span></b>
<br/>
<div style="padding-top:7px;">
<b><a href="https://plus.google.com/b/110469018706714674345" target="_blank"><img align="left" alt="only4everyone.blogspot.com" height="104px" src="https://lh6.googleusercontent.com/-uMhq38aGp6Q/AAAAAAAAAAI/AAAAAAAAAoA/CzD6omXCCXU/s250-c-k/photo.jpg" style="margin-right: 5px; border-top:10px solid #000; border-radius:10px;"/></a>
<!-- Place this tag where you want the badge to render. -->
<div class="g-plus" data-width="170" data-href="https://plus.google.com/b/110469018706714674345" data-rel="publisher"></div>
<!-- Place this tag after the last badge 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></b></div>
</div>


Now make some changes in the script to add your own Google profile and  Google Plus fan page information, as this script consist my profile and fan page information.
  • Change the Text in this Color with your own corresponding Google Plus profile and Your Fan Page's profile URL. In my case it is https://plus.google.com/111452921719255232791 and 
    https://plus.google.com/
    114596154700417163855
  • Change the Text in this Color with your Profile Name, like in my case it is Sandeep Rao.
  • Change the Text in this Color with your Profile image URL. As in my case it ishttps://lh6.googleusercontent.com/-uMhq38aGp6Q/AAAAAAAAAAI/AAAAAAAAAoA/CzD6omXCCXU/s250-c-k/photo.jpg. Also change your corresponding Page;s profile image's URL.
That's it... You are done. Now, you have the simplest, Official Follow and Circle us badges on your website.
Your Feedback is most welcome.



Sameera ChathurangaAbout Author Shoyab Khan

Blogger, MAC user, Apple Fan, Online Content Writer, Designer, Gamer, Programmer and Jovial Guy!. Like my Facebook Fan Page. Catch me on Twitter and Google+. Read more about Me and Www. Only4Everyone.Blogspot.com. Download Free Games,Download Free Software,Download Movies and Watch Online,Blogger Wordpress and Website Tips , Tricks ,Widgets,Templets, and many other Sources and Health Tips,Photo Gallery contact me

Thank You

1 comments:

  1. Hello! I just want to give an enormous thumbs up for the
    nice information you may have right here on this
    post. I shall be coming back to your blog for extra
    soon.

    Feel free to surf to my site - queen seon deok d-addicts

    ReplyDelete

Related Posts Plugin for WordPress, Blogger...