Add Sharing to Your Webapps
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>
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>
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.
Subscribe to: