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.
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 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.
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';“.
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 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:
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.
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 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.
You can use ‘data-button-style=”small-count”‘ for the small button with counter.
StumbleUpon has one of the best ways to create the button code. All you have to do it check this website:
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:
Reddit has nice buttons available. With small size, big size and even with the ET
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:
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.
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>
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.