Social Media - Jubair Saidi's Blog

By: Jubair Saidi  09-12-2011

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.


Other products and services from Jubair Saidi

09-12-2011

Uncategorized - Jubair Saidi's Blog

It gives me all the power of opening remote files with any of my editors and then saving them back to the server automatically that Coda gives me, as well as give me an effective method of synchronizing my local and remote files or transferring files from one server to another as simply as drag and drop.


09-12-2011

CSS/XHTML - Jubair Saidi's Blog

First write a function to include into the file (I usually use an external js function file so I can apply any of them anywhere needed..


09-12-2011

Software - Jubair Saidi's Blog

For Initial site and XHTML I use Coda, for PHP-jQuery I use NetBeans, for CSS I use CSSEdit, and for mysql I use Navicat. What i do is have code clips for my wordpress page layouts that already include all the most commonly used tags. I have gone through many editors, and IDEs trying to find the right ones to use for my needs.


09-12-2011

Javascript - Jubair Saidi's Blog

Container: this is the css element for the element container that will be populated with the processed and returned result/data from the logic file. So you can basically access different parts of the manage_users parent action by assigning a sub action. Function processData(logicFile, container, action, id, form, onComplete). The ~ indicates that there is a sub action to this action. Var Options = new Array.