Using Facebook Comments Box with Umbraco

From today visitors can comment on articles on my page http://laikaslair.dk using Facebook Comments Box . It is a fast and easy way to extend user experience on your website.

There is one catch thou, in order to post comments, you must log in using your Facebook account. If you don’t have one you have to create one (c:

So why using it,.. ? well i have adopted this platform mainly for these three main reasons:

  • It prevents abuse like link stuffing, and spam.
  • Facebook accounts are made mainly by real people (c;  and it prevents people from hiding behind anonymity and making personal attacks on others.
  • Visitors have the option for sharing their comments with others, so my articles can be read by a larger audience.

Well i hope you are convinced (c: her’s how it is done..

Firstly you have to go to https://developers.facebook.com/docs/reference/plugins/comments/ and get a Comments Box code snipped. Follow the instructions and place it in your code. I my case I’ve placed it in a Masterpage or in Umbrao term a template.

To make the Comments Box page specific you have to get your current page URL. Umbraco provides you with tools to do just that. So you don’t have to wright any serverside code at all, just use the umbraco:Item .

<umbraco:Item field="pageID" runat="server" Xslt="umbraco.library:NiceUrl({0})" insertTextBefore="<div class='fb-comments' data-href='" insertTextAfter="' data-width='590'></div>" />

Now copy and paste your javasctipt

<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=xxxxxxxxx";
fjs.parentNode.insertBefore(js, fjs);
} (document, 'script', 'facebook-jssdk'));
</script>

and you are done ,..  (c:

happy coding.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: