As I come up to the last few projects I will probably be working on before I take a very long break (or rather crawling through trenches and being yelled at by the Boot Camp Instructors), I have taken a few hours out to work in the newest permutation of the jwFacebook Comments plugin.

And I am happy to say there are a shit load of bug fixes, some new functionality, and (tada) support for seeing comments on Blog Layout, Frontpage, and Article views! What's more, I have taken some of the functionality I wrote into the jWarlock.com version of the plugin (a great deal of it was custom) and have implemented it into this version!

So what is new first of all?

1. Full and Compact View Modes
   • When viewing an article you are in Full Mode, and when you are looking at any other view involving a preview of an article you are in Compact Mode.
2. CSS Settings for Full and Compact Modes
   • There is the ability to specify the URL of the CSS file you would like to use in full view, and compact view. Very handy where the Facebook Commenting output is breaking your stylesheets or templates.
3. JS Settings for Full and Compact Modes
   • Yes, I have added the ability to add a JS file for each particular mode too!
4. Connected Event Hook
   • In short, you can specify a function to be run when the Facebook Commenting output has been rendered
5. Category and Section Whitelisting
   • There was a bug in here, and it was squashed. As long as the list of categories or sections are comma delimited, there will be no issues.
6. Disabling an article
   • Adding {jwfbcomments-off } will disable the plugin output for that article in full and compact views. (Make sure you remove all spaces between the { and } (I left one in there so it would not trigger on this article).

So what does the config screen look like now?

There are however (in true fashion) some items which have not been implemented yet. Those are # Comments to show, and Title Override. These are functions I will be coding in shortly, but to be honest I am rather tired right now

Now for the fun part when it comes to the Javascript includes!

You will notice the output of the Facebook Commenting plugin has a few unique hooks which you can 'hook' into with jQuery (or MooTools if you like that sort of thing).

Here is an example of what the output looks like:

<script src="http://jwfbcomment.jwarlock.com/media/compact_wall.js" type="text/javascript"></script><div id="jwcomments_4af94ed98112c" class="jwcomments_block" style="background:#fff;color:#000;">		
<script src=
		"http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" 
		type="text/javascript"></script>
		
		<fb:comments css="http://jwfbcomment.jwarlock.com/media/compact_wall.css?rand=828139" xid="article_45"></fb:comments>
		
		<script type="text/javascript">
			if(document.namespaces){
				// IE
				document.namespaces.add("fb", "http://www.facebook.com/2008/fbml");
			} else {
				var htmlElement = document.getElementsByTagName('html')[0];
				htmlElement.setAttribute('xmlns:fb', 'http://www.facebook.com/2008/fbml');
			}
		FB.init("7f705260916d6459e5f36c2d9975dddc", "/media/xd_receiver.htm", {});
		</script>
		<br/>
		<span style="font-size:10px;">Powered by <a href="http://www.jwarlock.com/">jWarlock jwFacebook Comments</a></span

You will notice (On this page at the base of this article) a link called 'View Facebook Comments', I am now going to show you how to put this together (and get a similar effect).

You will notice in the above code there is a reference to a JS file called compact_wall.js, here is what I have put in mine for the test environment.

<script type="text/javascript">
jQuery.noConflict()(function(){    
jQuery(".jwcomments_block").css({'display':'none'});
jQuery("div#[id^='jwcomments_']").each(function(){
var id_val = jQuery(this).attr('id');
jQuery("#" + id_val).after('<a href="javascript:void(0);"
fb_comments="' + id_val + '" class="a_fbcomments">View Facebook
Comments</a><br/>');
});
jQuery("a[fb_comments]").click(function(){
var jwcomments_id=jQuery(this).attr('fb_comments');
jQuery('#' + jwcomments_id).dialog({ 
buttons: { "Ok": function() { jQuery('#' + jwcomments_id).dialog("close"); } },
height: 500,
width: 800,
hide: 'fold',
show: 'fold',
title: 'Comment on this...',
autoOpen: false
});
jQuery('#' + jwcomments_id).dialog('open');
});
});
</script>

If you had a hard time reading that, take a look at the URL itself which is clickable in the first section of code.

My weapon of choice is jQuery and as you will see without modifying the plugin itself I have told it to add a link to each of the comment blocks after the Facebook Comments output. Then jQuery will hook those links to the Dialog UI and then apply an effect when that link is clicked.

You could go further and add a CSS Class and then apply a graphic to the link (Like I have below), but that is something you should refer to the jQuery.com website to do.

In Conclusion...

Every one has been asking me lately when the next version will be out, and how did I do the lightbox thing with the Facebook Comments thing. The above has been answered now, so now you can do these things.

But please.... keep in mind I will most likely not be too accessible in the next several months. And as such support requests will be difficult to answer (if at all). I am joining the Air Force at the end of January, so if you need anything before then, ask nicely

Adios'

Adam

User Rating: / 60
PoorBest