Facebook and Twitter Tabs

Written by Mick in Tutorials on 28 Aug 2013


You've seen this nifty tabs widget on most websites powered by Wordpress. Today we're going to create one of our own and use it on your favorite portal. Instead of using links and text, i decided to use the Facebook Like box and Twitter's widget. First off, a couple of things are needed:

1.  https://developers.facebook.com/docs/plugins/page-plugin
2.  https://developer.twitter.com/en/docs/twitter-for-websites/timelines/overview.html
3.  Create an HTML side block.
4. Make sure when creating such feeds, the width is 350px  height: 265px




The markup:

<div class="wrap">

  <div class="tabs group">
    <li><a class="one switch activeTa" href="#">Facebook</a></li>
    <li><a class="two switch" href="#">Twitter</a></li>
  </div>

<div class="container">
  <div id="one">facebook-iframe-code-goes-here</div>

  <div id="two">twitter-code-goes-here</div>
</div>

</div>


The CSS: (Change widths, heights and colors to suit your needs)

.wrap {
  marin: 0 auto;
}
.tabs {
  width: 350px;
height: 80px;
margin: 0 auto;
list-style: none;
overflow: hidden;
  padding: 0;
}
.tabs li {
float: left;
width: 175px;
}
.tabs li a {
position: relative;
display: block;
height: 30px;
margin-top: 40px;
padding: 10px 0 0 0;
font-family: 'Open Sans', sans-serif;
font-size: 18px;
text-align: center;
text-decoration: none;
color: #ffffff;
background: #72c1ae;
-webkit-box-shadow: 8px 12px 25px 2px rgba(0,0,0,0.4);
   -moz-box-shadow: 8px 12px 25px 2px rgba(0,0,0,0.4);
        box-shadow: 8px 12px 25px 2px rgba(0,0,0,0.4);
        border: 0px solid #000000;
-webkit-transition: padding 0.2s ease, margin 0.2s ease;
       -moz-transition: padding 0.2s ease, margin 0.2s ease;
         -o-transition: padding 0.2s ease, margin 0.2s ease;
        -ms-transition: padding 0.2s ease, margin 0.2s ease;
            transition: padding 0.2s ease, margin 0.2s ease;
}
.tabs li:first-child a {
z-index: 3;
  -webkit-border-top-left-radius: 8px;
    -moz-border-radius-topleft: 8px;
  border-top-left-radius: 8px;
}
.tabs li:nth-child(2) a {
z-index: 2;
}
.tabs li:last-child a {
z-index: 1;
  -webkit-box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
   -moz-box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
        box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
  -webkit-border-top-right-radius: 8px;
    -moz-border-radius-topright: 8px;
  border-top-right-radius: 8px;
}
.tabs li a:hover {
margin: 35px 0 0 0;
padding: 10px 0 5px 0;
}
.tabs li a.activeTa {
margin: 30px 0 0 0;
padding: 10px 0 10px 0;
background: #f1f1f1;
color: #72c1ae;
z-index: 4;
outline: none;
}
.group:before,
.group:after {
  content: " ";
  display: table;
}
.group:after {
  clear: both;
}
.container {
  width: 350px;
  height: 265px;
  margin: 0 auto;
  overflow: hidden;
  background: #f1f1f1;
    -webkit-box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
       -moz-box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
            box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
  -webkit-border-bottom-right-radius: 8px;
    -webkit-border-bottom-left-radius: 8px;
    -moz-border-radius-bottomright: 8px;
    -moz-border-radius-bottomleft: 8px;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
}

#one {
margin: 0;
padding: 0 0 0 10px;
}

#two {
margin: 0;
padding: 0 0 0 10px;
}


The JS:

<script type="text/javascript" src="[url]http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$('.one').click(function() {
    $('a.switch').removeClass("activeTa");
    $(this).addClass("activeTa");
      $("#one").show();
      $("#two").hide();
 
});
 
$('.two').click(function() {
    $('a.switch').removeClass("activeTa");
    $(this).addClass("activeTa");
      $("#one").hide();
      $("#two").show()
 
});
</script>


See the Pen Light & Sexy Tabs by Mick (@Mick-) on CodePen.


Mick is an American theme designer for Simple Machines Forum software currently living in South Florida, USA. He runs idesignSMF and started tinkering with SMF in 2006 where he created several SMF forums of his own before he founded idesignSMF in 2009 to which he is dedicated full time.
    
1 Comments


Updated to latest Facebook and Twitter scripts.
#1

Get more stuff like this

Subscribe to our mailing list and get interesting content and updates.