Add Mashable Like Social Bar in Your Blog is the most popular social media news and web tips site. All features of the site is attractive. Social bar is one of them. It includes Facebook like, Google plus, Twitter, subscribe via Email, RSS Feed, Pinterest button. The main purpose of using social bar like Mashable is to save space of your website. Today I am going to share a Mashable Style Social Subscription Widget which helps you to add a Mashable like social bar in your blog. I am also using this widget for my blog. I found it very simple and attractive. If you use this widget your social bar will be like this –

mashable like social bar

Features of the Widget

  • Facebook like button
  • Google Plus Recommendation
  • Twitter “Follow” Badge
  • RSS, Pinterest, Twitter, G+ icon with links
  • Feedburner Email subscription box

Read : Add Facebook Recommendation Bar to WordPress

Add a Stylish Email Subscription Form Under Every Post

How to Add Mashable Style Social Subscription Widget

Now all you need to do is just copy the following code and follow the simple steps

#email-news-subscribe .email-box input.subscribe{
background: #FFCA00;
<!--begin of social widget--></pre>
<div style="margin-bottom: 10px;">
<div id="RTB-mashable-bar">
<!-- Begin Widget -->
<div class="fb-likebox"><!-- Facebook --> <iframe style="border: none; overflow: hidden;" src="//;send=false&amp;layout=standard&amp; width=200px&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp; font&amp;height=100px&amp;appId=234513819928295" frameborder="0" scrolling="no" width="320" height="240"></iframe></div>
<div class="googleplus">
<!-- Google -->Recommend us on Google!
<div class="g-plusone" data-size="medium"></div>
<div class="twitter"><!-- Twitter --> <iframe style="width: 300px; height: 20px;" title="" src="; align=&amp;button=blue&amp;id=twitter_tweet_button_0&amp; lang=en&amp;link_color=&amp;screen_name=roadtoblogging&amp;show_count=&amp; show_screen_name=&amp;text_color=" frameborder="0" scrolling="no" width="320" height="240"></iframe></div>
<div id="other-social-bar">

<!-- Other Social Bar -->
<ul class="other-follow">
	<li class="my-rss"><a title="RSS feed" href="" rel="nofollow" target="_blank">RSS</a></li>
	<li class="my-pin"><a title="Pinterest" href="" rel="nofollow" target="_blank">Pinterest</a></li>
	<li class="my-linkedin"><a title="Twitter" href="" rel="nofollow" target="_blank">Twitter</a></li>
	<li class="my-gplus"><a title="G+" href="" rel="nofollow" target="_blank">G+</a></li>
<div id="email-news-subscribe">

<!-- Email Subscribe -->
<div class="email-box"><form action="" method="post" onsubmit="'', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input id="email" class="email" style="width: 140px; font-size: 12px;" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" type="text" name="email" value="Enter Your Email here.." /> <input type="hidden" name="uri" value="roadtoblogging" /> <input type="hidden" name="loc" value="en_US" /> <input class="subscribe" type="submit" name="commit" value="Subscribe" /></form></div>
<div id="mashable" style="background: #e3e3e3; border: 1px solid #CCC; border-top: 1px solid white; padding: 1px 8px 1px 3px; text-align: right; border-image: initial; font-size: 10px;"><span class="author-credit" style="font-family: Arial, Helvetica, sans-serif;"><a href="" target="_blank">Get This »</a></span></div>
<!-- End Widget -->

<!--end of social widget-->

Important Changes in the code:

  • Replace roadtoblogging with your Facebook username
  • Replace roadtoblogging with your twitter username
  • Replace roadtoblogging with your Feedburner title. Your Feedburner title is the word added at the end of your Feedburner link. Example:
  • Replace with your feedburner link.
  • Replace roadtoblogging with your Twitter profile link
  • Replace Google+Profile Link with your Google Plus profile link

Now follow these steps :

1. Go to Dashboard > Appearance > Widgets > Available Widgets.
2. Drag Text widget into a sidebar.
3. Paste in the code.
4. Save and you are done.

Now check your blog. You have an amazing social bar widget like Mashable in your blog. Hopefully this bar will help you to increase your fans, followers and readers. Do let us know if you face any difficulties while implementing this widget.

Sharing is Caring
Istiak Rayhan

Istiak Rayhan is the founder of, a blog that aims to make bloggers' journey easier. Istiak loves to help newbie bloggers to build a better blog. Here's more about him.