Facebook Like Box Sidebar Documentation

If you did not find answer in documentation then ask a support question.

  1. Module position
  2. Title of module still shows up
  3. Like Box in gray style
  4. Rounded corners in Internet Explorer
  5. Like Box type
  6. Like Box is empty
  7. Module is not showing or tab does not slide
  8. Modules Anywhere
  9. Open Like Box with menu item or own link
  10. Like Box appears under flash animation
  11. Like Box appears under other layers
  12. Calendar date picker displays under Like Box
  13. JavaScript Frameworks which overrides and breaks JoomlaMooTools

  1. Module position

    Module should be published at position before </body> closing tag. Usually it is named debug. If you do not have such position then add following code to your template in index.php file

    <jdoc:include type="modules" name="debug" />
     

    and in file: templateDetails.xml

    <position>debug</position>
     

    If you published module in any other position it should still work.
    You should hide module title if you publish it in other position.

  2. Title of module still shows up

    Like Box is working fine, but title of module still shows up, e.g. in left column with other modules.

    Then go to module configuration and on the left in Details section set Show title: Hide. On some templates it would not help, because there will be still displayed empty box without title and any content. Then you have to published module in other position or the best way will be to publish module in debug position.

  3. Like Box in gray style

    • Set background color: rgba(130, 130, 130, 0.7)
    • Set Like Box border color: #545454
    • Select toggle tab graphic with black color
  4. Rounded corners in Internet Explorer

    To support rounded corners in Internet Explorer 7 and 8, CSS3 PIE was implemented. There are no guarantee that it will work. It depends on you Joomla! template and other extensions. CSS3 PIE would work by default only if you have installed Joomla! in root directory of your domain.

    If you have site in sub-directory then you have two edit CSS file for IE located in: media/mod_pwebfblikebox/css/ie.css or modules/mod_pwebfblikebox/css/ie.css and correct absolute path to file PIE.htc.

    If you have installed Admin Tools Professional then you have to set in .htaccess Maker to Allow direct access to files mention in previous sentence.

  5. Like Box type

    • Use HTML5 type of Like Box if your template standard is HTML5.
    • Use XFBML for older standards of templates and add an XML namespace to the <html> tag of your document. This is necessary for XFBML to work in earlier versions of Internet Explorer.
      <html xmlns:fb="http://ogp.me/ns/fb#">
    • Use Iframe type if other types do not work.
  6. Like Box is empty

    Make sure that URL which you have set in configuration exists and is a Facebook Page and not a User Profile.

    If your URL is a Page and Like Box is still empty then try to use Iframe type. Like Box can also be empty if your are not logged into Facebook. You can check page privacy settings on Facebook. If it would not help then you have to contact Facebook.

    If your URL is facebook.com/pages/your-page-name/123456789 then it is a Page.

    If your URL is facebook.com/your-name then it do not have to be a Page.
    Go to following URL and check if you can see a category. Remember to replace your-name with correct short alias. If there is a category then it is a Page. If there is an error: (#100) Unknown fields: category, then it is a User Profile, so you can not use it for Like Box.
    https://graph.facebook.com/your-name?fields=category

  7. Module is not showing or tab does not slide

    Check if you have published module in position which your template has.

    Check if you have assign module to all menu items. If not then do this at least for test.

    View page source in your browser and try to find string: mod_pwefblikebox. If there will be no such string then one of previous tip is still not done.

    Enable Debug mode in Advanced tab of module configuration and reload front-end page with Like box. It would display informations about common MooTools conflicts with other JavaScript libraries if any would be found.

    If you have Joomla! 1.5 then check if you have loaded MooTools 1.11+ or MooTools 1.2.4+ (with enabled System Plugin - Mootools Upgrade). With older versions of MooTools contact form might not work.

    Try to unpublished other modules using JavaScript to find which one is breaking Joomla MooTools Framework.

    To check if there is any script running jQuery, view page source in your browser and try to find string: jquery. If there is such string then try to find jQuery.noConflict(). If there is not such string then you have to add this code (read more how to use no conflict mode of jQuery).

    Another reason can be plugin or template which compress and merge JavaScript files and puts them after JavaScript declaration hard coded in document header. Script from this module has to be before that declarations. Move all compressed files at the beginning or exclude this module from compression.

    Check also if your template removes Joomla! MooTools and puts own script at the end of document header.

  8. Modules Anywhere

    If you have loaded module into template with extension Modules Anywhere then it would not work, because JavaScript and CSS files are not being loaded into document header. You have to publish contact form in some template position. You can load module with Modules Anywhere but only into Articles or Custom HTML module (Joomla! 2.5+).

  9. Open Like Box with menu item or own link

    Like Box can be opened with own link, image or other HTML element by using JavaScript code which you can find in Advanced Tab of module configuration or use following code, where ID has to be replaced with an ID of module. You should not use example with JavaScript code if you want to place it in editor because it will be removed after saving.

    <a href="javascript:pwebFBLikeBoxID.toggleBox()">Show Like Box</a>
    <a href="#" onclick="pwebFBLikeBoxID.toggleBox()">Show Like Box</a>
    <img src="path/image.png" onclick="pwebFBLikeBoxID.toggleBox()" alt="" />

    Create menu item type of: External URL and as link use following code, where ID has to be replaced with an ID of module:

    javascript:pwebFBLikeBoxID.toggleBox();
     
  10. Like Box appears under flash animation

    Add following HTML code to OBJECT tag displaying your flash animation:

    <param name="wmode" value="transparent">
     

    and following one to EMBED tag

    wmode="transparent"
     
  11. Like Box appears under other layers

    Edit module CSS file with layout located in: media/mod_pwebfblikebox/css/likebox.css (location depends on Joomla! version) and change in first declaration z-index property. You have to test how big it should be in your case.

    .pwebfblikebox.slidebox, .pwebfblikebox.sidebar, .pwebfblikebox.tab {
        position: fixed;
        top: 150px;
        z-index: 9999;
    }

    You have to do also next tip if you want to use calendar data picker.

  12. Calendar date picker displays under Like Box

    By default calendar date picker has set z-index style property to 100. If you have moved Like Box on higher level, e.g.: 10000, then you have to move also date picker one level higher: 10001. Paste following code at the end of module CSS file with layout located in: media/mod_pwebfblikebox/css/likebox.css (location depends on Joomla! version):

    body div.calendar { z-index: 10001; }
     
  13. JavaScript Frameworks which overrides and breaks Joomla! MooTools

    If your template or any other extension use on of following JavaScript library, then Joomla! MooTools might not work. Module Popup Box needs MooTools to work properly.