Popular Social Sharing and Bookmarking Widgets and Buttons for WordPress

Interactive Online > Blog  > Web Design  > Popular Social Sharing and Bookmarking Widgets and Buttons for WordPress

Popular Social Sharing and Bookmarking Widgets and Buttons for WordPress

One of the most popular support emails that we receive from readers and bloggers is how do we display and were do we get the social bookmarking widgets that you can see within our posts. For most the answer will probably be obvious and simple (think of this page as your one-stop-shop for sharing widgets […]


One of the most popular support emails that we receive from readers and bloggers is how do we display and were do we get the social bookmarking widgets that you can see within our posts. For most the answer will probably be obvious and simple (think of this page as your one-stop-shop for sharing widgets instead), but of course, if you are just starting out it can be understandably tricky finding and implementing the code.

What we have done is collected the code snippets from the most popular social bookmarking and sharing services (Digg, Mixx, Reddit, Delicious, Stumbleupon, Google Buzz and Facebook), we also have snippets from popular design niche services (DZone, Design Float, Design Bump and The Web Blend) and finally collected code for sharing via Twitter (Twittley and TweetMeme). Unfortunately not all services offer the option of both large and compact widgets, were we could, both are made available.
If you do feel adventurous, you can click the further options links for personalized customization.

All of the widgets, buttons and badges below can be copied and pasted directly into a WordPress post, or alternatively they can be placed anywhere within the WP theme (single.php, index.php, header.php…). No knowledge of coding is required at all, just pick the widget you need, copy it and paste it, and yes, it really is that easy.

The icons below are from the free Vector Social Media Icon Set designed by Icondock

Digg IconDigg This Smart Button

The Digg button, also known as the “Digg This” button, support both a Smart Digg button and a static Digg button, they do recommend that you use the Smart button, as it displays a real-time Digg count and is far more customizable. For more customisation options, click here: Digg This Smart Button.

Digg Compact Button Code

This code generates a button like this ↓

1
<script src="http://widgets.digg.com/buttons.js" type="text/javascript"></script><a class="DiggThisButton DiggCompact"></a>
Digg Large Button Code

This code generates a button like this ↓

1
<script src="http://widgets.digg.com/buttons.js" type="text/javascript"></script><a class="DiggThisButton DiggMedium"></a>

Reddit IconReddit Button

The Reddit button is the smart way to get your content submitted to and discussed on Reddit. Below you will find the code snippets fot the most popular buttons, for further options, click here: Reddit Button.

Reddit Compact Button Code

This code generates a button like this ↓

1
<script type="text/javascript" src="http://www.reddit.com/button.js?t=1"></script>
Reddit Large Button Code

This code generates a button like this ↓

1
<script type="text/javascript" src="http://www.reddit.com/button.js?t=2"></script>

StumbleUpon IconStumbleUpon Button

Below you will find the code snippets fot the most popular StumbleUpon buttons, further button options and variations are available here: StumbleUpon Buttons.

StumbleUpon Compact Button Code

This code generates a button like this ↓

1
<script src="http://www.stumbleupon.com/hostedbadge.php?s=1"></script>
StumbleUpon Large Button Code

This code generates a button like this ↓

1
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>

Facebook IconFacebook Share Widget

Below you will find the code snippets fot sharing articles and posts via Facebook, for further options, click here: Facebook Share Widgets.

Facebook Compact Widget Code

This code generates a button like this ↓

Share

1
<a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
Facebook Large Widget Code

This code generates a button like this ↓

Share

1
<a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

Mixx IconMixx Buttons & Badges

Below you will find the code snippets fot sharing with Mixx, for further button options, click here: Mixx Share Widgets.

Mixx Compact Badge Code

This code generates a button like this ↓

Add to Mixx!

1
2
<a href="http://www.mixx.com/" onclick="window.location='http://www.mixx.com/submit?page_url='+window.location; return false;">
<img src="http://www.mixx.com/images/buttons/mixx-button3.png" alt="Add to Mixx!" border="0" /></a>
Mixx Large Badge Code

This code generates a button like this ↓

Add to Mixx!

1
2
<a href="http://www.mixx.com/" onclick="window.location='http://www.mixx.com/submit?page_url='+window.location; return false;">
<img src="http://www.mixx.com/images/buttons/mixx-button8.png" alt="Add to Mixx!" border="0" /></a>

Twitter IconTweetMeme Button – Twitter Share Widget

The TweetMeme Button is by far the most popular Twitter sharing widget, you can click here for further widget options: TweetMeme Buttons & Widgets.

TweetMeme Compact Button Code

This code generates a button like this ↓

1
2
3
4
<script type="text/javascript">
tweetmeme_style = 'compact';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
TweetMeme Large Button Code

This code generates a button like this ↓

1
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>

Twitter IconTwittley Button – Twitter Share Widget

The Twittley Button offers many color variations and options, visit here for more: Twittley Buttons & Plugin.

Twittley Large Button Code

This code generates a button like this ↓

1
<script src='http://twittley.com/button/button.js'/></script><noscript>Your browser does not support JavaScript! Instead, you can visit <a href="http://twittley.com/">Twittley.com</a> for all of your <a href="http://twittley.com/">Twitter social networking</a> needs.</noscript>

Dzone IconDZone Buttons

The options of dzone_url, dzone_title, and dzone_blurb are optional. If you leave out the url and title, the widget will pick them up from the page the widget is currently on. For further widget options: DZone Buttons.

DZone Compact Button Code

This code generates a button like this ↓

1
2
3
4
5
<script type="text/javascript">var dzone_url = '[url]';</script>
<script type="text/javascript">var dzone_title = '[title]';</script>
<script type="text/javascript">var dzone_blurb = '[description]';</script>
<script type="text/javascript">var dzone_style = '2';</script>
<script language="javascript" src="http://widgets.dzone.com/links/widgets/zoneit.js"></script>
DZone Large Button Code

This code generates a button like this ↓

1
2
3
4
5
<script type="text/javascript">var dzone_url = '[url]';</script>
<script type="text/javascript">var dzone_title = '[title]';</script>
<script type="text/javascript">var dzone_blurb = '[description]';</script>
<script type="text/javascript">var dzone_style = '1';</script>
<script language="javascript" src="http://widgets.dzone.com/links/widgets/zoneit.js"></script>

Design Bump IconDesignBump

Make it easy for your readers to ‘Bump’ your work by including the buttons below next to each article, for further options, click here: DesignBump Buttons.

DesignBump Large Button Code

This code generates a button like this ↓

1
<script type="text/javascript">url_site='<?php the_permalink(); ?>'; </script> <script src="http://designbump.com/sites/all/modules/drigg_external/js/button.js" type="text/javascript"></script>

Web Blend IconThe Web Blend Widget

The Web Blend is a community for designers, developers and tech junkies that keeps you current with a summary of the latest in web related news and trends.

The Web Blend Large Widget Code

This code generates a button like this ↓

1
<script type="text/javascript">url_site='<?php the_permalink(); ?>';</script><script src="http://thewebblend.com/sites/all/modules/drigg_external/js/button.js" type="text/javascript"></script>

Design Float IconDesignFloat Tools

“Float” your articles and blog posts with these snippets, you can click here for further widget options: DesignFloat Tools.

DesignFloat Compact Button Code

This code generates a button like this ↓

1
2
<script type="text/javascript">submit_url = '<?php the_permalink() ?>';</script>
<script type="text/javascript" src="http://www.designfloat.com/evb/button.php"></script>
DesignFloat Large Button Code

This code generates a button like this ↓

1
2
<script type="text/javascript">submit_url = '<?php the_permalink() ?>';</script>
<script type="text/javascript" src="http://www.designfloat.com/evb2/button.php"></script>

Delicious IconDelicious Save Buttons

Unlike the rest of the widgets on this page, Delicious to not offer a widget that can display real-time save count. For more information, click here: Delicious Share Link Options.

Delicious Share Button

This code generates a button like this ↓

Delicious

1
2
<img src="http://static.delicious.com/img/delicious.small.gif" height="10" width="10" alt="Delicious" />
<a href="http://delicious.com/save" onclick="window.open('http://delicious.com/save?v=5&noui&jump=close&url='+encodeURIComponent('<?php the_permalink() ?>')+'&title='+encodeURIComponent('<?php the_title() ?>'),'delicious', 'toolbar=no,width=550,height=550'); return false;"> Bookmark this on Delicious</a>

Google Buzz IconGoogle Buzz Widget/Counter

Replace YOURSERNAME below with, well, your Google Buzz username, you can click here for further options: Google Buzz Widget.

Google Buzz Widget Code

This code generates a widget like this ↓

1
2
3
<script type="text/javascript"> if (typeof jQuery == 'undefined') { document.write('<script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>'); }</script>
<script type="text/javascript" language="javascript" src="http://www.buzzcounter.net/widget/apaulandrew?background=ffffff&buzzbackground=ffffff&text=333333&smalltext=c0c0c0&link=17375e"></script><script type="text/javascript">$.Widget.get();</script><div id="buzzwidget-footer"><a id="buzz-logo" href="http://www.buzzcounter.net/">Google Buzz</a><a id="buzzcounter-logo" href="http://www.buzzcounter.net/">Buzz widget</a></div>
<script type="text/javascript">$.Widget.set();</script>

You might also like…

15 CSS3 Navigation and Menu Tutorials and Techniques »
20 CSS3 Tutorials and Techniques for Creating Buttons »
24 CSS (in some cases with jQuery) Navigation and Menu Tutorials »
22 CSS Button Styling Tutorials and Techniques »
CSS References, Tutorials, Cheat Sheets, Conversion Tables and Short Codes »
50 Useful Tools and Generators for Easy CSS Development »
50 Essential Web Typography Tutorials, Tips, Guides and Best Practices »
The Blueprint CSS Framework – Tutorials, How-to Guides and Tools »
20+ Resources and Tutorials for Creative Forms using CSS »


(read full article on source site)
Free Website for Your Dental Practice
See why our dental practice websites exceed the features & value of your typcial dentist website.
  • No cookie-cutter websites
  • No duplicate content
  • Custom built with a unique look and feel
  • Unique content written by professional writers
  • Set yourself apart from other dentists
  • The key to your online success!
* we never share your e-mail with third parties.