JomSocial Facebook™ Integration (JS FACE)

COMPATIBLE WITH THE LATEST JOMSOCIAL 2.0.x!!
UPGRADED TO VERSION 4.1 TO HANDLE THE NEW FACEBOOK FRAMEWORK!!
INTEGRATE YOUR JOMSOCIAL EVENTS DIRECTLY INSIDE THE FACEBOOK EVENT SYSTEM!!

The JomSocial Facebook™ Integration (JS FACE) smoothly integrates user information on any JomSocial community inside the Facebook social network. Friends, Photos, Videos, Groups, Activities, Participations, Events ... using this extension users will enjoyed an improved user experience and, at the same time, your site will get plenty of incoming links from user Facebook contacts directly from the user walls and profiles on Facebook.

Bringing the two worlds together can bring your site a lot of visibility and an incredible increase in user registrations.

To integrate both platforms a new Facebook application will be created using the information provided about your site. To accomodate both APIs an external application hosted by Latitud WEB will be used.

JS FACE links a user account on Facebook with a user account on JomSocial (either using Facebook Connect or not). Once linked, the Facebook application will display the following JomSocial information:

• User friends (All)
• User Albums and Photos, embedded or linked (only those set up as public)
• User Videos embedded or linked (only those set up as public)
• Media Comments, Photos and Videos (when embedded)
• Recent Activities

Starting from JS FACE version 3, user paticipations on JomSocial can be easily added as user news on Facebook. As Facebook user news, JomSocial user participations are visible for all the user friends on Facebook, giving your site more visibility and attracting more users to your site.

Starting from JS FACE version 4, using the new JomSocial 1.8 events feature, the events published on JomSocial can be easily integrated inside the Facebook event system, as any other JomSocial user participation is integrated in the user Facebook wall.

All contents on the user Facebook profile link back to your JomSocial site, and you can also set it up to embed User Albums, Photos and Videos inside the user profile tab in Facebook.

You can see some screenshots for this Add-On clicking on the images below:

User Participations on Facebook™ Walls

Additional information about JomSocial activities on Facebook Walls

Facebook™ Application Installation Screenshots

Customized Facebook™ Application Welcome Page

Additional information about the Customized Welcome Page

Administration Screenshots

Installation

The JomSocial Facebook™ Integration (JS FACE) installation is a three steps process.

First, a new Facebook application is created and hosted in the Latitud WEB environment (in order to do that, the customer has to send us some data about the JomSocial site such as URL, logo, description, FB application tab name and some more).

Second, this application is registered and configured inside the Facebook site.

Last, JS FACE is installed in the customer JomSocial site using an application key that is sent to customer.

The first two steps are performed by the Latitud WEB team and provide the required application key. The last step is a usual Joomla component installation that is performed by the customer.  Latitud WEB warranties that the first two steps are finished, and that the required application key is sent to the user in less than 24 hours from the moment the mandatory application data is sent by the customer using the online form. The JS FACE component can be installed using the standard Joomla Extensions Installer.

Once you've subcribed to the application hosting, you'll be shown an online form to provide the required information to create the Facebook™ application and set it up.

Upgrade Version

To update your JS FACE installation to the latest version, backup your site, copy your JS FACE application key, uninstall the JS FACE extension and then re-install JS FACE using the most recent version, and last fill up the same application key in the component configuration.

Online Example

You can see a live online example on the following link, where a new JS FACE tab called "El Foro Faller" has been added to a Facebook page:
http://www.facebook.com/reqs.php#!/pages/FALLA-PLACA-MAJOR-DE-CARCAIXENT/273671431924?v=app_117559439114

You can see a live online example on the following link, where JomSocial activities are displayed inside the user wall:
http://www.facebook.com/?ref=logo#!/trodebac28?v=wall

Configuration & Settings

JS FACE can be configured on the Joomla administrator section. To configure go to Components -> JS FACE.

Facebook has chenged the way user tabs are displayed, making the layout narrower than that of the Facebook application itself. Starting from JS FACE version 4.1, some parameter settings have been duplicated to adecuate JS FACE contents to both the user tab and the Facebook application.

Settings are grouped into sections and include the following parameters:

Global JS FACE Configuration

• Application width (inside Application): sets the application width on Facebook. Now it's set to a maximum of 760 px, but it will be changed to just 520px. Using this paremeter you can easily adjust the application width.
• Application width (inside Tab): sets the application width on the Facebook profile tab. Now it's set to a maximum of 520 px. Using this paremeter you can easily adjust the application width on the tab.
• Site logo: the site logo to be displayed inside the Facebook application tab (Relative path, p.e. images/logo.png).
• Application Key: this is the application key generated when creating the new Facebook application. It's used for security reasons. This appliction key wil be sent to you by the Latitud WEB team.

Welcome page

• Linking option: whether to use the regular welcome page to link user accounts or to use the new a Joomla article for the customized welcome page functionality. More information & Dessign guideline.
• Joomla Article ID: the ID of the Joomla Article to be displayed inside the Facebook welcome page.

JS FACE Home Page

• Display Albums Order: what order to display user albums on the JS FACE Facebook application home page.
• Display Videos Order: what order to display user videos on the JS FACE Facebook application home page.
• Display Friends Order: what order to display user friends on the JS FACE Facebook application home page.
• Display Activities Order: what order to display user activities on the JS FACE Facebook application home page.

JS FACE Home Page (inside Application)

• # Albums: maximum number of user albums to be displayed on the JS FACE Facebook application home page.
• Embed Albums: whether to embed Photos and Videos inside the Facebook application tab.
• # Videos: maximum number of user videos to be displayed on the JS FACE Facebook application home page, or link to the JomSocial site.
• Embed Videos: whether to embed the Video Player inside the Facebook application tab, or link to the JomSocial site.
• # Friends: maximum number of user friends to be displayed on the JS FACE Facebook application home page.
• # Activities: maximum number of user activities to be displayed on the JS FACE Facebook application home page.

JS FACE Albums & Photos (inside Application)

• # Albums per Row: number of albums to be displayed in each row.
• # Albums per Page: maximum number of albums to be displayed in each page.
• # Photos per Row: number of photos to be displayed in each row.
• # Photos per Page: maximum number of photos to be displayed in each page.
• Photos Width: whether to customize the maximum photo width to be displayed (in pixels), or use the JomSocial Maximum Photo Width configuration parameter instead.
• Customized Photos Width: maximum photo width to be displayed (in pixels).

JS FACE Videos (inside Application)

• # Videos per Row: number of videos to be displayed in each row.
• # Videos per Page: maximum number of videos to be displayed in each page.
• Videos Size: whether to customize the size of the embedded video player (in pixels), or use the JomSocial Video Size configuration parameter instead.
• Customized Videos Width: width of the embedded video player (in pixels).
• Customized Videos Height: height of the embedded video player (in pixels).

JS FACE Friends (inside Application)

• # Friends per Row: number of friends to be displayed in each row.
• # Friends per Page: maximum number of friends to be displayed in each page.

Facebook™ User Feed Resources

• Profile Thumb Image: the thumb image to be displayed in the User Wall for profile activities. Default: to use the default profile thumb image, included in the JS FACE distribution. Facebook Application Logo: to use the Facebook Application Logo as the image thumb for profile activities. Customize: to customize the thumb image to be displayed on profile activities. Profile(s) Default Avatar: to use the default profile avatar to be displayed on profile activities.
• Customized Profile Thumb Image: the customized thumb image to be displayed on profile activities (preferred size 90x90 pixels).
• Friends Thumb Image: the thumb image to be displayed in the User Wall for friends activities. Default: to use the default friends thumb image, included in the JS FACE distribution. Facebook Application Logo: to use the Facebook Application Logo as the image thumb for the friends activities. Customize: to customize the thumb image to be displayed on friends activities. Profile(s) Default Avatar: to use the default profile avatar to be displayed on friends activities.
• Customized Friends Thumb Image: the customized thumb image to be displayed on friends activities (preferred size 90x90 pixels).
• Kunena Forum Thumb Image: the thumb image to be displayed in the User Wall for Kunena forum activities. Default: to use the default Kunena forum thumb image, included in the JS FACE distribution. Facebook Application Logo: to use the Facebook Application Logo as the image thumb for Kunena forum activities. Customize: to customize the thumb image to be displayed on Kunena forum activities. Profile(s) Default Avatar: to use the default profile avatar to be displayed on friends activities.
• Customized Kunena Forum Thumb Image: the customized thumb image to be displayed on the Kunena forum activities (preferred size 90x90 pixels).
• Blog Thumb Image: the thumb image to be displayed in the User Wall for Blog activities. Default: to use the default Blog thumb image, included in the JS FACE distribution. Facebook Application Logo: to use the Facebook Application Logo as the image thumb for the Blog activities. Customize: to customize the thumb image to be displayed on Blog activities. Profile(s) Default Avatar: to use the default profile avatar to be displayed on Blog activities.
• Customized Blog Thumb Image: the customized thumb image to be displayed on Blog activities (preferred size 90x90 pixels).

What to do next: PROMOTION.

Once the JS FACE infrastructure is up and running, your site will look the same to your users. From the user point of view, they won't be able to see any new functionality unless you tell them about it.

This is why the next step you have to take once JS FACE is configured is promotion. You can promote your application both on your JomSocial site or on Facebook.

To promote your application on your site you can publish a new module telling the users about the new functionality, maybe linking to a help article explaining the process to add the new tab to their profile on Facebook, and maybe linking also to the application home page (where the linking process starts).

The process to install the new tab on Facebook is that described in the Facebook™ Tab Installation Screenshots:

1. Press the "Go to the application" button.
2. Give permissions to the application.
3. Go to the JomSocial site and login to link the accounts.
4. Add the tab on the profile.

To promote the application on Facebook you can make use of any of the tools available on site: suggest to friends, promote with an advert, become a fan, add to your pages favourites, and, of course, tell your friends about it.

Other Resources

Recently a new group around JomSocial and Facebook integration has been created on the Joomla Social site. Fill free to join and participate in the group discussions here: http://people.joomla.org/groups/viewgroup/64-JomSocial+and+Facebook.html

• Add New
• Search
• RSS

Comments (14)

<< Start < Prev 1 2 3 Next > End >>

<< Start < Prev 1 2 3 Next > End >>

• 2010-03-14 18:47:29 |93.109.125.xxx| Chrysanthos  - translate

  Can i have a live demo to translate this extension please?

  thanks

  • 0
  • 0

  ReplyQuote

• 2010-03-25 20:41:15 | |Registered| EOLGeorge  - Other usrs

  Hi,

  Looks interesteng.

  Could you share a few url's for other JS sites using this component?

  Cheers,

  G

  • 0
  • 0

  ReplyQuote

• 2010-03-25 23:55:44 |SAdministrator| César

  If you think this is interesting, wait for the update we're finishing for the next week.

  You're going to love it.

  Few URL's? Ok, but you won't see anything different on these sites, the key thing is that now they are integrated in facebook:

  http://fnoob.com
  http://www.canadareic.com
  http://myworkvideo.com
  http://bourbon-island.com
  http://minwebportal.com

  Shall we add yours?

  • 0
  • 0

  ReplyQuote

• 2010-03-25 23:58:33 |SAdministrator| César

  Live demo?

  Check ours here: http://www.facebook.com/photo.php?pid=1168365&id=1273974655&comments& alert#!/pages/FALLA-PLACA-MAJOR-DE-CARCAIXENT/273671431924? v=app_117559439114&ref=sgm

  The JS FACE translation file is on the download area, here: http://joomlaextensions.latitudweb.com/downloads/other-files/14-files- for-translation.html

  • 0
  • 0

  ReplyQuote

• 2010-04-29 03:18:39 |Registered| canadareic  - demo

  You can access my profile

  http://www.facebook.com/profile.php?id=840473865&v=app_356588684383& ref=profile

  
  

  • 0
  • 0

  ReplyQuote

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