Setting up Facebook Connect

Revision as of 05:59, 23 May 2016 by Sinisakrisan (Talk | contribs)

Alert-warning.png

This page is obsolete
This article is written for older versions of JomSocial. While chances are that is still valid, It could contain images and information that are not. Are you interested in helping us making best documented Joomla! extension in the world and improve this article? Then click here to find out how.


Before you begin implementing the Facebook Connect feature on your website, make sure you have read the Facebook Connect Policy
Images disclaimer: This article contains images from third party sources which we do not have access to. Some configuration screenshots may be different

Overview

Facebook Connect is a system that allows any user with a Facebook account to join your site easily with just one single click. It saves your visitor the hassle of registering to yet another site and maintaining another username and password. With this system, your site can easily verify the identity of your site visitor and log them into your site easily.

Facebook Connect delivers a number of benefits, including:

  • Traffic - Enable over a billion Facebook users to share your content with their friends on Facebook. Let users publish a story, invite their friends, or send an event. Their friends can then click to visit your site.
  • Engagement - Users can immediately find their friends and engage. More friends leads to more activity and more page views. Connected users create 15-60% more content than users who have not connected with Facebook Connect.
  • Registration - Every website wants registration to be easy. We can offer access to one billion users, simple registration, and robust data. By increasing traffic, user engagement, and registrations, you can grow your revenue and increase your monetization opportunities.

Creating the Facebook App

1. You need to have valid Facebook account.

2. Login to your Facebook account.

Fb2.png

3. Browse to https://developers.facebook.com/

Fb3.png

4. Hover over "My Apps" menu option in horizontal menu and choose "Add a new App".

Fb4.png

5. Choose option Website

Fb5.png

6. Give your app a name e.g "JS Login" and click "Create new facebook app ID" button.

Fb6.png

7. In new window choose category for your app: "Apps for pages".

Fb7.png

8. Confirm by clicking "Create App ID" button. 9. Page will be reloaded, click "Skip Quick Start" button.

Fb8.png

10. Click "Settings" in menu at left.

Fb9.png

11. Enter your email in "Contact Email" 12. Click "Add platform" button.

Fb10.png

13. Click "Website".

Fb10b.png

14. Enter your site URL in "Site URL" and "Mobile Site URL".

Fb11.png

15. Click "Save changes". 16. Click "Advanced" tab above app configuration.

Fb12.png

17. Scroll a bit down to "OAuth Settings" box. 18. Enable "Embedded browser OAuth Login".

Fb12b.png

19. Click "Save changes" button. 20. Click "Status & Review" in left menu.

Fb14.png

21. Turn on your app by switching to YES next to "Do you want to make this app and all its live features available to the general public?" text.

Fb15.png

22. Confirm that you want to go live with your app by clicking "Confirm" button.

At this point some may wonder about sending your app to FB review. But app will work even without FB review.

23. Click "Dashboard" in left menu.

Fb16.png

24. Click "Show" button in "App secret" field.

25. Browse to your site Backend -> Components -> JomSocial -> Configuration -> Integrations 26. Copy "App ID" field content to "Facebook API Key" field in JomSocial. 27. Copy "App secret" field content to "Facebook Application Secret" in JomSocial.

Fb18.png

28. Save your settings in JomSocial by clicking "Save" button in upper right corner.

29. Browse to your site frontend. Button with "Sign with Facebook" should appear in frontpage login form (in printscreen is also visible Facebook login button in JomSocial Toolbar module for Socialize template).

Fb19.png

30. Click on "Sign with Facebook" button.

31. You'll see new window with red notice: "Submit for Login Review. Some of the permissions below have not been approved for use by Facebook. Submit for review now or learn more."

You may ignore this notice at this point as it should be displayed only once during initial login.

Fb20.png

32. Click "Okay" button.

33. Modal window with "Account Signup from Facebook" will be displayed.

Fb21.png

34. Choose "New user" and check in "Terms & conditions" field (this is optional - need to have enablet it in JomSocial configuration).

35. Confirm by clicking "Next" button.

36. Provide your user name - it will be used in JomSocial.

Fb22.png

37. Confirm by clicking "Create" button.

38. New modal window will be displayed informing that your last profile status and FB avatar will be imported from Facebook.

Fb23.png

39. Confirm by clicking "Continue" button.

40. Now you should be logged in, and redirected according to settings in JomSocial. Your FB avatar should be used as JomSocial Profile avatar.

Fb24.png

As you may notice when you logout from JomSocial and from Facebook and try to login on JomSocial site, previous notification about required "Submit for Login Review" is gone.

Fb25.png

Congratulations! JomSocial Facebook Connect is now set up on your website!

See Also