"comment facebook"
Bootstrap 3.0.0 Snippet by evarevirus

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ----------> <!DOCTYPE html><html class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/nodws/pen/rBKGI?limit=all&page=2&q=comment" /> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'> <style class="cp-pen-styles">@import url(https://fonts.googleapis.com/css?family=Lato); html, body { padding: 0; margin: 0; height: 100%; text-align:center; color:#555; font: 1em/1.5 "Lato", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizelegibility; background:#eee } .entry-content { width:500px; margin:0 auto; } .embed-fb-comments { text-align:left; margin-top:20px; } .entry-content .ufithumb { width:32px; height:32px; display:block; border:none; vertical-align:top; } .ufithumblnk { display:block; } .ufithumbwrap { float:left; } .clearfix:after { clear:both; content:"."; display:block; font-size:0; height:0; line-height:0; visibility:hidden; } .entry-content .UFIRow { background-color:#fafbfb; border:0; margin:1px 0 0; padding:6px; } .UFIImageBlockContent { margin:0; padding:0 0 0 8px; overflow:hidden; } .UFICommentContentBlock { position:relative; } .entry-content .UFICommentContent { font-family:Helvetica, Arial, 'lucida grande',tahoma,verdana,arial,sans-serif; font-size:12px; line-height:1.28; } .entry-content a { font-weight:700; color:#3b5998; text-decoration:none; } .fb-out { clear:both; display:block; text-align:right; font-size:11px; } /* follow me @nodws */ #btn-twtr{ clear:both; color:#fff; border:2px solid; border-radius:3px; text-align:center; text-decoration:none; display:block; font-family:sans-serif; font-size:14px; width:13em; padding:5px 10px; font-weight:600; margin:100px auto; background:rgba(0,0,0,0.2); box-shadow:0 0 0px 3px rgba(0,0,0,0.2); opacity:0.6 }#btn-twtr:hover{color:#fff;opacity:1}</style></head><body> <h1>Facebook comments on your blog</h1> <div class="entry-content"> <a href="#" class='link-out' target="_b">Try it now</a>, your comment will display below <div class="embed-fb-comments" data-post-id="673731366164881"></div> <!--The Post ID where the comments are kept--><br> <a href="#" class="fb-out link-out" target="_b">Post a comment</a> </div> <a href="https://twitter.com/nodws" id="btn-twtr" target="_b">Follow me on Twitter</a> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script > var comment = $('.embed-fb-comments'); var postId = comment.attr('data-post-id'); //you will need the div with attribute data-post-id //You can also make this get the ID from the fb embed post element, doesnt quite work on codepen //You will need an access token (appId|appSecret) on the new v2.3 api, I created a facebook app for this demo jQuery.getJSON('https://graph.facebook.com/'+ postId +'/comments?access_token=121918714533737|9993aeb00ab26258ee429150a6dbb47e', null, function(data){ //Cache this if you can for (obj in data.data) {if (window.CP.shouldStopExecution(1)){break;} var item = data.data[obj]; var itemRow = FbMakeCommentRow(item); comment.append( itemRow ); } window.CP.exitedLoop(1); }); //Secret sauce function FbMakeCommentRow(object){ var row = '<div class="UFIRow clearfix">'+ "\n" + '<div class="ufithumbwrap">'+ "\n" + ' <a href="https://facebook.com/profile.php?id='+ object.from.id +'" class="ufithumblnk">'+ "\n" + ' <img class="ufithumb" src="https://graph.facebook.com/'+ object.from.id +'/picture?type=square" />'+ "\n" + ' </a>'+ "\n" + '</div>'+ "\n" + '<div>'+ "\n" + ' <div class="clearfix UFIImageBlockContent ">'+ "\n" + ' <div class="UFICommentContentBlock">'+ "\n" + ' <div class="UFICommentContent">'+ "\n" + ' <a href="https://facebook.com/profile.php?id='+ object.from.id +'" class="UFICommentActorName">'+ "\n" + object.from.name + "\n" + ' </a>'+ "\n" + ' <span class="UFICommentBody">'+ "\n" + object.message.nl2br() + "\n" ' </span>'+ "\n" + ' </div>'+ "\n" + ' </div>'+ "\n" + ' </div>'+ "\n" + '</div>'+ "\n" + '<div class="clearfix"></div>'+ "\n" + '</div>'; return row; } if(window.location.href.indexOf("full") == -1){ $(".link-out").click(function(e){ e.preventDefault(); window.open( 'https://m.facebook.com/'+$('.embed-fb-comments').attr('data-post-id')+'#composerInput' , '', 'width=600,height=300' ); return false; }); } String.prototype.nl2br = function() { return this.replace(/\n/g, "<br />"); } //# sourceURL=pen.js </script> </body></html>

Related: See More

Argon Design System
Bootstrap 4 User Rating Form / Comment Form
Comment Box
User Comment Example

Questions / Comments: