Killer Tip: Add FACEBOOK plug-in comment box to every forum page.

[Bernard Lama]

Edited: If you use the old code then only members can see the facebook plug-in comment box and they can comment. Please use the new code, both members and non-members can see the facebook plug-in comment box and both members and non-members can comment using facebook account. 

Hey NCs,

Hope you will be very happy after  successfully using my killer tip.

Instruction is very simple: Just copy and paste the  following code into Custom Code. You may want to change data-width follow jay's instruction here.

The Old Code

<script type="text/javascript">
x$(document).ready(function(){
x$("div.texteditor").after('<div id="fb-root"></div><div class="fb-comments"></div>');
});
</script>

The New Code

<script type="text/javascript">
x$(document).ready(function(){
x$("div#discussionReplies").before('<div id="fb-root"></div><div class="fb-comments"></div>');
});
</script>

 

 

Want to give a different look to your ning site?  Mail me at [e-mail]

 

Live Preview: Here

Example:

 

[Manuel France]

Only forum is working for me...

[medicsindex]

is this Script Working for anyone Please ?

[Dr Husky (Emalejandro)]

Hello Bernard!

Works for me in chrome. Looks great, very great in chrome, but don't does not appear in Internet Explorer (New code). This is the address of a discussion: 

http://defensoresdeanimales.com/forum/topics/que-mascota-tienes#.UI...

Thanks in advance!

[Bernard Lama]

Hi Husky,

May be is a problem with your browser.. in my IE8 i can see clearly...

[Ningaholic]

Any way to get this for the videos page?

[Bernard Lama]

Try this...

<script type="text/javascript">
x$(document).ready(function(){
if (x$(".xg_widget_video_video_show").length > 0)
x$("p#add-comment").after('<div id="fb-root"></div><div class="fb-comments" data-width="733"></div>');
});
</script>

[Frank Carey]

I updated to automatically change widths and add the proper data-href tag...

<script type="text/javascript">
//Facebook comments. Adapted from http://creators.ning.com/forum/topics/killer-tip-add-facebook-comme...
x$(document).ready(function(){
commentBox = x$("p#add-comment").parent().hide();
padding = 20;
width = commentBox.parent().width() - padding;
console.log('Facebook comment box: ' + width + 'px wide');
commentBox.before('<div id="fb-root"></div><div class="fb-comments" data-href="' + '//' + location.host + location.pathname + '" data-width="'+ width +'"></div>');
});
</script>

[Planeta Balada]

Would add a black or white background behind the module? And also have the option to network comments?

For this replaces the comments NING comments by Facebook, would have the 2?

Thanks and great job!

[LocalArtsLive]

Hi Frank,

This worked brilliantly for me, but without any way to receive notifications for Facebook comments, I decided to move to Disqus, instead.  There appears to be some magic in your code that replaces the Ning comments with Facebook comments.  I'd like to do the same thing with Disqus, but only on blog comments.  I'd like to retain Ning commenting for the rest of my network.  The code I'm using works fine, except that it adds Disqus comments to the blog and it's confusing to have 2 different comment boxes on each blog.  Thanks!!

<!-- Begin Disqus Comments -->
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = 'localartslive'; // required: replace example with your forum shortname

/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>

<script type="text/javascript">
x$(document).ready(function() {
x$(".xg_blog").after('<div id="disqus_thread"></div>');
});
</script>

<!-- End Disqus Comments -->

[Planeta Balada]

show

[Cullen Ali Carey]

I am very interested in adding the Facebook Comment Box to my website (www.cullenscorner.com). When I posted the code at the beginning of the box in the "Custom Code" Section and this is all I get:

The comments plugin requires an href parameter.

This is the code that I posted:

<script type="text/javascript">
x$(document).ready(function(){
x$("div#discussionReplies").before('<div id="fb-root"></div><div class="fb-comments"></div>');
});
</script>

What am I doing wrong? am I posting the correct code? Am I posting in the correct area? Do I need to post the code in the design studio under "Advanced and if so do I paste the code at the beginning or the end of the other codes?

[Bernard Lama]

Whatever you are doing is right. Only this is that probably there is problem with your fb integration. Make sure that FB integration is correct and working fine.