Show Thread Enhancements - Add Facebook comments to threads

This modification will integrate Facebook comments directly into the posts, at the bottom of the page.

What is needed for this modification:

• A standard facebook account.
  
• A facebook application, anyone can set one up and it's simple http://www.facebook.com/developers/createapp.php Be sure to add your site URL to the "Connect URL" and take note of your API Key.

Once that is done it's time to add the code to the SHOWTHREAD template.

Find:

{vb:raw similarthreads}

Add this above:

	<!-- FB Comments -->
	<h4 class="threadinfohead"><span class="optiontitle">Facebook Comments</span></h4>
	<div id="thread_tags_list" class="thread_info_block">
		<div class="inner_block">
			<div id='tag_list_cell'>
<script src="http://static.ak.connect.facebook.com/connect.php/en_US" type="text/javascript"></script><script type="text/javascript">FB.init("YOUR API KEY");</script><fb:comments> </fb:comments>
			</div>
		</div>
	</div>
	<!-- /FB Comments -->

Be sure to add your API key.

[hyperviperx99]

Okay thanks Gemma.. Sorry for so many questions but here's another: How come the comments posted were disappearing ?

[enginethatcan't]

Tagged for install, thank you.

[XtremeCrash]

Ive got a dark theme.How do I change the color so the comments will show like white or something?right now you cant see the comment unless you high light it.

Also when I go to reply to a thread it just goes to the quick reply an i dunno why...

The code Im using is;

<!-- FB Comments -->
        <h2 class="blockhead" style="padding-top:5px;"><span class="optiontitle">Facebook Comments</span></h2>
        <div id="thread_tags_list" class="thread_info_block blockbody formcontrols floatcontainer">
           <div class="blockrow floatcontainer">
                <div id='tag_list_cell'>
   <div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:comments href="http://*******8.com" num_posts="3" width="300"></fb:comments><br/>
                </div>
            </div>
        </div>
<img src="clear.gif" height="10" /><br />
        <!-- /FB Comments -->

[hyperviperx99]

Question: I'm getting this message below the comment box:

Warning: this comments plugin is operating in compatibility mode, but has no posts yet. Consider specifying an explicit 'href' as suggested in the comments plugin documentation to take advantage of all plugin features.

How do I apply this?

[blake247]

Originally Posted by hyperviperx99

Question: I'm getting this message below the comment box:



How do I apply this?

Same

[yadamon]

Why download link shows "No Files Uploaded." ?
I very interest your module, please check download link.

[Gemma]

Originally Posted by hyperviperx99

Question: I'm getting this message below the comment box:



How do I apply this?

Originally Posted by blake247

Same

The Facebook Comments code has changed bigtime.

Replacing your current code with something like this should work

<!-- FB Comments -->
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
    <h2 class="blockhead" style="padding-top:5px;"><span class="optiontitle">Facebook Comments</span></h2>
        <div id="thread_tags_list" class="thread_info_block blockbody formcontrols floatcontainer">
           <div class="blockrow floatcontainer">
                <div id='tag_list_cell'>
<fb:comments <link rel="canonical" href="{vb:raw thread_url}" num_posts="5" width="500"></fb:comments>
</div>
            </div>
        </div>
<img src="clear.gif" height="10" /><br />
        <!-- /FB Comments -->

[K!nG]

Hi Gemma,
When i updated SHOWTHREA with the above codes it shows me this message now. Can u check. Thanks in advance

[Replicators]

Hey K!ng, try this

<!-- FB Comments -->
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=APP ID";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<h2 class="blockhead" style="padding-top:5px;"><b><span class="optiontitle">Facebook Comments</span></b></h2>
<div id="thread_tags_list" class="thread_info_block blockbody formcontrols floatcontainer">
           <div class="blockrow floatcontainer">
                <div id='tag_list_cell'>
<center><div class="fb-comments" data-href="http://www.yourdomain.com/{vb:raw thread_url}" data-num-posts="2" data-width="800" data-colorscheme="dark"></div></center>
</div>
            </div>
        </div>
<img src="clear.gif" height="10" /><br />
<!-- /FB Comments -->

Change APP ID with your app id on facebook, and change yourdomain.com with your domain, and also change data width to how wide you want it, along with color scheme to dark or light.

[blake247]

Originally Posted by Replicators

Hey K!ng, try this

<!-- FB Comments -->
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=APP ID";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<h2 class="blockhead" style="padding-top:5px;"><b><span class="optiontitle">Facebook Comments</span></b></h2>
<div id="thread_tags_list" class="thread_info_block blockbody formcontrols floatcontainer">
           <div class="blockrow floatcontainer">
                <div id='tag_list_cell'>
<center><div class="fb-comments" data-href="http://www.yourdomain.com/{vb:raw thread_url}" data-num-posts="2" data-width="800" data-colorscheme="dark"></div></center>
</div>
            </div>
        </div>
<img src="clear.gif" height="10" /><br />
<!-- /FB Comments -->

Change APP ID with your app id on facebook, and change yourdomain.com with your domain, and also change data width to how wide you want it, along with color scheme to dark or light.

Worked perfect! Thanks!