Facebook and Twitter Tabs

Started by Mick, Aug 28, 2013

Aug 28, 2013 Last Edit: Aug 18, 2018 by Mick

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.

Updated to latest Facebook and Twitter scripts.