Using a Joomla article on the Welcome page

Starting on JS FACE version 3.0, administrators can set a Joomla article to be displayed on the Facebook™ application welcome page. This way users can get a more appealing impression the first time they access the application on Facebook.

In this article we'll explain how administrator can achieve this, and provide some guidelines when designing the Facebook application welcome page using a Joomla article.

The next pictures show the welcome page for JS FACE versions 1 and 2, and now what can be achieved using the most improved JS FACE version 3.0.

JS FACE v.1 & 2	JS FACE v.3 & above

Welcome Page Objectives

JS FACE is a Facebook application based on an assignation between a Facebook account and a JomSocial account. The Welcome page is the first page users see when they first go the application. After granting permissions for the Facebook application, users go to the Welcome page. On this page users must be promted to associate their Facebook account to their JomSocial account. This is the main goal of the Welcome page.

The Welcome page dessign must always be targeted towards this goal. To make it more flexible and more attractive, starting from JS FACE version 3, Joomla administrators can create and assign a Joomla article to be displayed on their Facebook application welcome page.

And, as assigning user accounts is a must for users to access the application functionalities, even when you set a Joomla article to be displayed on the Welcome page, further instructions that include the assignation link are always shown below the selected article.

Dessign Considerations

First of all, keep in mind that the application width on the Facebook platform is 720 pixels width, so your welcome page dessign must fit inside this width.

There is practically no limitation on what you can deliver on the Welcome page (except, of course, Facebook framework limitations and disallowed Facebook contents), so you are able to achieve almost everything that comes to your mind. But some dessign considerations can be important.

The Welcome page will be displayed inside the Facebook framework, that already includes a couple of menus , a lateral column, and some bottom links (those are a lot of options for users), so it's a good idea to keep it as clean and simple as possible.

Again, visual content is always more appealing to users than long text paragraphs (and this is also even more true for Facebook user profiles). Visual and clear content are good dessign considerations.

As an example, you can use a big image (720 pixels width, at most) that illustrates what your application and your social network is about, also including a couple of prominent links: one for assigning accounts (the main goal) and another one pointing to your website front page. This way users easily recognize both the possibility to link the Facebook account to the JomSocial account, and to get more information about your social network (in case they don't know it yet).

The link to assign accounts have to be latter built by the Facebook application, so to include this link into the dessign of your welcome page, you have to point your link to the following destination: {*assignurl*}. That means that if you include in your dessign a link to this destination, for example in the anchor element it'll look like <a href="/{*assignurl*}" ...>, it'll be replaced on the Facebook application by the assignation link, that in the case of the anchor element will look like
<a href="http://www.yourdomain.com/index.php?option=com_jsface&task=login&canv=yourdomain&userid=xxxxxxxxxx&lang=en-US" ...>

Dessign Restrictions and How to Avoid Them

When you create and dessign a new Joomla article, the Joomla template on your site will be applied to your article. Among other considerations, the Joomla template applies its Cascade Style Sheets (CSS), and that is what set your font family, size, and maybe some visual affects that can be inserted into your article. But keep in mind that this Joomla template (and all its CSS files) applies only to your Joomla site, and will have no effect on your Facebook application and thus even neither to your Welcome page.

If you need to apply HTML effects and attributes to your Facebook welcome page, you have to include them in the article code. To achieve this, you've got two options: or defining the styles inside each HTML element, or including a text/css style segment inside your article code.

Sometimes, the Joomla article editor will clean these style elements from your article HTML code. In this case, you can use a Joomla extension such as Code Piece (free) that can print HTML code inside articles without WYSIWYG and other editors's filtering. You can also place that HTML code by going directly to the Joomla database and modifying the article content (although this approach is not recommended if you don't know exactly what you're doing).

Sample Code for a Welcome Page

To illustrate a little more these dessign guidelines, sample code for a welcome page is attached inside this guide. This is the code we already use on our Facebook application Welcome page for our live social site El Foro Faller.

It's quite straight forward, as it just includes a one-cell table with a background and two link buttons.

This is the code:

<table border="0">
<tbody>
<tr>
<td width="717px" height="540px" background="http://www.elforofaller.com/images/stories/identify_elforofaller.jpg">
<label style="padding-bottom:1px;border-style:solid;border-width:1px;cursor:pointer;display:inline-block;font-size:11px;font-weight:bold;line-height:normal !important;padding:2px 6px;position:relative;text-align:center;text-decoration:none;vertical-align:middle;white-space:nowrap;background-color:#5B74A8;border-color:#FF1010 #FF1010 #FF0000;color:#FFFFFF;background:url('http://www.elforofaller.com/images/stories/bg9.png') repeat scroll 0 0 #EEEEEE;"> <a href="http://www.elforofaller.com/">» Registrar-se</a> </label>
<label style="padding-bottom:1px;border-style:solid;border-width:1px;cursor:pointer;display:inline-block;font-size:11px;font-weight:bold;line-height:normal !important;padding:2px 6px;position:relative;text-align:center;text-decoration:none;vertical-align:middle;white-space:nowrap;background-color:#5B74A8;border-color:#FF1010 #FF1010 #FF0000;color:#FFFFFF;background:url('http://www.elforofaller.com/images/stories/bg9.png') repeat scroll 0 0 #EEEEEE;"> <a href="/{*assignurl*}">» Enllaçar Conter</a> </label>
</td>
</tr>
</tbody>
</table>

Lines # 1, 2, 3, 4, 7, 8, 9 & 10 defines the one-cell table. Line #4 sets its size (717x540 pixels) and the background image (http://www.elforofaller.com/images/stories/identify_elforofaller.jpg).

Lines # 5 & 6 defines the two linking buttons, one pointing to the JomSocial site (http://www.elforofaller.com) and the other one pointing to the account assignation ({*assignurl*}).

Fell free to use and modify the above code to fit your needs.

• Add New
• Search
• RSS

Comments (0)

Write comment

Your Contact Details:

Name:

Email: do not notifynotify

Website:

Comment:

Title:

UBBCode:          -color-aquablackbluefuchsiagraygreenlimemaroonnavyolivepurpleredsilvertealwhiteyellow -size-tinysmallmediumlargehuge

Message:

Security

Please input the anti-spam code that you can read in the image.

Powered by Compojoom comment 4.1.3 stable