If you want to make a social bar for your site, I would recommend the addthis sharing platform. It is very easy to use and has many options so that you can have a personalized social bar. In most cases, you would like 2 or 3 sharing buttons (e.g. facebook, twitter), an email and a print button.
Let’s say that you want to make a social bar that has a facebook icon, a twitter icon, a more icon (that allows you to share your page sith all the 313 services that addthis supports), a print and an email icon. You could use icons from addthis, or (better) use your own. To use addthis you simply call its js script (you can get it from the addthis website) and then simply add a class to your link or image. For example:
<a class="addthis_button_facebook"> <img src="/images/gt/fb.png" alt="" title="Send to Facebook " /> </a>
For every service there is a class that you could use and utilize this functionality. It is that simple. Addthis has a rich Client API and the new Analytics API which provides statistics for your pages and their “sharing” activity.
After you created your social bar, you want to make some changes in your page meta, so that when a visitor shares your page with facebook you can control the title, description and thumb url properties that facebook uses when a page is shared. Facebook requires that you add three (at least) meta tags to define these properties for your page. You can read about it in detail here but the three basic meta are:
<meta property="og:title" content="CodingStill blog" /> <meta property="og:description" content="CodingStill is an awesome blog!" /> <meta property="og:image" content="http://codingstill.com/fb_share.jpg" />
One thing that you need to know is that facebook has some restriction about the image dimensions. The thumbnail’s width AND height must be at least 50 pixels, and cannot exceed 130×110 pixels. The ratio of both height divided by width and width divided by height (w/h, h/w) cannot exceed 3.0. These restrictions aren’t applied every time but it is good to follow them.
One important thing to keep in mind is that the sharing service of facebook has a caching mechanism so if you’re trying to debug your site with these meta properties you probably view your cached version of your page. To avoid caching you can use the URL Linter, a page where you can test your page and see its properties with no caching applied here. Your page will remain cached for a few days (maybe a week). If you really want to reset the cache you have to change the URL of your page. But this action might not be good since the original URL is already been shared, liked, etc.
Other sharing services use the more common meta, such as meta description and meta keys. If you put in these tags an id and a runat=”server” attribute you get System.Web.UI.HtmlControls.HtmlMeta objects and can control them in code behind and set the content property via code. But there is a catch here, if the string value you set in the content property has the new line character or (worse) the ” character, asp.net will not handle these characters differently but will just put then in your markup and ruin it. So, you have to take care of that by your self and handle (a.k.a. remove) those characters.
