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.
1 comment