"Responsive Testmonial FB Post"
Bootstrap 3.2.0 Snippet by mouse0270

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <head> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> </head> <div class="[ container ]"> <div class="[ col-xs-12 ]"> <div id="carousel-testimonials" class="carousel slide" data-ride="carousel" data-interval="12000"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-testimonials" data-slide-to="0" class="active"></li> <li data-target="#carousel-testimonials" data-slide-to="1"></li> </ol> <div class="carousel-inner"> <div class="item active"> <!--Testimonial Section--> <div class="fb-testimonial"> <div class="fb-testimonial-inner"> <div class="fb-profile"> <img class="facebook-thumb" src="http://mrg.bz/vWUBi9"> <p class="facebook-name">Jane Doe <i class="fa fa-caret-right"></i> MyCompany <br><span class="facebook-date"><a href="https://www.facebook.com">April 3</a> · <i class="fa fa-globe"></i></span></p> </div> <div class="fb-testimonial-copy"> <p>Cupcake ipsum dolor sit amet. I love chocolate chocolate bar soufflé fruitcake. Cotton candy cupcake halvah I love donut. Liquorice jelly gummies jelly beans pudding. I love pie pudding jelly-o gummies jujubes sweet roll cookie. Jujubes cookie fruitcake I love biscuit halvah halvah.</p> </div> </div> </div> <!--END Testimonial Section--> </div> <div class="item"> <!--Testimonial Section--> <div class="fb-testimonial"> <div class="fb-testimonial-inner"> <div class="fb-profile"> <img class="facebook-thumb" src="https://fbcdn-sphotos-f-a.akamaihd.net/hphotos-ak-xfa1/t1.0-9/417157_4897339837183_626079670_n.jpg"> <p class="facebook-name">Robert McIntosh aka Mouse0270 <i class="fa fa-caret-right"></i> MyCompany <br><span class="facebook-date"><a href="https://www.facebook.com">April 3</a> · <i class="fa fa-globe"></i></span></p> </div> <div class="fb-testimonial-copy"> <p>Disruptor cornerstone; educate combat poverty, urban harness, tackling honor public institutions. Replicable overcome injustice Jane Addams hack eradicate sustainability focus.</p> </div> </div> </div> <!--END Testimonial Section--> </div> </div> </div> <div class="row about-snippet"> <p><strong>About this snippet:</strong> <a href="https://www.twitter.com/girliestgeek" target="_blank">@girliestgeek</a> made this snippet for a project which used Facebook Testimonials as social proof, but needed to keep user information private. <a href="https://www.twitter.com/girliestgeek" target="_blank">@girliestgeek</a> made this to appear to be a Facebook embed, link to original post and all, but she can still customize the information to hide things like last names, etc. To use the carat and globe icon, you will need to add the FontAwesome stylesheet to your project. <a href="http://fortawesome.github.io/Font-Awesome/" target="_blank"> Visit the Font Awesome website for more information.</a></p> </div> </div> </div>
.fb-testimonial{background:#c5ced8;padding:10px;border-radius:6px; margin:25px 15px 0px 15px;} .fb-testimonial-inner{background:#fff;padding:10px;border-radius:3px;} .facebook-thumb{width:40px; display:inline-block; vertical-align:top;} .facebook-name{display:inline-block; margin:0px; font-family:Helvetica, Arial, Sans-serif; font-weight:700; color:#3b5998;} .facebook-date a{color:#9197a3; font-size:12px; font-weight:500; text-decoration:underline;} .facebook-date {color:#9197a3; font-size:12px; font-weight:500;} .fa.fa-caret-right{color:#9197a3;} .fb-testimonial-copy{padding:15px 0px 0px 0px;} .carousel .item {-webkit-transition: opacity 3s; -moz-transition: opacity 3s; -ms-transition: opacity 3s; -o-transition: opacity 3s; transition: opacity 3s;} .carousel .active.left {left:0;opacity:0;z-index:2;} .carousel .next {left:0;opacity:1;z-index:1;} .carousel-indicators {bottom: -25px;} .carousel-indicators li {border-color: rgb(51, 51, 51);width:7px;height:7px;} .carousel-indicators .active {background-color: rgb(51, 51, 51);width:9px;height:9px;} /*About this snippet copy*/ .about-snippet{background:#f7f7f7; color:#888; margin:40px 0px 0px 0px; padding:15px;}

Related: See More


Questions / Comments: