Jump to content


* * * * *
Photo

Facebook Login Integration


Setting Up Facebook Integration
Facebook Integration will allow users to have the ability to use Facebook to login to your site.

When viewing the login form, users who are signed into Facebook will see a "Login with Facebook" button.

Attached Image: facebook_login.png

Users signed in with Facebook also have the ability to sync their Facebook profile picture with their profile picture and/or avatar on your community, as well as their status and "about me" information.


Existing users can associate their account on your community with their Facebook account through their settings page.
  • Log in to the Facebook Developer Console at https://developers.facebook.com/apps/
  • Click on the Posted Image button.
  • On the pop-up enter an App Display Name (suggest My Forum Name), tick the agreement box and click continue. Attached Image: Facebook_developers_new_app.png
  • Facebook will now provide you with a App ID and App Secret. Copy and Paste these into your IP.Board ACP, in the Social Media Settings area.
  • You will also need to match your locale settings to Facebook as well, if you are not using the en_US default. For the UK it is en_GB for example
Attached Image: Facebook_developers_1.png Attached Image: facebook_ACP_config.png
 
6. In the "Website" dropdown of the main screen, configure your callback URL as needed:

Attached Image: Facebook_developers_2.png

This should match your board URL exactly. So, for this site, we would use http://community.invisionpower.com.

"Exactly" means what your forum uses.. If your forum, when you click a link, goes to www.yoursite.com, then you must enter this and the below "deauthorize callback" WITH the www. If your forum, when you click on a link goes to yoursite.com (no www) then you MUST enter the links WITHOUT the www in facebook. You WILL get "OAuth" failures if this is not done properly.
 
7. Click on the "Permissions" link in the left hand menu. Configure as follows:
7.a) User & Friend Permissions: email
7.b) Extended Permissions: read_stream,publish_stream
7.c) Auth Token Parameter: URI Fragment( #access_token )
 
Attached Image: appPermissions.jpg

8. Next, in the Advanced tab, configure your application to be a web app, and set the proper Deauthorize Callback. The "Deauthorize Callback" is your site URL, followed by "/interface/facebook/index.php". For example, for this site, we would enter
http://community.invisionpower.com/interface/facebook/index.php

Make sure that all "Migration" settings are DISABLED, other than "Enhanced Auth Dialog"


Attached Image: Facebook_developers_3.png

Facebook is now also returning a message regarding a Privacy Policy.. Their stance is that all apps SHOULD have a privacy policy, but, at this time, it is not REQUIRED.

Should you need or want to put a privacy policy in, there are several generators/templates that can be used to make one for your site, as they vary from site to site.

http://www.generateprivacypolicy.com/

http://www.freeprivacypolicy.com/

Changing the board's Meta Image
Content posted from your board to Facebook will sometimes include a small image to attribute to your board.

Facebook calls this the meta_image, or an og:image. It's easy to customize the image on your board, however, you should take note of Facebook's specifications regarding the image. Currently, images must be at least 50 pixels wide and have an aspect ratio of 3:1.

[docnote]Remember that you need to upload a new image to each skin directory you use.[/docnote]

You can change your board's image via the General Configuration settings of your board, on the Meta tag: image_src setting.

[docnote]Tip: Facebook caches the meta image and it may take upto 7 days for the new version to be pulled to their servers.[/docnote]


Entering the settings in your forum

1) Login to your Admin Control panel (ACP)

2) Go to Admin CP --> System Settings --> Social media & Sharing -- > Facebook Connect.

Toggle the "Enable Facebook Connect" setting to yes, and enter the "Application ID" and "Secret Key" into the spaces provided.

Select the members group for anyone joining via their Twitter login.

Select the Facebook 'Bot' group - we recommend leaving this as 'Guests'.

Enter your Facebook JavaScript 'locale' - this maybe something like en_US or en_GB depening upon your language and country and was set is step 5 of the initial set-up.

Enter your 'Facebook "Real name/Display name" handling' setting - this specifies how you wish for the Facebook user's real name to be handled when creating a new forum account via logging in. Note: You MUST have the setting 'Allow "Display Names"' enabled for this to work, otherwise the real name is enforced.

Attached Image: facebook_ACP_config.png

Once you have saved these settings, Facebook Connect should be set up successfully on your community.
  • AutoItScript, Eduardo Bautista, Ginez and 16 others like this



5 Comments

Photo
Chris Sommerville
Feb 03 2014 10:18 PM

Hi, I'm having issues with getting this to work, as Facebook have recently changed their layout of their developer console / app. 

 

(Changes with naming conventions, location of fields and options - etc)

 

Are there any updated documents / tutorials - etc for this?

Photo
SocialBrands
Feb 09 2014 01:30 PM

This needs to be updated. The FB developer's interface has completely changed.

Photo
ArielTrafford
Feb 09 2014 08:04 PM

There seems to be a bug with this app.  I have installed and it does work, however there is a pop up window coming up every time people sign in using Facebook. 

Here it is:

When someone signs up using Facebook there pop up windonw asks 2 things.  One asks whether the users lets the app see the name, list of friends, etc and the second question offers to share the content with his/her friends.  This question regarding sharing content comes up every time the user logs in using Facebook.  This happened until the user ended up clicking "ok" to that question.  Something seems to be wrong because no matter what he/she answers to that question nothing happens, the only difference is that if the person answers "skip" then he continues to receive that message all the time. 

Please take a look a this!

    • Simon Botting likes this

This shoud be updated since the layout has changed and some settings are different since 2011.

    • NiftyWolfie, bob14599 and Giantmetfan06 like this

Hi, I'm having issues with getting this to work, as Facebook have recently changed their layout of their developer console / app. 

 

(Changes with naming conventions, location of fields and options - etc)

 

Are there any updated documents / tutorials - etc for this?

 

This needs to be updated. The FB developer's interface has completely changed.

 

This shoud be updated since the layout has changed and some settings are different since 2011.

 

I posted information on how to use with current facebook layout here: http://community.inv...on-is-outdated/

 

If you have any questions, PM me.

 

Working on my site, link in sig.


Developer Docs · Error Codes