Display multiple Facebook comment box in one page in ASP.NET

Facebook comment box is one of the favourite plugin to promote website and build network through social networking website. It enables user to post comment in their Facebook wall along with posting the comment in the website.

It is very straight forward plugin and just a matter of copying few lines of javascript and paste into the top body section of the page. You can find the full documentation in Facebook developer section.

The basic setup and implementation displays one comment box per page using unique URI. I wanted to implement multiple comment box in one page as the contents are different from each other, basically a news page which contain multiple news but it is dynamic so I cannot setup static number of comments box.

I have used repeater control to display number of news in one page, hope you are familiar with asp.net repeater control and used SQL datasource to bind data programmatically. Here is the simple Repeater code and SQL datasource code in case if you don’t know what I am talking about –

<asp:Repeater ID="Repeater1" runat="server" DataSourceID="dsContent">
                        <ItemTemplate>
                            <h3>
                                <%#Eval("title")%></h3>

                            <div id="content">
                                <%#Eval("description")%>
                            </div>

                        </ItemTemplate>
                    </asp:Repeater>
                    <asp:SqlDataSource ID="dsContent" runat="server" ConnectionString="<%$ ConnectionStrings:LocalSqlServer %>"
                        SelectCommand="select newsId, title, description from facet_news where status='Current' order by sortOrder asc" />

Now you can see the from the above code it renders the number of news depending on the condition of my select statement. It looks like this –

Lets look at the Facebook comment plugin code, according to Facebook developer’s instruction, it can be implemented in few ways e.g. simple HTML5 code, iFrame and XFBML. In this example I am showing how to do it using simple HTML5 code. Lets explore the javascript code.

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

The above code block needs to be placed in the page body tag and as we can see it is very straight forward loading the js files in DOM and calling the Facebook API. Lets place this in the Body tag of the page like below –

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">

<style type="text/css">
 div#print_area img { border: 1px solid gray; padding: 3px; }
</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<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>
    <div class="module mod-rounded mod-rounded-grey">
        <div class="box-t1">
            <div class="box-t2">
                <div class="box-t3">
                </div>
            </div>
        </div>
<! --- my other content goes here -->

</asp:Content>

Just to let you know I am using MasterPage in my website so body contents goes into Content Place Holder.

Let’s explore the javascript to display the comment box in the content. Now place the following html div under the content where you want to display the Facebook comment box. Fair enough let’s do it.

<div class="fb-comments" data-href='http://www.facet.asn.au/news.aspx' data-width="450"></div>

I have placed this line in the repeater ItemTemplate section like this –

 <asp:Repeater ID="Repeater1" runat="server" DataSourceID="dsContent">
                        <ItemTemplate>
                            <h3>
                                <%#Eval("title")%></h3>

                            <div id="content">
                                <%#Eval("description")%>
                            </div>
                            <div class="fb-comments" data-href="http://www.facet.asn.au/news.aspx" data-width="450"></div>
                        </ItemTemplate>
                    </asp:Repeater>

Now the problem is it displays only one comment box even though I have more than one news displayed in the page. The way this plugin works is based on the unique URI as I mentioned earlier. So from the above line of code it defines as one URL event hough there are multiple items in the page. So to make it unique URL I have added the newsId parameter which will differentiate between the URLs. Here is the modified code now –

 <asp:Repeater ID="Repeater1" runat="server" DataSourceID="dsContent">
                        <ItemTemplate>
                            <h3>
                                <%#Eval("title")%></h3>

                            <div id="content">
                                <%#Eval("description")%>
                            </div>
                            <div class="fb-comments" data-href='http://www.facet.asn.au/news.aspx?id=<%# eval("newsId") %>' data-width="450"></div>
                        </ItemTemplate>
                    </asp:Repeater>

Lets see the page when rendered –

Wonderful, lets enjoy coding.

Happy coding.