[MOD] Add a Facebook "Like" Box page & panel

Post by **Martin** » Sun Mar 13, 2011 12:48 am

This is really nothing special as it simply uses the existing modular template approach provided by ISC...

I've created a custom page template followed by a panel that is called by the page as below.

Copy the Page.html file (from /templates/__master) to your theme directory and rename the copy to _page-social.html
Go to the Panels sub-directory for your theme
Create a new file called PageSocialFBBox.html
Open the file and put the code (see below) into it.
In ISC Admin > Website Content > Create a Web Page
Add your normal content/waffle to the page and make sure you choose the "_page-social.html" as the Template Layout File

_page-social.html

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
%%Panel.HTMLHead%%
<body>
<!-- Page incorporating in external social input, etc... -->
<div id="Container">
	%%Panel.Header%%
	<div id="Wrapper">
		%%Panel.WrapperBanner%%
		<div class="Left" id="LayoutColumn1">
			%%Panel.SideSubPageList%%
			%%Panel.SideCategoryList%%
			%%Panel.SideNewsletterBox%%
		</div>
		<div class="Content Wide WideWithLeft" id="LayoutColumn2">
			%%Banner.TopBanner%%
			%%Panel.PageBreadcrumb%%
			%%Panel.PageContent%%

<!-- Here's the template code required to display the FB Like Box panel -->
			%%Panel.PageSocialFBBox%%

			%%Panel.PageComments%%
			%%Banner.BottomBanner%%
		</div>
		<br class="Clear" />
	</div>
	%%Panel.Footer%%
</div>
</body>
</html>

/Panel/PageSocialFBBox.html

Code: Select all

<div class="Block Moveable Panel" id="PageSocialFBBox">
<!-- START FACEBOOK LIKE BOX CODE -->

	<!-- Your Facebook generated code goes here -->

<!-- END FACEBOOK LIKE BOX CODE -->
</div>

You can generate the code you need for this here:
http://developers.facebook.com/docs/ref ... /like-box/

Here's an example of the PageSocialFBBox.html below:

Code: Select all

[code]<div class="Block Moveable Panel" id="PageSocialFBBox">
<!-- START FACEBOOK LIKE BOX CODE -->
	<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like-box href="http://www.facebook.com/pages/[yoursite]/[yourpagenumber]" width="650" show_faces="true" stream="false" header="true"></fb:like-box>
<!-- END FACEBOOK LIKE BOX CODE -->
</div>

[/code]