FACEBOOK LIKE BOX CODE (HTML) :

Source Code : 
<div class="wrapper">
<
div class="inner">
<
div class="ribbon-wrapper-green">
<
div class="ribbon-green">
Facebook</div>
</
div>
<
center><iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fmobilesforum&amp;width=240&amp;height=335&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;border_color&amp;header=true&amp;appId=713020622172524" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:240px; height:335px;" allowTransparency="true"></iframe></center>
  </
div>
</
div

FACEBOOK LIKE BOX CODE (CSS) :

Source Code : 
.wrapper {padding:5px;
    
margin50px auto;
  
width276px;
  
height360px;
  
border-radius0px;
  
positionrelative;
  
z-index90;
background:#eee;background-image:-moz-linear-gradient(top, #fff, #eee);background-image:-ms-linear-gradient(top, #fff, #eee);background-image:-o-linear-gradient( top, #fff, #eee);background-image:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));background-image:-webkit-linear-gradient(top, #fff, #eee);background-image:linear-gradient(top, #fff, #eee);border:1px
solid #ddd;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;-moz-box-shadow:0 1px 0 #9a9a9a;-webkit-box-shadow:0 1px 0 #9a9a9a;box-shadow:0 1px 0 #9a9a9a;padding:10px;
}
.
inner  {border:1px dashed #ccc;padding:0.5em;-moz-box-shadow:0 0 0 1px #fff;-webkit-box-shadow:0 0 0 1px #fff;box-shadow:0 0 0 1px #fff}
 
.ribbon-wrapper-green {
  
width85px;
  
height88px;
  
overflowhidden;
  
positionabsolute;
  
top: -3px;
  
right: -3px;
}
 
.
ribbon-green {
  
fontbold 15px Sans-Serif;
  
color#333;
  
text-aligncenter;
  
text-shadowrgba(255,255,255,0.50px 1px 0px;
  -
webkit-transformrotate(45deg);
  -
moz-transform:    rotate(45deg);
  -
ms-transform:     rotate(45deg);
  -
o-transform:      rotate(45deg);
  
positionrelative;
  
padding7px 0;
  
left: -5px;
  
top15px;
  
width120px;
  
background-color#306EFF;
  
background-image: -webkit-gradient(linearleft topleft bottomfrom(#306EFF), to(#3BB9FF));
  
background-image: -webkit-linear-gradient(top#306EFF, #3BB9FF);
  
background-image:    -moz-linear-gradient(top#306EFF, #3BB9FF);
  
background-image:     -ms-linear-gradient(top#306EFF, #3BB9FF);
  
background-image:      -o-linear-gradient(top#306EFF, #3BB9FF);

 
  
color#fff;
  
-webkit-box-shadow0px 0px 3px rgba(0,0,0,0.3);
  -
moz-box-shadow:    0px 0px 3px rgba(0,0,0,0.3);
  
box-shadow:         0px 0px 3px rgba(0,0,0,0.3);
}
 
.
ribbon-green:before, .ribbon-green:after {
  
content"";
  
border-top:   3px solid #6e8900;
  
border-left:  3px solid transparent;
  
border-right3px solid transparent;
  
position:absolute;
  
bottom: -3px;
}
 
.
ribbon-green:before {
  
left0;
}
.
ribbon-green:after {
  
right0;

R@me$h Reviewed by R@me$h on . Facebook Like Box CSS Layout Design http://i.imgur.com/f7o3Flr.png FACEBOOK LIKE BOX CODE (HTML) : <div class="wrapper"> <div class="inner"> <div class="ribbon-wrapper-green"> <div class="ribbon-green"> Facebook</div> </div> Rating: 5