One of the frequent requests I get is the ability for users to comment on photos and other media objects. I am considering adding this feature – in fact, it is one of the items you can vote for in the poll I am running. But today I discovered a technique for incorporating the Facebook comment widget right into your gallery. I enabled this feature on an album in the demo site so you can see for yourself. Feel free to leave a comment on one or more photos – I’ll purge them periodically.
This is not for everyone. Users need a Facebook account, and it is a little tricky to set up and maintain. For these reasons, I am reluctant to add this as a built-in feature. But for some of you this will be an excellent addition to the gallery.
Here is what it looks like:
There are a few steps getting this to work.
1. Add a script tag to the web page hosting the gallery control.
Open default.aspx in a text editor and add this line somewhere in the <head> section:
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
2. Update mediaobjectview.js
Two javascript functions in \gs\script\mediaobjectview.js must be updated to call the Facebook API. In showNextMediaObject() and showPrevMediaObject(), find this line of code:
document.body.style.cursor = "default";
Then add this line just *before* it:
if (typeof (FB) != 'undefined') FB.XFBML.parse();
Because the file is minified, it is difficult to edit, so for your convenience just grab the one used on the demo site. If you are running a different version than the one on the demo site you’ll have to manually edit the file. To make this easier, you could edit the un-minified version that is in the source code download (Website\gs\script\mediaobjectview.debug.gs) and then run it through any minifier (like this one).
3. Enable HTML editing and add the ‘fb:comments’ tag.
Log in to your gallery as an administrator and turn on HTML editing on the User Settings page. Then add ‘fb:comments’ as a valid HTML tag.
4. Update each media object caption with the Facebook HTML snippet.
For each media object where you want to enable comments, edit the caption and add this HTML after the regular caption:
<div id="fb-root"></div>
<fb:comments href="http://www.site.com/default.aspx?moid=8274"></fb:comments>
Replace the URL with the actual URL to your media object. Notice there are several spaces before the first <div>. That is intentional, as it provides a buffer to prevent Gallery Server Pro from accidentally rendering the comment widget on the thumbnail image. Save your changes and then refresh the page. The Facebook comment widget should appear just below the caption.
Pretty cool, huh?
Updating the caption for every media object is pretty tedious, so below I describe a shortcut.
Disclaimers and caveats
BROKEN CAPTION EDITING – This technique breaks the ability to edit a caption on the single media object view. Once you comment-enable a media object, the only way to edit its caption is through the Edit Captions task available in the Actions menu. And when you do, you have to be careful not to edit the Facebook HTML that is part of the caption.
Remember, Gallery Server Pro was not designed for this comment widget, so it is kind of a hack to add it to the comment field. If you don’t like this limitation, then don’t use this technique.
NO SUPPORT – Gallery Server Pro does not provide support for the Facebook comment widget, so you are on your own. I did minimal testing and don’t know how robust it is or even whether it is a good idea. It may kill your hamster. That said, I am curious to hear your feedback and experiences.
Comment-enable your whole gallery (or just an album) in one step
Rather than update each media object one at a time, you can execute a SQL statement against the database to comment-enable all your media objects at once. Here is some example SQL – it adds the necessary Facebook HTML to any existing text in the Title column of the gs_MediaObject table.
SQLite:
UPDATE gs_MediaObject
SET Title=Title || " <div id='fb-root'></div><fb:comments href='http://www.site.com/default.aspx?moid=" || MediaObjectId || "'></fb:comments>"
SQL Server:
UPDATE gs_MediaObject
SET Title=Title + " <div id='fb-root'></div><fb:comments href='http://www.site.com/default.aspx?moid=" + MediaObjectId + "'></fb:comments>"
WHERE FKAlbumId=XXXX
Add a WHERE clause – like in the second SQL – to update the items in just one album. It is beyond the scope of this post to tell you how to execute SQL, so if you don’t know, you’ll have to learn or just forget the idea.
As you add objects to your gallery, you will need to manually update each caption or re-apply the SQL. But don’t run the SQL more than once against the same set of media objects, or you’ll start to get multiple copies of the Facebook HTML.
More information
To learn more about the Facebook Comments Box, read the documentation. It includes information about moderation tools to help you manage the comments.
I think some of you will really like this trick. Let me know how it goes!
![image_not_centered[4]](http://lh3.ggpht.com/_qh4427KVFsk/TYIpXRUPe6I/AAAAAAAAASs/nOSAxrkMxMA/image_not_centered%5B4%5D%5B5%5D.png?imgmax=800 "image_not_centered[4]")
![image_centered[4]](http://lh5.ggpht.com/_qh4427KVFsk/TYIpYXW9JqI/AAAAAAAAASw/2OYHvXQvpwQ/image_centered%5B4%5D%5B5%5D.png?imgmax=800 "image_centered[4]")
