<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <div class="container"> <div class="row"> <h1>facebook Profile Card</h1> <p>You can use with facebook API, bot or manual.</p> <!-- code start --> <div class="fbPc-div"> <a class="fbPc-bg fbPc-block"></a> <div> <div class="fbPc-button"> <!-- Twitter Button | you can get from: https://about.twitter.com/tr/resources/buttons#follow --> <a href="https://facebook.com/nikku" class="facebook-follow-button" data-show-count="false" data-size="large" data-show-screen-name="false" data-dnt="true">Follow @nikku</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.facebook.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'facebook-wjs');</script> <!-- Twitter Button --> </div> <a title="Nik k u" href="https://facebook.com/nikku" class="fbPc-avatarLink"> <img alt="Mountain View" src="pic_mountain.jpg" class="fbPc-avatarImg"> <i class="fa fa-facebook-official"></i> </a> <div class="fbPc-divUser"> <div class="twPc-divName"> <a href="https://facebook.com/mertskaplan">fb pc</a> </div> <span> <a href="https://facebook.com/mertskaplan">@<span>nikku</span></a> </span> </div> <div class="fbPc-divStats"> <ul class="tfbPc-Arrange"> <li class="fbPc-ArrangeSizeFit"> <a href="https://facebook.com/mertskaplan" title="9.840 likes"> <span class="fbPc-StatLabel fbPc-block">likes</span> <span class="fbPc-StatValue">9.8</span> </a> </li><br> <li class="fbPc-ArrangeSizeFit"> <a href="https://facebook.com/nikku/following" title="885 comments"> <span class="fbPc-StatLabel fbPc-block">comments</span> <span class="fbPc-StatValue">885</span> </a> </li><br> <li class="fbPc-ArrangeSizeFit"> <a href="https://facebook.com/nikku/followers" title="1.810 shares"> <span class="fbPc-StatLabel fbPc-block">sgares</span> <span class="fbPc-StatValue">1.810</span> </a> </li> </ul> </div> </div> </div> <!-- code end --> </div> </div>

.twPc-div { background: #fff none repeat scroll 0 0; border: 1px solid #e1e8ed; border-radius: 6px; height: 200px; max-width: 340px; // orginal twitter width: 290px; } .fbPc-bg { background-image: url("https://pbs.twimg.com/profile_banners/50988711/1384539792/600x200"); background-position: 0 50%; background-size: 100% auto; border-bottom: 1px solid #e1e8ed; border-radius: 4px 4px 0 0; height: 95px; width: 100%; } .fbPc-block { display: block !important; } .fbPc-button { margin: -35px -10px 0; text-align: right; width: 100%; } .fbPc-avatarLink { background-color: #fff; border-radius: 6px; display: inline-block !important; float: left; margin: -30px 5px 0 8px; max-width: 100%; padding: 1px; vertical-align: bottom; } .fbPc-avatarImg { border: 2px solid #fff; border-radius: 7px; box-sizing: border-box; color: #fff; height: 72px; width: 72px; } .fbPc-divUser { margin: 5px 0 0; } .fbPc-divName { font-size: 18px; font-weight: 700; line-height: 21px; } .fbPc-divName a { color: inherit !important; } .fbPc-divStats { margin-left: 11px; padding: 10px 0; } .fbPc-Arrange { box-sizing: border-box; display: table; margin: 0; min-width: 100%; padding: 0; table-layout: auto; } ul.fbPc-Arrange { list-style: outside none none; margin: 0; padding: 0; } .fbPc-ArrangeSizeFit { display: table-cell; padding: 0; vertical-align: top; } .fbPc-ArrangeSizeFit a:hover { text-decoration: none; } .fbPc-StatValue { display: block; font-size: 18px; font-weight: 500; transition: color 0.15s ease-in-out 0s; } .fbPc-StatLabel { color: #8899a6; font-size: 10px; letter-spacing: 0.02em; overflow: hidden; text-transform: uppercase; transition: color 0.15s ease-in-out 0s; }