5

Adding Share Buttons for Twitter, Facebook, Buzz and Others

Today I was working on a project and I had to search for some share functionalities. I wanted to get the original code from the original social media websites and not a third party hack or something like that. So I found codes for Twitter, Facebook, Google Buzz, StumbleUpon, Reddit and Digg. The only one that’s not from the original website is Twitter, so I used Tweetmeme instead.

Introduction

I’m sure you have already seen some of the icons displayed in this post. And you probably use some of these services. But do you know how to add a share link to your website the proper way? That’s what I’m going to show here. I used the official references to find the code examples I’m going to show here.

Twitter

Twitter is one of the most famous social media websites today. Unfortunately I didn’t found the official “tweet” button with tweet count. But, in this case, we have Tweetmeme, which is widely used.

Reference: http://help.tweetmeme.com/2009/04/06/tweetmeme-button/

Here is a simple example with the big size button. You can see that you can customize the source and the URL. You should set a short URL or use the tweetmeme_service parameter. You can also use the compact button adding the code “tweetmeme_style = ‘compact’;“.

 <script type="text/javascript">
    tweetmeme_source = 'username';
    tweetmeme_url = 'http://yourdomain.com';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>

An additional feature is the ability to change the tweet text. By default it will use the page title, but if you want to change it, you have to add the following:

<meta name="tweetmeme-title" content="Different Text" />

Facebook

Facebook is also very famous. And has great developer tools. So it’s really easy to create a share button for it. You can customize it and get the code in the following website:

Reference: http://www.facebook.com/share/

Here is an example for the box size. It will use the page title and the page URL as the values to be posted. In this case we don’t need to limit the size to 140 chars.

<a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php"></a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

If you want, you can use ‘type=”button_count“‘ for the small button. You can also customize the title and URL to be shared by changing the HREF value like this: http://www.facebook.com/sharer.php?u=url&t=text

Google Buzz

Google Buzz is one of the most recent social medias. It was developed by Google as a response to Twitter. It has some nice resources for sharing.

Reference: http://code.google.com/apis/buzz/buttons_and_gadgets.html

One of the most customizable resource uses JavaScript together with HTML5 tags. Here is an example using the normal size button.

<a href="http://www.google.com/buzz/post"
    class="google-buzz-button"
    title="Google Buzz"
    data-message="Message Text"
    data-url="http://yourdomain.com"
    data-locale="en"
    data-button-style="normal-count"></a>
    <script type="text/javascript" src="http://www.google.com/buzz/api/button.js"></script>

You can use ‘data-button-style=”small-count”‘ for the small button with counter.

StumbleUpon

StumbleUpon has one of the best ways to create the button code. All you have to do it check this website:

Reference: http://www.stumbleupon.com/buttons/

From there you can select the button style and if you want to add it to existing platforms or your own website. The code for the bigger button is this:

<script src="http://www.stumbleupon.com/hostedbadge.php?s=5&r=http://yourdomain.com"></script>

You may remove the ‘&r=http://yourdomain.com‘ if you want. The JavaScript will get the current page URL in this case.

Reddit

Reddit has nice buttons available. With small size, big size and even with the ET ;-)

Reference: http://www.reddit.com/buttons/

In this page you can choose your preferred option and just check the code. It also have great customization options, all done via JavaScript. The basic code for a big button is this:

<script type="text/javascript" src="http://reddit.com/static/button/button2.js"></script>

If you change to button1.js, you’ll have a small button. If you change to button3.js you’ll have their ET logo. And you can customize it with the following options:

<script type="text/javascript">reddit_url='[URL]'</script>
<script type="text/javascript">reddit_target='[COMMUNITY]'</script>
<script type="text/javascript">reddit_title='[TITLE]'</script>
<script type="text/javascript">reddit_newwindow='1'</script>
<script type="text/javascript">reddit_bgcolor='[COLOR]'</script>
<script type="text/javascript">reddit_bordercolor='[COLOR]'</script>

Digg

Digg is another social media that has nice buttons. It’s a little bit different though. It’s based in one basic code, and the details are customized directly in the A tag.

Reference: http://about.digg.com/button

This is the basic JavaScript code:

<script type="text/javascript">
(function() {
var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];
s.type = 'text/javascript';
s.async = true;
s.src = 'http://widgets.digg.com/buttons.js';
s1.parentNode.insertBefore(s, s1);
})();
</script>

In order to place the button, you have to add the following tag where you want:

<a class="DiggThisButton DiggMedium"></a>

All options should be added to this last tag. For example, to show a small button you can simply change the class to “DiggThisButton DiggCompact“. If you want to customize the URL, you can use the following:

<a class="DiggThisButton DiggMedium" href="http://yourdomain.com"></a>

Conclusion

In this quick post we saw some social media buttons. I chose the ones that have the counter because they provide a instant feedback about your post/page popularity. If you want to implement them, it’s a good idea to check the references I mentioned.

Share Button

Oscar Dias

I work with software development since 2003 and I've used different programming languages. Currently I work with PHP in my own company Softerize.

  • Pingback: Tip: How to Use the Oficial Twitter Tweet Button | Oscar Dias - Personal Blog

  • http://www.dreamwavesofhope.com Maria

    I was searching for some codes to apply to my new website and this has helped me greatly. I thank you so much for your article and support.

  • http://www.gosudokuonline.com/ sudoku

    Youre so cool! I dont suppose Ive read anything like this before. So nice to find anyone with some authentic thoughts on this subject. realy thank you for beginning this up. this web site is something that’s wanted on the internet, someone with a little originality. helpful job for bringing one thing new to the internet!

  • Pingback: Digi auto links

  • Pingback: Facebook Hack