Twitter and Facebook Mashable Fanbox for Blogger

Twitter and Facebook Mashable Fanbox for Blogger


twitter and facebook
Visitors most favorable Social Networking Media is Facebook and Twitter. So I have tried to mash up those two famous Social Media Service in one widget and successfully applied it with little twitter bird animation. This is my first Twitter and Facebook mashable widget. I hope my readers will like this. 

Live Demo

Step 1 Log in to your Blogger account and Go to your Blogger Dashboard

Step 2 Go to your Layout tab.

Step 3 Click on "Add a Widget" then select "HTML/JavaScript" Widget.

Step 4 Now Copy the below code and paste it in "HTML/JavaScript" Widget.

<style type="text/css">
#bstf-box { background-color:#04BDFA; border-bottom:1px solid #ccc; height: 270px; position:relative; margin-bottom:10px; width:292px; }
#bstf-box:before,#bstf-box:after{ background:#f7f7f7; border:1px solid #aaa; border-top:none; bottom:-3px; content:""; height:1px; left:2px; position:absolute; right:2px; }
#bstf-box:after { bottom:-5px; box-shadow:0 0 2px #aaa; left:4px; right:4px; }
/***** ******/
.twitterpage { height: 34px; overflow: hidden; }
<div id="bstf-box">
<object type="application/x-shockwave-flash" data="" width="290" height="80"><param name="movie" value=""></param><param name="allowscriptaccess" value="always"></param><param name="menu" value="false"></param><param name="wmode" value="transparent"></param><param name="flashvars" value="username=BloggerSpice"></param><a href="" title="bloggerspice">bloggerspice</a><embed src="" type="application/x-shockwave-flash" allowscriptaccess="always" width="180" height="80" menu="false" wmode="transparent" flashvars="username=BloggerSpice"></embed></object>
<div class="twitterpage"><iframe allowtransparency="true" frameborder="0
" scrolling="no" src="//" style="background: #f6f6f6; border-color: #CCCCCC; border-style: solid; border-width: 0 1px; height: 20px; padding: 7px; width: 276px;"></iframe></div>
<iframe src="//;width=292&amp;
height=200&amp;show_faces=true&amp;stream=false&amp;header=false&amp;" style="border:none; overflow:hidden; width:292px; height: 160px;"></iframe>

Note: Don’t Change any code then it won’t work.


  • Replace BloggerSpice with your Twitter username or ID
  •  Replace BloggerSpice with your Facebook username or ID 

Step 5 Save your widget and you are done!

Post a Comment

thank you so much I like this...

this is really coollllllll. thanq

Omar Ali 1/19/2013

this is simple and nice...thanks

Facebook Group Community Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form


Email *

Message *