Documentation & Tutorials. We have a great selection of tutorials to help you make the most of your theme.

Facebook and Twitter Tabs

Mick in Tutorials
Aug 28, 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:
Code: [Select]
<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)
Code: [Select]
.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:
Code: [Select]
<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.


Tagged with:

Share This Post

Mick

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 and has a weakness for Tacos and Pizza.

    


1 Comments

Mick
Jul 26, 2018
Updated to latest Facebook and Twitter scripts.
1



Connect with us:


Improve SMF

If you wish to contribute to the development of SMF you can contribute to the coding discussions taking place on Github. You are also welcome to suggest features which you would like to see added to the software in the Feature Requests board.




go up