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.

[K!nG]

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.

Hmmmm seems like its for dark themse because the comment window is black & default text for the comment is white and i am using default vbulletin theme and after posting comment its hard to read.. u can't even see fb username or anything, I have to highglit to see which user comment & what is the comment, so any suggestions on this ???

thanks
Thanks

[Replicators]

Originally Posted by K!nG

Hmmmm seems like its for dark themse because the comment window is black & default text for the comment is white and i am using default vbulletin theme and after posting comment its hard to read.. u can't even see fb username or anything, I have to highglit to see which user comment & what is the comment, so any suggestions on this ???

thanks
Thanks

Where it says "<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>" Replace dark with light.

[K!nG]

Thanks,

That solved my issue and now everything is looking goood

[sivaganeshk]

Hey, are you an expert in vbulletin mod creation ?

[alawee.blawee]

its not working with me. it just shows the title but nothing shows up like the print screen.
what should I do please?

my forum's link is mriraq.com/vb

[djscoop]

Originally Posted by alawee.blawee

its not working with me. it just shows the title but nothing shows up like the print screen.
what should I do please?

my forum's link is mriraq.com/vb

im having the same issue

[Replicators]

Try reading the last posts and find that we have corrected the problems ourselves.

[alawee.blawee]

i used the code you mentioned in reply 110 sir
it shows up perfectly but when i post nothing go to facebook at all.

[hyperviperx99]

Originally Posted by Gemma

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 -->

Thanks Gemma! You're awesome

Where do I put the API key from here ?

[MrBig]

How can i change the width to match the thread?