Creating a Facebook component in Adobe CQ

In this blog entry, we will see how to create a component that displays the Facebook Like button.
A Facebook Like button needs no explanation. It allows a user to like your company’s Facebook page and also keeps a record of the number of people “Liked” the page.

Facebook provides great documentation on how to add this into your website. It’s very much straightforward. Get the code from Facebook’s Configurator. If you add the code to a webpage that is available locally and test it, it won’t work. If you are testing the code, ensure that you uploaded the webpage in a server.

Edit the template to include the following script:

<div id="fb-root">
<script>(function(d, s, id) {
 var js, fjs = d.getElementsByTagName(s)[0];
 if (d.getElementById(id)) return;
 js = d.createElement(s); = id;
 js.src = "//";
 fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

(Don’t ask me for details. I got it from Facebook. 🙂 )

Now create a component, Facebook. We need only one field that’s configurable. It’s for providing the Facebook page URL of your company.
See the screenshot below that depicts the node hierarchy. (The component development is explained in detail in one of my previous posts.)


Following is the JavaServer page associated with the component. (facebook.jsp)

<%@include file="/libs/foundation/global.jsp"%><%
%><%@page session="false" %>
 String facebook=properties.get("facebook", "Enter the product page.");
 if (facebook=="Enter the product page.")
out.write("<p><div class=\"fb-like\" id=\"fb\" data-href=\""+ facebook +"\" data-send=\"false\" data-width=\"450\" data-show-faces=\"true\"></div></p>");

Drag-and-drop the component to the web page. Right-click, select Edit, and provide the Facebook page’s URL.
Note that the component is not displayed at this moment. Close the page and open it again to see the component. (I think it has something to do with the Facebook implementation; I will experiment more later.)

Comments are closed.