Showing posts with label share button. Show all posts
Showing posts with label share button. Show all posts

Friday, 26 February 2010

Google Buzz button with counter

Yes,Google buzz now Counts.
A Google buzz counter developed by buzzr.com which can retain number of times a particular article has been buzzed.
Like A tweetmeme counter it can counts and display number of times it has been shared.


google buzz counter



A buzzr button is available by inserting the following script.

<script src="http://www.buzrr.com/button.js"></ script>
Add a bit a bit of CSS to the counteer and it is ready to be shared. And the result will look like below example.With each share the counter grows.

Friday, 12 February 2010

Add Google Buzz button on blogger

Google Buzz (Google Buzz) seems  to be an interesting new way to share content with your Gmail friends, so why not have a button for sharing blog posts to the service?
Officially Google have not provided any script for adding a Buzz button or link below each post. This tutorial will help you to add a "Buzz this" icon below every post on your blogger blog.
add google buzz button to blogger
Goto layout then Edit HTML from dashboard in blogger account.

Click on expand widget Template check box on the top right(see image)

And find <data:post.body/>there.


 Now paste the code given below after <data:post.body/> statement.

<a expr:href='&quot;http://www.google.com/reader/link?url=&quot;  data:post.url   &quot;&amp;title=&quot;   data:post.title   &quot;&amp;srcURL=http://myfundoo-blog.blogspot.com/&quot;' rel='nofollow external' target='_blank'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZFVNIuH0ej8YDt0PdgV8Dru-6NaysfNsbLAZmufyJqCwx1JS6yHO8nL-ci4DQ0BngIuquULLrCbqks493diq-9KEYBBh8QgoQ5iaLKzuInrnb0fGf7LfHBiOVJFQsCfOrX76RXMiXQS7o/s1600/google-buzz.pngl'/></a>

Replace http://myfundoo-blog.blogspot.com/ with your blog url.

Click on preview to check if everything  is fine and then click save template .

Customization: 

You can Increase size pf the button by changing the image url.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZFVNIuH0ej8YDt0PdgV8Dru-6NaysfNsbLAZmufyJqCwx1JS6yHO8nL-ci4DQ0BngIuquULLrCbqks493diq-9KEYBBh8QgoQ5iaLKzuInrnb0fGf7LfHBiOVJFQsCfOrX76RXMiXQS7o/s1600/google-buzz.pngl

 Here are some blogger buzz buttons with different shapes and sizes:
1.

<a expr:href='&quot;http://www.google.com/reader/link?url=&quot;  data:post.url   &quot;&amp;title=&quot;   data:post.title   &quot;&amp;srcURL=http://myfundoo-blog.blogspot.com/&quot;' rel='nofollow external' target='_blank'><img alt='' src='http://1.bp.blogspot.com/_nqp-0VCwy0c/S3Utg7x6_FI/AAAAAAAABC4/K89iKzUjwuA/s1600-h/google+buzz+2-++32px.png'/></a>

2.

<a expr:href='&quot;http://www.google.com/reader/link?url=&quot;  data:post.url   &quot;&amp;title=&quot;   data:post.title   &quot;&amp;srcURL=http://myfundoo-blog.blogspot.com/&quot;' rel='nofollow external' target='_blank'><img alt='' src='http://4.bp.blogspot.com/_nqp-0VCwy0c/S3UuCMUwUUI/AAAAAAAABDA/cgIjrMPLQxI/s1600-h/google+buzz+32px.png'/></a>

3.

<a expr:href='&quot;http://www.google.com/reader/link?url=&quot;  data:post.url   &quot;&amp;title=&quot;   data:post.title   &quot;&amp;srcURL=http://myfundoo-blog.blogspot.com/&quot;' rel='nofollow external' target='_blank'><img alt='' src='http://1.bp.blogspot.com/_nqp-0VCwy0c/S3UubmtTiVI/AAAAAAAABDI/9-Zai440dkY/s1600-h/Google+Buzz+125+(medium).png'/></a>


4.Text link
 <a expr:href='&quot;http://www.google.com/reader/link?url=&quot;  data:post.url   &quot;&amp;title=&quot;   data:post.title   &quot;&amp;srcURL=http://myfundoo-blog.blogspot.com/&quot;' rel='nofollow external' target='_blank'>G-buzz</a>

where G-buzz is the anchor text and you can replace it with any other text.

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 !