Creating Facebook LikeBox Module

Details
Category: Joomla Module Development
Last Updated on Sunday, 11 March 2012 15:30
Hits: 3203

This Joomla Module Tutorial will teach you how to develop Facebook likebox module for your site as shown below. Facebook Likebox shows the latest post and fans of the facebook page on your site.

The code for Facebook Likebox is taken from http://developers.facebook.com/docs/reference/plugins/like-box/. Here is the sample code in <iframe> tag.

View source
  1. <iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FLukmyworld%2F132967643489557&amp;width=185&amp;height=550&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=true&amp;header=false" scrolling="yes" frameborder="0" style="border:none; overflow:hidden; width:185px; height:550px;" allowTransparency="true">
  2. </iframe>

We have to use above code to display facebook likebox on the site in our module.

In the above <iframe> tag the one shown in bold is the address of the facebook page.

Creating Variable Request

In the .xml file we will add <config> tag to add variable request like shown below.

Lets create variable request for width, height, facebook link page, show facebook header, show fans, include stream.

View source
  1. <config>
  2. <fields name="params">
  3. <fieldset name="basic">
  4. <field
  5. name="pagelink"
  6. type="text"
  7. label="Facebook Page Link"
  8. description="Link of the Facebook Page to be shown, Example:http://www.facebook.com/pages/Lukmyworld/132967643489557" />
  9. <field
  10. name="width"
  11. type="text"
  12. default="185"
  13. label="Module Width"
  14. description="Facebook Likebox Width in px" />
  15. <field
  16. name="height"
  17. type="text"
  18. default="550"
  19. label="Module Height"
  20. description="Facebook Likebox Height in px" />
  21. <field name="fbfans" type="list" default="1" label="Show Fans" description="Show Fans Thumbs or not ">
  22. <option value="1">Show</option>
  23. <option value="2">Hide</option>
  24. </field>
  25. <field name="include_stream" type="list" default="1" label="Include Stream" description="Include or not the stream of latest posts from your Facebook Page.">
  26. <option value="0">No</option>
  27. <option value="1">Yes</option>
  28. </field>
  29. <field name="fbheader" type="list" default="2" label="FanBox Header" description="Show Header Image for find us of Like box if fans or stream is enabled">
  30. <option value="2">Show</option>
  31. <option value="1">Hide</option>
  32. </field>
  33. </fieldset>
  34. </fields>
  35. </config>

<fields> tag contains the name attribute which will be used in the php file to access the variable.

<fieldset> tag groups the variable request under ‘name’ attribute.

<field> tag contains the variable request with various attribute such as name of the variable,type of the variable, default value of the variable, label shown in the module and description shown on mouse hover.

Accessing Variable Request

A variable defined above have to be accessed in the php file.It is done by the get() function.

View source
  1. $width = $params->get('width');
  2. $height = $params->get('height');
  3. $fbfans = $params->get('fbfans');
  4. $incStream = $params->get('include_stream');
  5. $fbHeader = $params->get('fbheader');
  6. $pagelink = $params->get('pagelink');

where,

$params is the <fields> tag name defined in .xml file.

Now we have to use above variable request to create <iframe> tag and display that <iframe>.Using the above <iframe> tag and creating <iframe> tag using the variable request.

View source
  1. $inputfb = '<iframe src= "//www.facebook.com/plugins/likebox.php?href='.$pagelink.'&amp;width='.$width.'&amp;height='.$height.'&amp;colorscheme=light&amp;show_faces='.$fbfansbool.'&amp;border_color&amp;stream='.$incStreambool.'&amp;header='.$fbHeaderbool.'" scrolling="yes" frameborder="0" style="border:none; overflow:hidden; width:'.$width.'px; height:'.$height.'px;" allowTransparency="true" ></iframe>';

Here '.' is a concatenation operator.

Files Required

1) mod_fblikebox.php: This file is the entry point for the module. It will perform necessary initializations and call helper routine to collect necessary data and include the template which will display module output.

2) helper.php: This file contains the helper class which will collect necessary data to be used in the module from database or any other sources.

3) mod_fblikebox.xml: This file contains the information about the module. This is the installation file for the module.

4) tmpl/default.php: This is the file used for displaying the module output.

1) Creating file mod_fblikebox.php

The Complete code of mod_fblikebox.php is

View source
  1. <?php
  2. // no direct access
  3. defined( '_JEXEC' ) or die( 'Restricted access' );
  4. // Include the syndicate functions only once
  5. require_once( dirname(__FILE__).DS.'helper.php' );
  6. $fbin = modFblikeboxHelper::getFBInput( $params );
  7. require( JModuleHelper::getLayoutPath( 'mod_fblikebox' ) );
  8. ?>

2) Creating file helper.php

This file contains the class as defined in mod_ fblikebox.php ,here it is modFblikeboxHelper class and contains function getFBInput().

The complete code of helper.php is

View source
  1. <?php
  2. // no direct access
  3. defined( '_JEXEC' ) or die( 'Restricted access' );
  4. class modFblikeboxHelper
  5. {
  6. static function getFBInput(&$params)
  7. {
  8. $width = $params->get('width');
  9. $height = $params->get('height');
  10. $fbfans = $params->get('fbfans');
  11. $incStream = $params->get('include_stream');
  12. $fbHeader = $params->get('fbheader');
  13. $pagelink = $params->get('pagelink');
  14. if($fbfans == 1)
  15. $fbfansbool = "true";
  16. else
  17. $fbfansbool = "false";
  18. if($incStream == 1)
  19. $incStreambool = "true";
  20. else
  21. $incStreambool = "false";
  22. if($fbHeader == 2)
  23. $fbHeaderbool = "true";
  24. else
  25. $fbHeaderbool = "false";
  26. $src = $pagelink.'&amp;width='.$width.'&amp;height='.$height.'&amp;colorscheme=light&amp;show_faces='.$fbfansbool.'&amp;border_color&amp;stream='.$incStreambool.'&amp;header='.$fbHeaderbool;
  27. $inputfb = '<iframe src= "//www.facebook.com/plugins/likebox.php?href='.$src.'" scrolling="yes" frameborder="0" style="border:none; overflow:hidden; width:'.$width.'px; height:'.$height.'px;" allowTransparency="true" ></iframe>';
  28. return $inputfb;
  29. }
  30. }
  31. ?>

3) Creating installation file mod_fblikebox.xml

This file contains the information about the module.

The complete code of mod_fblikebox .xml is

View source
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <extension type="module" version="2.5" client="site" method="upgrade">
  3. <name>Facebook Like Box</name>
  4. <author>Larenge Kamal</author>
  5. <version>1.7</version>
  6. <description>Facebook LikeBox Module(by Lukmyworld).</description>
  7. <files>
  8. <filename>mod_fblikebox.xml</filename>
  9. <filename module="mod_fblikebox">mod_fblikebox.php</filename>
  10. <filename>index.html</filename>
  11. <filename>helper.php</filename>
  12. <filename>tmpl/default.php</filename>
  13. <filename>tmpl/index.html</filename>
  14. </files>
  15. <config>
  16. <fields name="params">
  17. <fieldset name="basic">
  18. <field
  19. name="pagelink"
  20. type="text"
  21. label="Facebook Page Link"
  22. description="Link of the Facebook Page to be shown, Example:http://www.facebook.com/pages/Lukmyworld/132967643489557" />
  23. <field
  24. name="width"
  25. type="text"
  26. default="185"
  27. label="Module Width"
  28. description="Facebook Likebox Width in px" />
  29. <field
  30. name="height"
  31. type="text"
  32. default="550"
  33. label="Module Height"
  34. description="Facebook Likebox Height in px" />
  35. <field name="fbfans" type="list" default="1" label="Show Fans" description="Show Fans Thumbs or not ">
  36. <option value="1">Show</option>
  37. <option value="2">Hide</option>
  38. </field>
  39. <field name="include_stream" type="list" default="1" label="Include Stream" description="Include or not the stream of latest posts from your Facebook Page.">
  40. <option value="0">No</option>
  41. <option value="1">Yes</option>
  42. </field>
  43. <field name="fbheader" type="list" default="2" label="FanBox Header" description="Show Header Image for find us of Like box if fans or stream is enabled">
  44. <option value="2">Show</option>
  45. <option value="1">Hide</option>
  46. </field>
  47. </fieldset>
  48. </fields>
  49. </config>
  50. </extension>

4) Creating file tmpl\default.php

This file contains the output to be displayed by the module. This file has the same scope as that of the mod_fblikebox.php. So the variables defined in mod_fblikebox.php can be directly accessed in this file. ‘$fbin’ variable defined in mod_fblikebox.php can be directly accessed here.

The complete code of tmpl\default.php is

View source
  1. <?php
  2. // no direct access
  3. defined( '_JEXEC' ) or die( 'Restricted access' );
  4. ?>
  5. <html>
  6. <body>
  7. <?php echo $fbin; ?>
  8. </body>
  9. </html>

5) Creating file index.html common to all

The complete code of index.html is

View source
  1. <html><body bgcolor="#FFFFFF"></body></html>

which will display an empty page.

Now create the zip file of the folder ‘mod_fblikebox’ which contains the following files.

1) mod_fblikebox.php

2) index.html

3) mod_fblikebox.xml

4) helper.php

5) tmpl\default.php

6) tmpl\index.html

The above zip file can now be installed using Joomla extension manager.

After installing the module,’ Facebook Like Box’ module will appear in the module manager.Variable request will also appear on the right side when this new module is opened in the joomla administrator as shown below.

mod_fblikebox_res

Enable this new module and set the position for display of this module on the right side to see the output of the module.

 

Comments (0)

500 characters remaining

Cancel or

Related Articles

Barkot City