Saturday, December 1, 2012

Sliding Facebook Like box and Twitter Stream Widget for your Blog using jQuery

Almost all the Blogs on the internet put up the Facebook like box and Twitter Timeline stream for connecting with their viewers on social networks. But giving separate space for both eats up a lot of real estate of your Blog. So we have designed a Sliding Widget which will put both of these Social Widgets at place of one, using jQuery Sliding effect.
So save your sidebar's space by adding this amazing Widget to your Blog. Just download this code, make a few changes described below and add the widget. See DEMO here.



  Javascript :  


$(document).ready(function()
{
$(".tab").click(function()
{
var x=$(this).attr('id');
if(x=='twitter')
{
$("#fb").removeClass('select');
$("#twitter").addClass('select');
$("#fbbox").slideUp();
$("#twitterbox").slideDown();
}
else
{
$("#twitter").removeClass('select');
$("#fb").addClass('select');
$("#twitterbox").slideUp();
$("#fbbox").slideDown();
}); });


  CSS code :  


body{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
#container{
width:260px; // Adjust this Width as per your need
border:solid 1px #eeeeee;
}
#tabbox{
height:30px;
}
#panel{
background-color:#FFF;
height:260px;
}
.tab{
background: #dedede;
display: block;
height: 30px;
line-height: 30px;
text-align: center;
width: 130px; //Make it exact half of the width used above
float:left;
font-weight: bold;
}
.select{
background-color:orange;
}
#fbbox{
height:260px; //Keep this height , same as in Facebook like box
}
#twitterbox{
height:260px; //This must be equal to Twitter Widget's height
display:none;
}


  HTML part :  


<div id="fbbox">
<div class="fb-like-box" data-href="http://www.facebook.com/USERNAME" data-width="260" data-height="260" data-show-faces="true" data-stream="false" data-header="false"></div>
</div>
<div id="twitterbox">
<script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js">
</script>
<script>
new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 3, //Number of Tweets displayed
  interval: 30000,
  width: 260, //To adjust width of Twitter Widget
  height: 260,
  theme: {
    shell: {
      background: '#212024',
      color: '#ffffff'
    },
    tweets: {
      background: '#212026',
      color: '#ffffff',
      links: '#bc6ceb'
    }
  },
  features: {
    scrollbar: false,
    loop: false,
    live: false,
    behavior: 'all'
  }
}).render().setUser('your_twitter_handle').start();
</script>
</div>


You will have to make some changes in the HTML part of this small script. Following are some changes to customize this widget as per your requirements.\
  • Add your Facebook page's USERNAME , in place of username in the code on second line.
  • You can adjust width of the Facebook like box and Twitter Stream, but do keep them same, and equal to the #container width.
  • Also add your Twitter handle in place of twitter_handle in the HTML code.

You can see the working demo of this Widget here. DEMO



No comments:

Post a Comment