Simple FaceBook Integration

Integrating with Facebook is simple if you are building a web app. The following page describes how to integrate Facebook with a standard web app only.

If you wish to integrate with Facebook whilst using our App Shell, you will need to be very familiar with the Facebook APIs and their Javascript SDK. This is because Facebook has strict guidelines on how they allow their platform to be integrated with others. Any App wants to utilise features of the Facebook platform must be registered with Facebook, whether they’re native mobile, desktop or mobile web apps. The Facebook Developers Site can assist you should you wish to do this - and our own Support Team.

The following are some useful links you may wish to bookmark. They are not necessary for this module.

The Like Button

Adding a "Like" button to an Interaction is as simple as embedding the iFrame code (URL version) generated by FaceBook into a message Interaction. The code provided by Facebook takes little customisation:

http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fyourwebsite%2FFBLike%2F&width=250&height=80&colorscheme=light&layout=standard&action=like&show_faces=true&send=true&appId=26450472544

This will add a Like button wherever the code is placed within the HTML:

and when the user clicks it - it will show a 'Like' on their Timeline.

Example:

The previous example used this code:

 
<h1>FaceBook Like!</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ut accumsan urna.<br/>
Phasellus nisl risus, suscipit non libero a, rutrum auctor purus. Mauris felis diam, hendrerit porta elit.<br/>
Vestibulum nunc ligula, accumsan vitae metus sit amet, consequat placerat purus.<br/>
Mauris auctor, ligula in euismod laoreet, diam ipsum consectetur tellus, eget rutrum erat purus at lorem.<br/>
Vestibulum varius eros a sapien posuere porta. Sed imperdiet placerat velit, non aliquet odio ultrices vel.<br/>
Pellentesque nec dapibus nisl.<br/>Morbi quis nisl turpis. Quisque fermentum purus eu orci commodo adipiscing.<br/>
Mauris fringilla pellentesque est eleifend sodales. Suspendisse in mollis leo.<br/>
Nulla elit odio, semper ut arcu sit amet, vehicula accumsan est.<br/>
Duis semper augue et neque imperdiet, nec dapibus mauris volutpat. Duis id pulvinar metus.<br/>
In eleifend nunc ut ante rhoncus ultrices. In et lobortis ipsum, nec laoreet metus.<br/>
</p><iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Ftraining.blinkm.co%2Flouisemunnoch%2FFBLike%2F&amp;width=250&amp;height=80&amp;colorscheme=light&amp;layout=standard&amp;action=like&amp;show_faces=true&amp;send=true&amp;appId=26450472544" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:80px;" allowTransparency="true"></iframe></p>

Sharing on FaceBook

Simply the add the following to your mADL (or Message) Interaction:

 
$t->fetch("http://anywebsite.com");
$t->between("<tag here>", "<tag here">");
$t->prepend("<a href=\"#\" 
 onclick=\"
 window.open(
 'https://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent(location.href), 
 'facebook-share-dialog', 
 'width=626,height=436'); 
 return false;\">
 Share on Facebook
</a>");
return $t->result;

You should get something similar to this:

In a message Interaction, simply place this code:

 
<a href="#" 
 onclick="
 window.open(
 'https://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent(location.href), 
 'facebook-share-dialog', 
 'width=626,height=436'); 
 return false;">
 Share This on Facebook!
</a>

To get something that might look a lot like this: