Adding Web Share Widgets to Your Site

, ,
Want to master JavaScript in a week? Example based, to the point. Xah JavaScript Tutorial.

These days, there are lots of websites that have tiny icons that allow readers to add the article to blog sites, or bookmark sites, social networking sites, such as Facebook, blogger, Twitter, delicious, digg, stumble upon, etc. It looks like this:

Bookmark and Share

Sites that show such share widget include times.com, nytimes.com, cnn.com, usatoday.com, washingtonpost.com. You can just go to news.google.com and click on news articles to arrive at a site and look at their share widget. Here's some example of tech sites that use such share widget: blog.wolfram.com, arstechnica.com, slashdot.org, tomshardware.com, etc.

Is there a sharing widget plug-in for web masters?

If you look at their sharing widgets on major sites, looks like most are home cooked.

Adding A Share Widget To Your Website

Here are some share widget services i found:

I tried the addthis.com one. It's quite simple. In 1 min you get this code:

<a class="addthis_button"
 href="http://www.addthis.com/bookmark.php?v=250&amp;username=xa-4b825887460aedf2">
<img src="http://s7.addthis.com/static/btn/v2/lg-share-en.gif"
 width="125" height="16" alt="Bookmark and Share" style="border:0"/></a>
<script type="text/javascript"
src="http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4b825888888aedf8">
</script>

Cook Your Own Share Widget

Actually it is easy to create your own links. All the little icons you can pull. Most if not all these social networking sites have API that lets you submit sites, pretty much just like this: 〔http://somebookmark .com/submit?url=http://example.org/nice_article.html〕, though the URL after the question mark needs to be Percent encoded.

Here's the raw HTML you need to cook you own. The following shows some examples.

icon https://twitter.com/favicon.ico https://twitter.com/share?_=1300906220374&count=none&text=yourPageTitle&url=http%3A%2F%2Aexample.com%2A&via=xah_lee icon http://www.facebook.com/favicon.ico http://www.facebook.com/sharer.php?u=example.com%2F icon http://reddit.com/favicon.ico http://reddit.com/submit?url=http%3A%2F%2Aexample.com%2A icon http://news.ycombinator.com/favicon.ico http://news.ycombinator.com/submitlink?u=http%3A%2F%2Aexample.com%2A icon http://delicious.com/favicon.ico http://delicious.com/save?url=http%3A%2F%2Aexample.com%2A icon http://stumbleupon.com/favicon.ico http://stumbleupon.com/submit?url=http%3A%2F%2Aexample.com%2A icon http://slashdot.org/favicon.ico http://slashdot.org/bookmark.pl?url=http%3A%2F%2Aexample.com%2A

If your favorite site is not shown above, the quickest way to find out the submit URL syntax is by using one of the share widget and look at the URL.

Should Your Site Have A Share Widget?

One decision i have to make is whether my site should have such share widgets. It might be just a temporary fad for teens. Blogs began with such a perception, but today they are important tool in communication with major world impact. Web syndication (RSS/Atom) had such a perception too, when it began in about 1997, but is today a widely used standard.

Majority of people who use the web probably do not use any of the social networking or blog or bookmark sites. But a minority, probably hundreds of millions, do. Having a link right there to let them talk about a article is convenient. So, from a tool point of view, it is really good to have such a share widget. A important benefit for the web site owner is that it certainly does increase your traffic, when your article is discussed about in some site.

blog comments powered by Disqus