Abstract:
Create a widget for sharing your content on social networks.

Created by Peter Kankowski
Last changed
Filed under Web programming

Share on social sitesReddit Digg Delicious Buzz Facebook Twitter

Share buttons

There are ready-to-use buttons for sharing your content via social bookmarking sites. However, some of them take ages to load or are too different from the visual design of your page. So, you may want to create a custom sharing widget.

Each social network provide a simple URL interface for submissions:

  • Facebook: http://www.facebook.com/sharer.php?u=your_url&t=your_title
  • Twitter: http://twitter.com/home?status=your_status_message
  • Buzz: http://www.google.com/buzz/post?url=your_url&message=your_message
  • Digg: http://digg.com/submit?url=your_url&title=your_title
  • Delicious: http://delicious.com/save?v=5&noui&jump=close&url=your_url&title=your_title
  • Reddit: http://www.reddit.com/submit?url=your_url&title=your_title

The URL and title should be encoded with urlencode (PHP) or encodeURIComponent (JavaScript). For example: http://www.reddit.com/submit?url=http%3A%2F%2Fwww.strchr.com&title=My+site

Another consideration is page load time. When stored as separate image files, the icons for social sites are loaded in several HTTP requests (slow!). You should join the icons into one file. There are two popular techniques for this: CSS sprites and data URIs.

If images are off, no alternative text will be shown for a CSS sprite. There are tricks for “Foreground Sprites”, but they don't work well, because CSS background images are not meant for buttons. Data URIs have another problem: they are not supported by old browsers (particularly, IE 7). So, old good image maps are used in the following example. They work everywhere without gimmicks.

Putting it all together:

function social_icons($title) {
	$services = array(
		'Reddit' => 'http://www.reddit.com/submit?url=%1$s&title=%2$s',
		'Digg' => 'http://digg.com/submit?url=%1$s&title=%2$s',
		'Delicious' => 'http://delicious.com/save?v=5&noui&jump=close&url=%1$s&title=%2$s',
		'Buzz' => 'http://www.google.com/buzz/post?url=%1$s&message=%2$s',
		'Facebook' => 'http://www.facebook.com/sharer.php?u=%1$s&t=%2$s',
		'Twitter' => 'http://twitter.com/home?status=Now reading %1$s',
	);
	
	$title = urlencode($title);
	$url = urlencode('http://' . $_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI']);
	
	echo '<div align="center"><img src="ico/social_256.png" ' .
		'width="116" height="16" alt="Share on social sites" usemap="#social" border="0">';
	echo '<map name="social">';
	$i = 0;
	foreach($services as $name => $submit_fmt) {
		echo '<area share="rect" coords="' . $i . ',0,' . ($i + 16) . ',16" ' .
				'href="' . sprintf($submit_fmt, $url, $title) . '" ' .
				'alt="' . $name . '" title="Share on ' . $name . '"> ';
		$i += 20;
	}
	echo '</map></div>';
}

Your can see the widget in action in the right upper corner of this page. By using it on your site, you can spread the news about your articles and attract more readers.

Peter Kankowski
Peter Kankowski

About the author

Peter is the developer of Aba Search and Replace, a tool for replacing text in multiple files. He likes to program in C with a bit of C++, also in x86 assembly language, Python, and PHP.

Created by Peter Kankowski
Last changed

1 comment

ace,
Really brilliant! I've turned off both JS and images to try and the links are there as they should be.

Your name:


Comment: