<div id="facebook">
  <div id="facebook-toggle"></div>
  <iframe src="//www.facebook.com/plugins/likebox.php?href=<?= urlencode( \admin\factory\Settings::getSystemSettings( 'facebook_url' ) );?>&amp;width=292&amp;height=558&amp;show_faces=true&amp;colorscheme=light&amp;stream=true&amp;border_color=%23FFF&amp;header=false&amp;appId=194295077275888" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:558px;" allowTransparency="true"></iframe>
</div>
<style type="text/css">
  #facebook {
    position: fixed;
    top: 50%;
    margin-top: -275px;
    background: #FFF;
    z-index: 10;
    border: 1px solid #3B5998;
    border-left: 0px;
    width: 292px;
    height: 550px;
    left: -293px;
    -webkit-box-shadow:  1px 0px 3px 1px rgba(0, 0, 0, 0.3);
    box-shadow:  1px 0px 3px 1px rgba(0, 0, 0, 0.3);
  }
  #facebook-toggle {
    background: url( '/images/system/facebook.jpg' ) no-repeat center;
    height: 133px;
    width: 50px;
    position: relative;
    z-index: 12;
    float: right;
    right: -50px;
    top: -1px;
    -webkit-box-shadow:  1px 0px 3px 1px rgba(0, 0, 0, 0.3);
    box-shadow:  1px 0px 3px 1px rgba(0, 0, 0, 0.3);
    cursor: pointer;
  }
  #facebook iframe {
    margin-top: -133px;
  }
</style>
<script type="text/javascript">
  $( function() {
    $( '#facebook-toggle' ).click( function() {
      if ( !$( '#facebook' ).hasClass( 'show' ) )
        $( '#facebook' ).addClass( 'show' ).animate({ left: 0 }, 1000 );
      else
        $( '#facebook' ).removeClass( 'show' ).animate({ left: -293 }, 500 );
    })
  })
</script>