March 19, 2011
Posted by felix
Adding social features to your blog or website
Nowadays social features are more important than ever. This is why I decided to add a number of social features to this site and other projects I have started working on recently.
Now, the big question was which social features are important and how I can I integrate them as easily as possible. The most ubiquitous social sharing feature seems to be Facebook like button. Additionally, many sites offer “share on Facebook” and “post on Twitter” buttons, which I will discuss as well later in this article. Finally, I will also explain some points regarding other easier options using external service providers.
Facebook Like Button
A Facebook Like button can be integrated by visiting this Facebook page. Follow the instructions on the page titled as “Step 1″. Basically you have to enter the URL “to like” as well as some styling details. I entered some details for this very website www.schollmeier.info and got the following code snippet
Including this code in the HTML of this article yields the following:
Quite easy, isn’t it? Well, it gets easier.
Share on Facebook
Facebook offers a special URL that can be used to share any page on Facebook. The magic URL is called: http://www.facebook.com/sharer.php
However, without the proper parameter this link is not useful. The URL takes two parameters, u for the URL/link of the document to be shared, and t for the title of the document to be shared. So, if we wanted to create a button or link to share this blog on Facebook, the resulting code would be:
http://www.facebook.com/sharer.php?u=http://www.schollmeier.info&t=Bloggin la vida loca
If you want to include this link on your website, simply modify the two parameters. You can then use the <a> tag to create a sharing button or link. In our case this could look as follows:
Post on Twitter
Creating a post on Twitter button is as easy as creating a share on Facebook button. Twitter also offers a URL to directly post a status to Twitter. The link is simply:
As you can see, you are able to post a status by modifying the status parameter in the URL above. Knowing this you can create as many different buttons as you like, such as:
Other sharing options
Other options are also available, especially for webmasters that do not want to fiddle in their code. Personally, I like the service offered by AddToAny. It offers a number of options to customize the share button and you even have the option to pick from a large number of Add2Any plug-ins for Drupal, WordPress, etc.
I used the Add2Any form to create a quick share button for this very button and generated the following code:
<a href=”http://www.addtoany.com/share_save?linkurl=http%3A%2F%2Fschollmeier.info%2F2011%2F03%2F19%2Fadding-social-features-to-your-blog-or-website&linkname=Adding%20social%20features%20to%20your%20blog%20or%20website”><img src=”http://static.addtoany.com/buttons/share_save_171_16.png” width=”171″ height=”16″ border=”0″ alt=”Share”/></a>
<script type=”text/javascript”>
var a2a_config = a2a_config || {};
a2a_config.linkname = “Adding social features to your blog or website”;
a2a_config.linkurl = “http://schollmeier.info/2011/03/19/adding-social-features-to-your-blog-or-website”;
</script>
<script type=”text/javascript” src=”http://static.addtoany.com/menu/page.js”></script>
<!– AddToAny END –>
Implementing this code yields the following button:
An alternative good service is the AddThis which has the advantage – over Add2Any – that users have advanced analytics!
Icons & Co.
Finally, you will need some good icons if you do not want to use pre-packaged sharing services. Personally, I very much like the two icon sets by wpzoom. They offer two icon sets that are offered under the Creative Commons License for free, the social networking icon set and the developer icon set. Try them out, they are great!
Feel free to comment on this article or contact me directly if you have any questions.
No Comments Yet
You can be the first to comment!
Leave a comment