Facebook Like

Print PDF

Your download has started.

Get Technical Support, Implementation Help & Additional Customization for this module for just 5$.
Buying this support package will also help us develop the software open source.

Spearhead Facebook Like Button Tutorial

Facebook Like Main Configuration Screen

Click to expand

Here you can see the Spearhead facebook like button joomla administration page. Click on the image to see the expanded screen.

This is where you configure everything about the module.

There are 3 main sections to the page . 1) Details 2) Menu Assignment 3) Module functionality parameters.

There can be more sections with regard to the module functionality parameters but we have kept the module to be as simple as possible to the users as possible.

Now lets get to the module functionality.This is the important bit in configuring your facebook like button.

Facebook Like Functionality Configuration Screen

Click to expand

The above image shows the functional parameters of the facebook like button module.

We will go into the detailed explanation of each parameters.

1) Module Class Suffix : Add specific class suffix to the div element which wraps the like button.

2) Like Button Type : Initially facebook released the iframe version of the facebook like button . Later when they released the connect api and xfbml tags, they also released the xfbml version of the like button. There is not clear advantage of one over the other. With the XFBML like button there is an additional javascript file that needs to be loaded from the facebook servers. XFBML also loads the iFrame using javascript. The main difference between the iFrame and the XFBML versions of the Facebook like button is that there is an additional Send button which you can add along with the like button and also that you can subscribe to the 'edge.create' event which lets know when the button is actually clicked by users where you can run your own analytics code based on it.

By default the module runs on the iFrame version.

3) Send Button : You need to be using the XFBML version of like button in order to use this functionality and this option is not available in the iFrame version.
The Send Button lets your site users to easily send content to their friends.
People will have the option to send your URL in a message to to the group wall of one of their Facebook groups or their Facebook friends and as an email to any email address. While the Like Button allows users to share content with all of their friends, the Send Button allows them to send a private message to just a few friends.

You can see and try out to the right side of the article the XFBML version of the like button module in action.

4) Url Auto Discovery : The module automatically detects the current url of the page and add it to the like button.
This way you don't have to configure separately for each page.

5) Url To Like : When the above mentioned Url Auto Discovery is turned off you can set the module to like a single static url
eg: Sometimes you set the module to like the url of your site home page only at the top most position of your page, at all the subpages in your site.

This option is showed in the third demo to the right side of the page.

Now you must be thinking what if you need a like button module setup just for your main site url eg: www.spearheadsoftwares.com
and another copy of the module setup which is like a like button which is specific to each different page of yours.
This you can do by copying the facebook like button module from the module manager and setting a new configuration for that copied joomla module.

6) Layout Style : There are 3 layout style standard,button_count & box_count. The button_count layout has been shown in the third demo on the right side of the page.

7)Show Faces : The first like button shown to the right of this page is set to show faces. Once u like the page or when you are logged in to facebook while you are visiting a page, if any of your friends liked the page it will show the faces of your friends who like the page.

8) Module Width : With this option you can set the width of the like button module which means you are actually setting the width of the iframe which holds the like button module, so this is a fail proof width setting method.

But bear in mind that after extensive testing we have calculated the optimum width with all the features of like button will be around 450px which we have set as the default width.

9) Verb to Display : You can choose from either the default word/verb "Like" or "Recommend" as shown in the third like button demo.
You can set the verb "Recommend" for like button intended to like a specific static url like a product page of yours or your site name and the "Like" verb for normal pages.
10) Font : Choose the font of the text that is rendered in the like button.
11) Color Scheme : Select between default "light" and "dark" color schemes for the like button. The third demo uses the dark theme.
12) Language : Default language code of en_GB is used. For you to use eg: italian version of the like button set the language to it_IT.
13) Module Height : Height of the facebook like button can be configured with this option. This essentially set the height of the iFrame which and is fail proof.
Recommended height is 90px which we have tested for all functionalities of facebook like button to appear and we have set it as the default width in the module.

More over make sure the like button is contained inside div's which are not set with a style of overflow:hidden, if you find yourself in a situation where some part of the like button is hidden , just make the wrapper div style to overflow:visible .

Download - Introduction

The facebook like feature is one of the most popular form of social marketing tool that can be used by any application (web/non web) to integrate so that users using it can share it to rest of the possible users in their reach. The facebook like feature basically starts with a like action. Its a small html content loaded from the facebook severs directly into the web pages.

The Joomla Facebook Like button integrates this feature into any Joomla powered websites/application as a downloadable/installable module.

Current version is 3.6 compatible with Joomla 2.5, Joomla 1.5, Joomla 1.6 and Joomla 1.7 natively.

You can see to the right of this page the facebook like button module in action. =>=>=>

Currently we provide separate like button module for Joomla 2.5, Joomla 1.5, Joomla 1.6 and Joomla 1.7

You can download the files from here

Now that you have downloaded the facebook like button module, check/click the tutorial tab to go through the tutorial and documentation.



  • Latest Facebook api code implementation(Joomla 3)
  • Advanced styling of the like button using the design parameters.(Use the design tab for styling the module output)
  • Iframe/XFBML versions of like button(Legacy for Joomla 2.5 and below)
  • Customization of width and height for the like button module.
  • Url auto discovery feature - the url to be liked for each page is automatically detected by the module.
  • Works in both Joomla SEF and NON SEF modes.
  • All facebook like button customization are available at the module backend.
  • Send button alongside of like button when the module is operated in XFBML mode.
  • Set the language of the like button to be rendered.
Along with the above features, as per our customer feedback we have also provided language support of the module for the following languages.
Language Support
  • German(de)
  • Spanish(es)
  • Italian(it)
  • Hungarian(hu)
  • Polish(pl)
  • Dutch(nl)

blog comments powered by Disqus
You are here:   HomeProducts & DownloadsFacebook Like Joomla
| + - | RTL - LTR