Back to vBulletin 3.8 Template Modifications

Facebook Comments Box to Threads for VB3
Mod Version: 1.00, by ShawneyJ

vB Version: 3.8.x Rating: (2 votes - 5.00 average) Installs: 6
Released: 22 Oct 2014 Last Update: Never Downloads: 0
Not Supported Template Edits  

I didn't see a facebook comments in threads mod for vb3.8.x. Or maybe im just going blind! A client wanted this added under her first post. And yes, works a treat for FF, IE, Chrome, Mobile.

I wasn't a huge fan of fb comments under first post. So i will just add here how i added fb comments like my test chat forum, which is placed nicely under Quick Reply.

How to add the facebook comments box to your thread vb3 only.
First, create a Facebook App.

Visit https://developers.facebook.com
Login with your Facebook account.
Select Apps from the navigation menu and choose Create a New App.
Fill in the Display Name and select a category that matches your app.
Click Create App - You’ll now be taken to your App’s Dashboard page.

Click the Settings link and add a Contact Email address and App Domain (your site URL) and Save your changes.

Next, click the Status & Review link, and toggle the switch to make the app public.

Note: maybe a tiny bit different than when i last added Apps.

Ok, so you have your App ID ready to do these template edits to your vbulletin.

This code is slightly modified to pass validator.w3.

In SHOWTHREAD Template find:
Code:
<body onload="$onload">


And add this Below:
Code:
<div id="fb-root"></div>
<script type="text/javascript">
//<![CDATA[
(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/sdk.js#xfbml=1&appId=YOUR-APP-ID&version=v2.0";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script>


Change in red "YOUR-APP-ID" with your FB App ID.

Still in SHOWTHREAD Template, add your FB Comments under quick reply.

Search for:
Code:
<!-- / quick reply -->
</if>


Add below:
Code:
<!-- facebook comments begin -->
<if condition="!in_array($GLOBALS[forumid], array(x,x,x))"><br />
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<tr>
	<td class="thead">Facebook Comments</td>
</tr>
<tr>
	<td class="alt1">
<div class="fb-comments" data-href="$vboptions[bburl]/showthread.php?t=$thread[threadid]" data-order-by="time" data-numposts="5" data-width="" data-colorscheme="light"></div>
	</td>
</tr>
</table>
</if>
<!-- facebook comments end -->

And Save.

Dont for get to change the x,x,x highlighted in red.
For Example, if i wanted to hide the Facebook Comments in certain Forums, i would place in the Forums ID 40 and 16. My code would look like this:
Code:
<if condition="!in_array($GLOBALS[forumid], array(40,16))">


Tips,
All this can be edited in the Code:
data-colorscheme = "light" or "dark" theme.
data-numposts = the number of comments to show by default, which is set at 5.
data-order-by = "social", "reverse_time", or "time".
data-width = the width of the FB Box in pixels. For a fluid width, use 100%.
Note: IE dont like fluid width at 100%, it chucks a hissy fit.

You would be better to leave width at nothing.

Moderation.
If you want moderators for your Comment box, visit your App’s Role page and add their Facebook ID as an Administrator.

Lastly, if you want comments box under first post which is added in Postbit Template, and, or anywhere else in your thread, i can add the How-To here.

Screenshots added and http://www.ahchats.com/forums/showthread.php?p=693876 at me test chat forums.
Cheers.

Download

No files for download.

Screenshots

Click image for larger version
Name:	facebook-view.jpg
Views:	307
Size:	77.9 KB
ID:	150781   Click image for larger version
Name:	Thread-view.jpg
Views:	262
Size:	54.2 KB
ID:	150782  

Similar Mods

Show Thread Enhancements Add Facebook comments to threads vBulletin 4.x Template Modifications
Integration with vBulletin Facebook comments to threads vBulletin 4.x Template Modifications

vblts.ru supports vBulletin®, 2022-2024