Thursday 26 November 2009

How to Add ,display or insert orkut share button to blogger :New

The orkut Share API allows website owners to enable their visitors to share the website content with visitor's orkut friends. Users can optionally promote the content among their friends.   
This is a new and awesome share button(orkut-share) like every other social networking sites.Till now it is available in two forms since it is in experimental form 
Bloggers can add the buttons shown above anywhere using a JavaScript library, clicking which brings up the share dialog with the item selected for sharing like showed in image below



Adding to blogger !
  1. Login to your dashboard.
  2. Navigate through :Layout >> Edit HTML
  3. Click on Expand widget template : Expand widget template
  4. Use your browser search to find  </head> and place the below code above </head>

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load('orkut.share', '1');
      google.setOnLoadCallback(function() {
        var params = {};
        params[google.orkut.share.Field.TITLE] = 'Interesting Page!';
        params[google.orkut.share.Field.DESTINATION_URL] = 'http://Your blog .blogspot.com';
        var connection = new google.orkut.share.Connection(params);
        document.getElementById('orkut-share').onclick =
          function(e) { connection.send('orkut.com', {}); };
      }, true);
    </script>
Do not forget to change your blog url in above code instead of this  http://Your blog .blogspot.com

5. Orkut share is ready to implement now its your wish where you want to add this badge it is totally dependent on you.
Lets continue with adding it at the bottom of your each posts like all social bookmarking button..
Search your post footer area which would be some thing like this <div class='post-footer-line post-footer-line-2'>.

6.Now paste the below code immediately below <div class='post-footer-line post-footer-line-2'>.

<span id="orkut-share" style="cursor:pointer; border:0px solid black">
<img src="http://3.bp.blogspot.com/_eEuHGVw5WLg/SwpFfy4rMqI/AAAAAAAAAAk/jdm-zBiDdv8/s320/share.gif" alt="Share Orkut" />
</span>

You can use text version of this trick by using this code instead of above code which uses image :

<span id="orkut-share" style="cursor:pointer; border:1px solid black">
      Share on Orkut
    </span>


7. Click   Save Template and view your blog !

No comments:

Post a Comment