I thought it could be useful to post some basic social bookmarking scripting. This is nothing flash, and you can do a lot more with the various APIs available for each site, however this gives a good basic starting point.
The code I have put here will simply open a new window/tab (depending on user browser settings) which will open at the specific social networking/bookmarking site with pre-formatted and written information as appropriate.
<?
$actual = [INSERT YOUR PAGE URL HERE];
// del.icio.us it
echo '<a href="http://del.icio.us/post?url=';
echo $actual;
echo '&title=';
echo $actual;
echo '" target="_blank">del.icio.us</a> ';
// digg it
echo '<a href="http://digg.com/submit?url=';
echo $actual;
echo '&title=';
echo $actual;
echo '" target="_blank">digg</a> ';
// facebook it
echo '<a href="http://www.facebook.com/sharer.php?u=';
echo $actual;
echo '" target="_blank">facebook</a> ';
// reddit
echo '<a href="http://reddit.com/submit?url=';
echo $actual;
echo '&title=';
echo urlencode($actual);
echo '" target="_blank">reddit</a> ';
// stumbleupon it
echo '<a href="http://www.stumbleupon.com/submit?url=';
echo $actual;
echo '&title=';
echo urlencode($actual);
echo '" target="_blank">stumbleupon</a> ';
// tweet it
echo '<a href="http://twitter.com/home?status=Check out ';
echo $actual;
echo ' " target="_blank">twitter</a> ';
// email it
echo '<a href="mailto:?subject=Check out ';
echo $actual;
echo '&body=Check out ';
echo $actual;
echo '.">email</a> ';
// blinklist it
echo '<a href="http://www.blinklist.com/index.php?Action=Blink/addblink.php&Description=';
echo urlencode($actual);
echo '&Url=';
echo urlencode($actual);
echo '" target="_blank">blinklist</a>';
// bluedot it
echo '<a href="http://bluedot.us/Authoring.aspx?u=';
echo $actual;
echo '&t=';
echo urlencode($actual);
echo '" target="_blank">bluedot</a>';
// magnolia it
echo '<a href="http://ma.gnolia.com/bookmarklet/add?url=';
echo $actual;
echo '&title=';
echo $actual;
echo '" target="_blank">magnolia</a>';
// netvouz it
echo '<a href="http://netvouz.com/action/submitBookmark?url=';
echo $actual;
echo '&title=';
echo urlencode($actual);
echo '" target="_blank">netvouz</a>';
// blogmarks it
echo '<a href="http://blogmarks.net/my/new.php?mini=1&simple=1&url=';
echo $actual;
echo '&title=';
echo urlencode($actual);
echo '" target="_blank">blogmarks</a>';
// simpy it
echo '<a href="http://www.simpy.com/simpy/LinkAdd.do?href=';
echo $actual;
echo '" target="_blank">simpy</a>';
// diigo it
echo '<a href="http://www.diigo.com/post?url=';
echo $actual;
echo '&title=';
echo urlencode($actual);
echo '" target="_blank">diigo</a>';
// yahoo it
echo '<a href="http://myweb2.search.yahoo.com/myresults/bookmarklet?u=';
echo $actual;
echo '&t=';
echo urlencode($actual);
echo '" target="_blank">yahoo!</a>';
?>
I have used a default variable $actual for this version in PHP, however you can easily alter this to contain just hard-coded HTML (I don’t know why you would exactly, as then you will have to code each page individually), also I have generated all the HTML within the PHP script as I have taken this from a larger script with more dynamic variables being referred to. Simplicity, if this is all you are wanting to do, would be to strip the
<?php....?> surrounds and all the echoes; replacing each $actual with <?php echo $actual; ?>.
To replace the links with icons, you can try some of the following sites to get social network/bookmarking icons.
- wpzoom.com – 21 free social bookmark icon sets
- outlawdesignblog.com – free social bookmark icons
- cssreflex.com – 15 free awesome bookmark icon sets
- designreviver.com – 6 free new social icons
- thedesignsuperhero.com – some cute heart-shaped social icons
- jonbishop.org – 27 excellent free social media icons
- or you can just Google using keywords such as “free, icon, social, bookmark” etc
Please read the terms of use for each set of icons, and comply with licensing requirements.
If you are using icons, you can create a simple hover effect by wrapping the links as so:
<div id="bookmarks">
...
// insert bookmark links here
...
</div>
inserting the following into your CSS file:
#bookmark a img {
opacity: 0.8;
alpha.opacity: 80;
}
and then adding the following to each img in your bookmarks links:
onmouseover="this.style.opacity=1; this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.8; this.filters.alpha.opacity=80"
For example, the following can be pasted into a blank document, and saved as an HTML document:
<html>
<head>
<style type="text/css" >
#bookmarks a img {
opacity: 0.8;
alpha.opacity: 80;
}
</style>
</head>
<body>
<div id="bookmarks">
<a href="http://whileloop.wordpress.com/2009/06/28/social-bookmark-generation/">
<img src="http://i572.photobucket.com/albums/ss166/ctwi001/blogging/whileloop/twitter.png" title="twitter" alt="tweet me" onmouseover="this.style.opacity=1; this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.8; this.filters.alpha.opacity=80" />
</a>
</div>
</body>
</html>
Copy this code to a new TextPad or NotePad document, save it as HTML, and then open it in your browser. This provides a twitter icon which highlights on mouse over. The link when it is clicked on brings you to this page.
I will respond to queries in the comments, so ask away if clarification is required (I hope I’ve been clear, yet succinct) or you want assistance with further extensions to what I have started here.
Image may be NSFW.
Clik here to view.
Image may be NSFW.Clik here to view.
