Lightquick Web Design - High Quality, Low Cost

Work continues apace for those that want the new Facebook like this button for Joomla 1.0.15. See it working beautifully just here, click on it to test!  ---->

(If you are viewing this page on it's own then you'll see the FB like box generated using the xfbml method, if you are viewing this page as one amongst many on the blog then you will see the old FB share icon)

The older method of sharing a page using the small facebook F icon is now deprecated, ie. obsolete as Facebook don't want you to use it and most likely they will turn it off some time in the future. However the old version works for the moment and it is easy to use and easy to implement. You can see it in use here on the left on this image of a Joomla blog article.

The new method of inserting a Facebook Like this link requires use of the new Facebook API to generate the buttons automatically placing them anywhere on your page in the desired format. This sounds fine but in fact is reasonably difficult to set up and difficult to implement. You need to register an API key for your site and then you will need to install a new mambot. This mambot needs to create a set of og: property tags that define the page characteristics so that Facebook can pick them up and display them properly. Finally the plugin drops the Facebook code on the right place on the page. You can add the facebook like button anywhere you want on the page by using some facebook tags { facebook } { / facebook } (but without the spaces...) See an example here:

The facebook bot has been modified to have the choice of using the old share.php method as well as the new iframe/xfbml methods of dropping the Facebook code on the page. It now generates the correct og: and fb: property tags. It now generates several of the main tags, the essential ones for Facebook are og:url, og:image and og:title, the others are all optional though they may be a requirement in the future.
The facebook like this mambot works on joomla 1.0.15 content as well as with jdownloads 1.4, virtuemart 1.0.15, com_bookmarks 2.6 and frontpage content. If you look at the page source of this page (view - page source in Firefox) and have a look at the og: property tags you will see them in a similar fashion to that below:

<meta property="fb:app_id" content="11111111" />
<meta property="og:type" content="article" />
<meta property="og:site_name" content="Lightquick Web Design - 
High Quality, Low Cost" />
<meta property="fb:admins" content="admin ID" />
<meta property="og:description" content="Work continues apace for those 
that want the Facebook button for Joomla 
1.0. The older method of sharing a page using the small facebook icon is
now deprecated, ie. Facebook don't want you to use it as they will turn
it off some time in the future. However it works for the moment and it 
is easy t" />
<meta property="og:title" content="Facebook like this button for Joomla 
1.0.15 content items" />
<meta property="og:url" content="http://lightquick.co.uk/facebook-like-this-
button-for-joomla-1.0.15-content-items-2.html" />
<meta property="og:image" content="http://lightquick.co.uk/images/stories
/facebook-example.jpg" />

As you browse this site you will see that parts of the site are still using the old version of the Facebook share.php with the old 'F' button, this is because the old button still works best on blog pages.

The og:image tag has been awkward to implement as it required the bot to get an image from the page. Which do you choose, the first, second, third or last? It is easy enough for virtuemart as there is only one thumbnail image but for jdownloads and other content it is difficult to decide which and difficult to get the image chosen. However, it is done now and it selects the first image.

These changes have required a new version of the facebook mambot that we previously created for Joomla 1.0.15/Joostina 1.2.The old version just gave you the old share this button, the new version caters for the new functionality.

The two new methods iframe/xfbml are both catered for, however the xfbml method requires that you insert the JSDK code. We have also created another mambot that drops the SDK code in the right place. This allows you to use Facebook tags such as these within your pages.

As well as the two new mambots this FB button functionality also requires changes/hacks to the following files:

/public_html/includes/joomla.php
Changes made here to J1.0.15 allow creation on new meta 'property' tags.

/public_html/administrator/components/com_virtuemart/html/shop.product_details.php
Changes made to VM1.0.15 to allow the facebook mambot to displa/y and operate on virtuemart product items.

/public_html/administrator/components/com_virtuemart/html/shop.browse.php
Changes made here to VM1.0.15 to allow the facebook mambot to display and operate on virtuemart category descriptions.

/public_html/components/com_jdownloads/jdownloads.html.php
Changes made here to allow the facebook mambot to display and operate on jdownload 1.4 items.

I will include these changes as part of the package for both Joomla 1.0.15 and Joostina 1.2.

Note: Joomla differs from Mambo and Joomla 1.5 in that Joomla 1.0.15 allows mambots to operate on the text content within custom HTML modules. This means that the facebook buttons will pop up unexpectedly in module positions too. If you don't want this you can configure the mambot to remove these.

The new version of the mambot differentiates between blog pages and articles. If you are reading this article on the blog page you will notice the old blue 'F' button which shares the page using the old FB API. If you are looking at the individual article: "Facebook like this button for Joomla 1.0.15 content items" then you will see the new Facebook like this button which uses the new API. If the page is a blog it automatically uses the old API.

Progress - 98%, need to document and then tidy the code for a little more elegance. It now works in all variations and all I need to do is a little more and it will be done and ready to package.

The following stuff to do to complete:

// https?
// canonical urls
//button combinations

This bot when complete, will only be available for Joomla 1.0 and Joostina 1.2. I won't be releasing it for Joomla 1.5+ as plugins like these exist already written by better programmers than me... I am not familar with J1.5 code at all.

The original (share only) bot is here to download - Facebook Share bot for Joomla 1.0 Note the version you can download is the old version that does not provide the new functionality it just implements a facebook share using the old deprecated method.

Note that there is a donate button on that download, send a donation and I'll give you the latest and greatest version of the bot that gives you the latest linking functionality. You can see the new version in action on this page, click on the like button top right and then check your own Facebook page. You will see the like this link there. See! it works! Joomla 1.0.15 is not forgotten.

The new version can be downloaded here: Facebook Like This button for Joomla 1.0.15 Version 2.0.

Recent bugfix - There was a problem with the xfbml method where the javascript code appeared too close to the beginning of the content and was being picked up by some SEO tools. These work by automatically replacing text in the window title and meta description. It was picking up the javascript code and placing it in these fields. This bug has now been fixed and the javascript is now appearing at the bottom of the article content.

This mambot might even work on mambo, a facebook like this button mambot for Mambo! now there's a thought... If you have a Mambo site and want to test version 1.0 or 2.0 then let me know and I'll give you a copy of the later version to try. 

Comments (0)

Subscribe to this comment's feed

Name

Email

Title

Comment

smaller | bigger

Subscribe via email (registered users only)

I have read and agree to the Terms of Usage.

Add Comment