Continuing on from my previous article on social networking integration - which can be found here - discussed how we can integrate Facebook Connect with users to expand the reach of your content by finding new users through personal contacts. This time around, I want to discuss social networking buttons, and the impact that they can have on your site, the cost/benefit analysis of having them, and how to integrate them into your blog on a post by post basis. I will provide the buttons as well!
Social networking buttons are designed to share your content with other users through social news sites. When a user submits a link to a social news site, it allows new readers to find your article and read it. This would potentially lead those new users to 'like' your content via social networking buttons as well. This is how you eventually build a readership and a reputation on the web. Which can lead to better search engine positioning and popularity.
Integrating these buttons is very easy. They take minutes to set up. All you need is a place on your page to put them, the button images, and the code to dynamically to create/vote up the article via social news website (I will provide all this information below).
The code for 4 popular social news websites can be found below. The $id and $urlTitle are PHP variables that I use to dynamically create links on a post by post basis. These can be any variables made in any other server side scripting language. The purpose of this dynamic URL loading is to save the link submitter time on writing in the URL and title when submitting the article, so I would advise it.
<a href = 'http://digg.com/submit?phase=2&url=http://www.whitbreaddesign.com/blog.php?post=$id-$urlTitle&title=$title' target = '_blank'>
<div class = 'postShareDiggButton'></div>
<a href = 'http://reddit.com/submit?url=http://www.whitbreaddesign.com/blog.php?post=$id-$urlTitle&title=$title' target='_blank'>
<div class = 'postShareRedditButton'></div>
<a href = 'http://www.facebook.com/sharer.php?u=http://www.whitbreaddesign.com/blog.php?post=$id-$urlTitle&title=$title' target='_blank'>
<div class = 'postShareFacebookButton'></div>
<a href = 'http://twitter.com/home?status=Reading%20this:http://www.whitbreaddesign.com/blog.php?post=$id-$urlTitle&title=$title' target='_blank'>
<div class = 'postShareTwitterButton'></div>
If you require the buttons as well, pop on over to 25icons.com and pick up the Social Media Networking Series Icon Set absolutely free! The set includes the 4 icons described in this post and many more.
Hope this information saves you time and gets you some pages views. If you have any comments or questions, please don't hesitate to ask below.