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.

[Dave234]

That didn't work. It just added another one of those same "missing href" things...

[coolankur49]

Originally Posted by Dave234

That didn't work. It just added another one of those same "missing href" things...

Have you added that code in showthread template.

My method works perfectly.

[Dave234]

Yes, under the part of the code you said I should add it under. In the "SHOWTHREAD" template. I'm not sure why it's not working for me......

[Angle4cor]

Great mod, thanks. Now the comments are on the left, how to center them?

PS. Mark as installed and nominated!

Ok. Solved. Just add <center> tag at the beginning and the end of the code.

[Angle4cor]

Under the facebook comments I have some warning with "href" on it. How to fix that?

[i156]

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.

Works perfect. Thanks.

[Dave234]

Can you please just write out the instructions step by step, in plain English, for us who don't know anything about code to be able to do it?

[Akyeame Kwame]

Originally Posted by ericgtr

I dug this up, it's pretty easy.

Open album_pictureview template and find:

{vb:raw footer}

Add this above:

<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
<fb:comments></fb:comments>
<script type="text/javascript"> FB.init("YOUR_API_KEY_HERE", "<path from web root>/xd_receiver.htm"); </script>

Remember the api key and path need to be added as well.

When I use this I get: 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.

Is there an update for this?

[Gamelobby]

Why does facebook app want a secure url for the canvas.?
And what if my site doesn't have one.?

[Gamelobby]

Also why does it choose a random image as the icon for each post.!?
It took a small fraction of an ad banner i have in the footer. lol

*edit*
Actually now thats all it puts for an image with each post is a fraction of an ad banner from my footer.!
Not even an option to have no image. This cant be the way it's meant to work. Why doesn't it grab an avatar or something.!?