Facebook Connect

Facebook Connect plug-in will let your visitors seamlessly “connect” their Facebook account and information with your site, find their friends who also use your site and share information and actions on your site with their friends on Facebook.

On your Vivvo websites, members will be able to post comments using their facebook ID (and avatar, of course), to see their friends on your site and invite other as well as post articles and comments to their FB profiles.

After installation, members can log-in using Facebook account but Vivvo still keeps all user accounts in its database so they can log-in using their Vivvo credentials as well.

Connect with friends → When a member is connected using Facebook account he/she is able to see if a Facebook friend is also registered on this Vivvo website and also if the friend who has both accounts (Vivvo and Facebook) has never used Facebook account to log-in to Vivvo (never clicked on Connect with Facebook). In that case member will be offered to invite this friend via “Invite your unconnected friends” link. Invited friends will get Connect request on Facebook with link that takes them to Vivvo website.

Invite friends → There is also “Invite your friends” or “Invite your other friends” link so member can invite any Facebook friend who doesn't use Vivvo website to join this Vivvo site.

Display FB avatar on Vivvo comments → If a member that posts comment is connected with Facebook ID his Facebook avatar will show up next to the comment.

Publish Vivvo comments on Facebook Wall → When logged with Facebook account, member that posts comment is able to select “Publish on Facebook” option which is located below the comment form. If this checkbox is selected, “Publish this feed dialog” appears and the comment with the abstract image and link to the article displays on the Facebook Wall.

Before you install plugin you must create Facebook Application.

Login to Facebook (with your Facebook credentials) and go to http://www.facebook.com/developers/.

Add Developer application by clicking on Allow button:

Create new application by clicking on Set Up New Application button:

Enter name of application (title of you Vivvo site is the best choice), read and agree to Terms of Service:

On the Basic tab you will find API and Secret keys, note them down, you will need to enter them during the plugin installation:

Go to Authentication tab, for Post-Authorise Callback URL set VIVVO_URL/fbconnect-post-authorize.html, and for Post-Remove Callback URL set VIVVO_URL/fbconnect-post-remove.html, where VIVVO_URL is url to your Vivvo installation, i.e.:

Go to to Connect tab, set Connect URL to your Vivvo URL, Base Domain to your domain (without www.) and set Friend linking access to Requested:

The only thing left is to set icons and logos for your application (this is not required but it is recommended), on Basics tab set Icon (16×16) and Logo (75×75) and on Connect tab set Facebook Connect Logo (99×22) image.

Make sure that your modifiers folder (in your Vivvo root) is writable by web server.

You need to access to the Plug-ins section. Click on the Plug-ins link which is located in the Main menu at the top of your administration panel.

A list of all plug-ins currently registered to the system is displayed on the right hand side of the screen on Downloaded plug-ins tab.

To install Facebook Connect plug-in you need to click on the install icon on the right side of the plug-in name.

This will take you to the page where a couple of fields have to be filled in in order to continue with installation.

• Facebook API Key and Facebook Secret → You'll get those when creating Facebook Application as instructed in Pre-installation Steps chapter. Just copy and paste each key to corresponding field.
• Invite action title → This is what will be displayed on the dialog box when someone chooses to invite friends to join Vivvo site.
• Application description → This description will be displayed in request when inviting people to join Vivvo site.

When you are done with this step click on Next button to continue.

If all fields are entered correctly you'll be taken to step 2 where installer sends encrypted email addresses of Vivvo's users and automatically registers users that already have Facebook account in order to enable them connect with their Facebook ID to Vivvo website.

After the process has been completed choose Next and on this final step you will be informed that the plug-in was successfully installed.

Click Finish to go back to the Plug-ins page.

To enable displaying avatars from Facebook and posting comments on Facebook wall when commenting an article it is necessary to change comment template included to Vivvo article template by replacing the following line in VIVVO_ROOT/xhtml/article/default.tpl file (around line 47):

<vte:include file="{VIVVO_TEMPLATE_DIR}box/comments.tpl" />

with:

<vte:include file="{VIVVO_TEMPLATE_DIR}box/fbcomments.tpl" />

To uninstall Facebook Connect plug-in you need to click on the uninstall icon on the right side of the plug-in name.

This will take you to the page with the link for uninstall: Click here to Uninstall the plug-in

You will be informed that the plug-in was successfully uninstalled and you may return to the Plug-ins page by clicking the link: Click here to return to Plug-in home page.

The path to the Facebook Connect plug-in:

Click on Plug-ins link (which is located in Main menu at the top of your administrator panel)

Choose Facebook Connect plug-in from the list of all installed plug-ins (on the left side of the screen).

This plug-in can be accessed only by users belonging to groups that are allowed to manage Facebook Connect plug-in.

If needed, you can change plug-in preferences on the plug-ins page in Vivvo administration panel.

All settings you set during installation can be edited and updated. When done just click on Save button.