Creating a Custom Width Fan Page Widget

One of the most frustrating parts of Facebook promotion is that the fan page widgets are a fixed width. I need mine to be 160 wide to fit in my sidebar. Here is how to get your widget to be 160.

First, go to NeoSmart.DE for their Facebook Wall source code. The link to the source code is in the top right of the page. Download the code. This is your starting point for creating your custom widget.

Next, use their online interface to create your own custom code version. You'll have to create a token - quick and free - and enter the ID of the fan page you want to promote. So far, so good.

The ZIP file they give you will contain a few files. Put the image files into whatever directory you normally store images in. Also, create a file that is 1 pixel by 1 pixels that is just white. Call that 1x1.jpg and put it into the same directory.

Take the content of the provided CSS file and add it to the bottom of your own CSS file. You're going to tweak two things in this text. First, look for the LIKE graphic and alter that so it's pointing to the directory you put the graphic in. So for example mine says

background:url(/images/like.gif) no-repeat 0 0 #FFF;

Do the same thing with the loader graphic.

Change the overall wall width to 160 (the very top set of entries) and also the wall data margin left to 6 pixels (about 8 sections down).

If you're not using CSS files, it's really time that you begin to do that :) If you're really not using CSS files yet, rename the CSS file to something meaningful for your site. For example on my Sutton site my CSS file is called sutton.css. Then include that file into EVERY page on your site with the command

<link rel="stylesheet" href="/lisa.css" type="text/css">

(substituting "lisa" with your own file name of course). You want this command to go in your HEAD area somewhere.

If you have lots of files, I highly recommend using SearchAndReplace by NodeSoft to do this automatically for you. It'll look through all files in a directory (or a set of directories) and replace one string with another within all of them.

Next, it's time to add in the main script. In every file in your site, add this code into your HEAD area -

	<script src="/jquery-1.6.1.min.js" type="text/javascript"></script>
	<script src="/jquery.neosmart.fb.wall.js" type="text/javascript"></script>
	<script type="text/javascript">

Note that the special code in the center is provided by the NeoSmart website, on their main page. You cut and paste what they provide you into this spot.

The four parameters you want to set are:

avatarAlternative: '/images/1x1.jpg',
avatarExternal: '/images/1x1.jpg',
useAvatarAlternative: true,
useAvatarExternal: true

Again set the images directory name to point to wherever you store images. So add those four commands to the end of your code, before the final ]); part. This is done to eliminate all avatars - both your own and ones associated with any posts - to get things to fit.

Put the jquery-1.6.1.min.js and the jquery.neosmart.fb.wall.js into your main level directory.

Edit the fb.wall.js one to fix the date order. Right now it's in European date format, just swapt the month and day around so it's

return month+'.'+day+'.'+date.getFullYear()+' '+o.translateAt+' '+hour+':'+minute;

at about line 255.

Also in this file, at about line 103, I have to change the way photos show. Otherwise they'd push out of the 160 size. So I replace the block of code there with -

	output += '<div class="fb-wall-media-container">';
	if(exists(data[k].link)) output += '<a href="'+data[k].link+'" target="_blank" class="fb-wall-media-link">';
	output += '<img class="fb-wall-picture" src="'+data[k].picture+'" />';
	if(exists(data[k].link)) output += '</a>';
	output += '</div>';

This ensures photos show up above the associated text, and don't try to show up to the left side.

Finally, to implement. In that header code we inserted before, there's a line along the lines of

$('#example1').fbWall({ id: .....

whatever word is used there, example1 or anything else you chose to name it, you need a matching call in your actual page to show the box. So in my case I always have an included sidebar to draw my sidebar ad area, so the code isn't in every single page. In that sidebar include file, I now add

<TABLE width=160><TR><TD>
<div id="example1"></div>

That's it! Your facebook feed should now fit perfectly into a 160 wide sidebar!

Let me know if you have any questions!

Facebook Social Networking
Updating your Facebook Fan Page from Twitter

Social Networking Websites

Marketing your Small Business

Work from Home