
When you post an article of any type on the web, it seems almost mandatory that you include “Tweet This!” and “Post to Facebook” links. Of course, you can get plugins that create sharing links automatically for most blog software (Sociable for Wordpress (this is what we use); Service Links for Drupal; Sexy Social Bookmark for Blogger; I could go on), and they usually cover more networks than Twitter and Facebook. However, some circumstances require a more do-it-yourself approach.
Adding “Share on Twitter” and “Post to Facebook” functionality to your web application is a snap! In this post you will learn:
- -How to prefill a tweet for your user
- -How to let your users share a link on Facebook, including page thumbnails and description
- -How to harness the power of bit.ly’s API for short URLs and click tracking
Share on Twitter

Use the following code to create a “Share on Twitter” link:
<a href="http://twitter.com/home?status=Add Sharing to Your Webapps - http://www.rtraction.com/blog/devit/add-sharing-to-your-webapps" target="_blank">Share on Twitter</a>
Share on Twitter
That was easy! Try replacing your link text with a Twitter button:
<a href="http://twitter.com/home?status=Add Sharing to Your Webapps -http://www.rtraction.com/blog/devit/add-sharing-to-your-webapps" target="_blank"><img src="shareontwitter.png" alt="Share on Twitter" /></a>

Twitter can’t make it much easier than that! When the user clicks on your button, they are brought to their familiar Twitter timeline, with the next tweet prefilled for them.

Facebook Share Link

Use the following code to create a “Post to Facebook” link:
<a href="http://facebook.com/sharer.php?u=http://www.rtraction.com/blog/devit/add-sharing-to-your-webapps" target="_blank">Post to Facebook</a>
Post to Facebook
Too easy! Now replace the text with a nifty Facebook button:
<a href="http://facebook.com/sharer.php?u=http://www.rtraction.com/blog/devit/add-sharing-to-your-webapps" target="_blank"><img src="posttofacebook.png" alt="Post to Facebook" /></a>

When the user clicks on your “Post to Facebook” button, a new window pops up, prompting them to share the link. The user can optionally update their Facebook status while they are at it.

What about Page Thumbnails?
That looks pretty good, but it could use a little more flair. Facebook attempts to add a thumbnail and a description to your link. Facebook scours your page for <img> tags, and uses those for thumbnail options, in the order that they appear on the page. If you want a screenshot of part of your webapp to be the first choice, you’ll have to put the following code near the top (before any other <img> tags) of your page:
<img src="screenshot.jpg" style="display: none" alt="" />
This will not be visible to users due to the inline CSS, but Facebook will pick it up.

What about Page Description?
Facebook uses the page’s meta description. Make sure the following code is present in the header of your page, between <head> and </head>:
<meta name="description" content="rtraction - Add Sharing to Your Webapps - Twitter and Facebook sharing links are a snap to build!" />
Now your Facebook share is complete with a thumbnail and description.

Shortened URLs with Bit.ly
Bit.ly’s API makes it easy to dynamically create shortened URLs. A big advantage of this is that you can make use Bit.ly’s click tracking.

You can learn how to use the Bit.ly API on your own, or use an existing library. There is a DLL file for .NET projects to use Bit.ly. This is untested by us, but the Hashbangcode Bit.ly PHP Class looks like a promising PHP solution. Let us know in the comments if you have tried this library!
If you have any other tips for creating share links, let us know in the comments.
gavinblair
As someone who loves to help others,
Gavin is not easily ruffled. Poorly designed software is one of his few pet peeves, and we can count on Gavin to find solutions and make improvements in all kinds of applications. In his own words, he likes to "fight the good fight for quality code." He loves food and finding adventure in the kitchen, cooking with his wife. On one occasion, the combination of a white-hot skillet and no ventilation led to so much smoke they had to stop, drop and roll - but did end up eating "the best blackened catfish po'boy you can imagine."