Ok so I was trying to figure out how to add a Facebook like button to an IPB Board system, and it was not as easy as it should have been!

turns out, you need valid license to download their Facebook like module, and for what ever reason I couldn’t make the edits directly to the theme files to include the JavaScript and required div.

So this is what i did.

first I created a bbcode tag so that i could do this:

[fb]http://URL-to-like[/fb]

and it print out the right code of:

<fb:like href="http://URL-to-like"></fb:like>

that was easy. just add a bbcode tag in the bbcode administration page.
Name the tag Facebook Like Button
Create a tag [fb]
define the replacement as:

<fb:like href="{content}"></fb:like>

note: that %7Bcontent%7D above is actually {content}
for what ever reason my code parser is changing it.

Leave all the other attributes defaulted.

Then came the annoying part… how to add the required JavaScript and element to the post pages.

Solution? yes! find the JavaScript file: /public/js/ips.topic.js
and then at the very bottom of the file add the following code:

function loadFacebookMod() {
	var div = document.createElement('div');
	div.id = 'fb-root';
	if (document.body.firstChild){
		document.body.insertBefore(div, document.body.firstChild);
	} else {
		document.body.appendChild(div);
	}
	window.fbAsyncInit = function() {
	  FB.init({appId: 'your facebook app id', status: true, cookie: true,
	           xfbml: true});
	};
	(function() {
	  var e = document.createElement('script'); e.async = true;
	  e.src = document.location.protocol +
	    '//connect.facebook.net/en_US/all.js';
	  document.getElementById('fb-root').appendChild(e);
	}());
}
window.onload = loadFacebookMod;

what’s happening here is that first, you are creating a function that creates the

<div id="fb-root:"></div>

needed by the Facebook js to work, appends it to right after the opening body tag, and then we load the Facebook JavaScript. After we create that function, we tell it to load the function when the page is done loading (to make sure that it finds the body tag no problem).

Now am sure there is a better way to do this… but I couldn’t find it, so, this is my solution.