It’s not enough to simply optimize your website for search engines like Google. A truly successful online marketing strategy needs to be more comprehensive and incorporate the power of online communities.
Web 2.0 thrives on community interaction, and social bookmarking is a key element. Make it effortless for visitors to bookmark your site. However, compiling the best social bookmarking sites and their information can be tedious.
This simple JavaScript code adds the top 20 social bookmarking sites to your webpage. Just paste it into your site’s code, and the icons will appear as shown.
Remember that loading multiple small images can slow down your website. It’s more efficient to combine related images into one and use CSS to position them correctly.
This is the provided JavaScript code:
<br /><b class="Kw">function</b> SocialBookmarks(){<br /> <b class="Kw">var</b> holder = document.getElementById("SocialButtonsPlace");<br /> <b class="Kw">if</b> (!holder) <b class="Kw">return</b>;<br /> <br /> <b class="Kw">var</b> title = encodeURIComponent(document.title);<br /> <b class="Kw">var</b> url = encodeURIComponent(location.href);<br /> /* these are the social bookmaking sites' icons ,ordered by rank, you can remove a line<br /> but don't change the 'pos' so icon would show up correctly */<br /> <b class="Kw">var</b> socials = [<br /> {'name':'Yahoo','pos':-16,'url':'http://myweb2.search.yahoo.com/myresults/bookmarklet?t='+title+'&u='+url},<br /> {'name':'Google','pos':-32,'url':'http://www.google.com/bookmarks/mark?op=edit&bkmk='+url+'&title='+title},<br /> {'name':'Live','pos':-48,'url':'https://favorites.live.com/quickadd.aspx?url='+url+'&title='+title},<br /> {'name':'Facebook','pos':-64,'url':'http://www.facebook.com/sharer.php?u='+url+'&t='+title},<br /> {'name':'Digg','pos':-80,'url':'http://digg.com/submit?phase=2&url='+url+'&title='+title},<br /> {'name':'Ask','pos':-96,'url':'http://myjeeves.ask.com/mysearch/BookmarkIt?v=1.2&t=webpages&url='+url+'&title='+title},<br /> {'name':'Technorati','pos':-112,'url':'http://technorati.com/faves?sub=addfavbtn&add='+url+'&title='+title},<br /> {'name':'Delicious','pos':-128,'url':'http://del.icio.us/post?url='+url+'&title='+title},<br /> {'name':'StumbleUpon','pos':-144,'url':'http://www.stumbleupon.com/submit?url='+url+'&title='+title},<br /> {'name':'Squidoo','pos':-160,'url':'http://www.squidoo.com/lensmaster/bookmark?'+url},<br /> {'name':'Propeller','pos':-176,'url':'http://www.propeller.com/submit/?U='+url+'&T='+title+'&C='+title},<br /> {'name':'Slashdot','pos':-192,'url':'http://slashdot.org/bookmark.pl?url='+url+'&title='+title},<br /> {'name':'Reddit','pos':-208,'url':'http://reddit.com/submit?url='+url+'&title='+title},<br /> {'name':'Fark','pos':-224,'url':'http://cgi.fark.com/cgi/fark/submit.pl?new_url='+url+'&new_comment='+title+'&linktype='},<br /> {'name':'Newsvine','pos':-240,'url':'http://www.newsvine.com/_wine/save?u='+url+'&h='+title},<br /> {'name':'Furl','pos':-256,'url':'http://www.furl.net/storeIt.jsp?t='+title+'&u='+url},<br /> {'name':'Blinklist','pos':-272,'url':'http://www.blinklist.com/index.php?Action=Blink/addblink.php&Url='+url+'&Title='+title},<br /> {'name':'dzone','pos':-288,'url':'http://www.dzone.com/links/add.html?url='+url+'&title='+title},<br /> {'name':'Magnolia','pos':-304,'url':'http://ma.gnolia.com/bookmarklet/add?url='+url+'&title='+title},<br /> {'name':'SWiK','pos':-320,'url':'http://stories.swik.net/?submitUrl&url='+url}<br /> ];<br /> <br /> <b class="Kw">for</b>(<b class="Kw">var</b> i=0; i<socials.length; i++) <br /> holder.innerHTML = holder.innerHTML + '<li><A <b class="Kw">class</b>=\'SocialButton\' style=\'background-position:0 '+socials[i].pos+'px\' href=\''+socials[i].url+'\' title=\''+socials[i].name+'\' target=\'_blank\'> </A></li>';<br />}<br /><br />/* <b class="Kw">This</b> call can be placed <b class="Kw">in</b> body onload event */<br />SocialBookmarks();<br />
Place this CSS code in your HTML head or CSS file:
#SocialButtonsPlace { list-style:none; /* must do - Browsers WORLD WAR!*/ margin:0; padding: 0; } #SocialButtonsPlace Li{ float:left; } .SocialButton { display:block; height:16px; width:16px; line-height:16px; margin:2px; text-decoration:none; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikWuhPxjyWXhmT9ax0HQ-a-A1tkGL_hUK5WnSPdXu2uN9C1YsuEJMb5YyVD3rXtuMX4W3bRQDMMT5pWzXxBe5ezHun2B8uVxJzud3WwYjhWrScnKfoB8e3hT4kt7vqlxJzyzhFqLxcQf5_/s400/bar.gif); }
Then, create a placeholder UL element where you want the icons to appear: `
“SocialButtonsPlace”>
`
Finally, ensure you’ve saved the bar image and uploaded it to your site. Update the CSS code with the correct image location. Consider using an Image Map to display the icons horizontally or vertically, defining clickable regions as needed.