Support Center

Facebook Integration

When building a community it can be very useful to utilize larger, more established social networks to help spread the word. Facebook integration gives you an opportunity to do this by allowing your users to log in to your social network and post content to their Facebook walls all from within SocialEngine! This can be set up using the Facebook Integration menu within your SocialEngine site's Admin Control Panel.

Integrating Facebook into your SocialEngine Cloud site is a three step process. First you need to create an app, then enter the pertinent information into your SE Cloud Admin Control Panel, and finally submit the app to Facebook. The following article will walk you through each step to help accomplish all three tasks.

Creating Your App

  1. In order for SocialEngine to communicate with Facebook, you will need to create a Facebook application. To setup a new Facebook application, please go to the following URL: developers.facebook.com/apps. Make sure that you’re registered as a “Developer” on Facebook while creating your app.
  2. Next you need to create a new App. You can do this by clicking the Create App button on the top right of the page.
  3. This brings a popup where you are asked to enter a display name for your app, contact email and choose a category. Click Create App ID once done filling in this info the way you want it.
  4. After you’ve created the App ID above, you’ll be on the page to manage this app and everything it can do. First, you need to enter the website URL. To do that, in the left menu click Settings.
  5. Scroll down some if on a small screen to see the Add Platform box and click that to open the selection screen.
  6. Choose Website.
  7. Enter your website URL in the box. Don’t put it like you see in the screenshot, be sure to put it to your own website URL.
  8. Enter your domain name in the App Domains box. To make it more likely to be approved, you can also add the Terms and Privacy policy links. Save Changes when done.
  9. If using Facebook Login, add the “Facebook Login” product from the right menu by clicking the “Set Up” button.
  10. Select “WWW” from the selections on the right.
  11. The URL for your website will already be filled in due to the first step. Click the “Save” button and then “Continue” to go to the next step.
  12. Click the “Settings” menu on the left as you won’t need to do any of the other steps from the Quickstart guide since all of the code is already integrated into SocialEngine.
  13. Strict mode is enabled by default. For older Facebook apps, you’ll need to enable it. Enter Valid OAUTH Redirect URLs for your website. Example: http://example.onsocialengine.com/oauth2/facebook/callback
     
  14. Double check that your Contact Email and App Domains have been filled in. Click Show so you can see the App Secret as you need to copy the App ID and App Secret to your Admin Control Panel in the next step if you choose to have a custom app. In order for your users to post to Facebook, you do need to go through the Custom App steps which we will show you in the steps below.

Linking to Your SocialEngine Website

Now that you’ve created your Facebook App, log into your SocialEngine Admin Control Panel and scroll down the left menu to Integrations. Click that to open the integration options.

  1. Click the Facebook tab to open the Facebook settings and choose Connect to Facebook. Be sure you are already logged in with your Facebook developer account.
  2. Once you click Connect to Facebook, you’ll need to approve the Facebook App. Click Continue to approve the app.
  3. Once you finish approving the app, you’ll be able to enable the post to Facebook feature and even Import from Facebook. Be sure to Save Changes after enabling and connecting.
  4. Now you can publish to Facebook. However, if you want your users to be able to post, follow the next steps.

Testing your App:

At this point you have completed your App Configuration and user signup via Facebook (Facebook Connect) should work! The “Posting to Facebook” feature, however, will not as it requires publish_actions permission. The “Test Users” (we’ll show you how to create these in step 1) and the App owner’s registered email address will be able to post to Facebook, but the rest of your user base will not.

  1. Head to the “Roles” tab and click on the “Test Users” section and create a new user. This process will create as many users you tell it to, complete with usernames and emails. You can use one of these when Facebook reviews the app so they can easily log in to test.
  2. Open your site in another browser. Click on the “Facebook” button and a pop-up will open asking you to login to Facebook.
  3. Log in with the test user’s credentials you have created and complete the signup process on your site as well. You can test to make sure everything is in working order by posting on Facebook from the Activity Feed on your site. It’s easier if you log in as the test user in another tab so you don’t need to remember passwords.

Submitting your App for Review by Facebook

If you would like to obtain "publish_actions" and "user_birthday" permissions for your app you can do so by following the steps below. To have the custom app or for users to be able to post to Facebook, you do need to enable Facebook Login for your app and it will need to be approved by Facebook.:

NOTE: While creating your Facebook App and submitting it to Facebook, you are required to upload a screencast of Facebook integration on your website.

  1. Enable Facebook Login by clicking Add Product on the left menu and choosing Facebook Login.
  2. Click Settings and enter the details for your Facebook Login Valid OAuth Redirect URL, enable "Embedded Browser OAuth Login and Save Changes. Note: Do not use Strict Mode.
  3. You need to request "publish_actions" and "user_birthday" permissions for your Facebook app. Go to your Facebook App that was created using the previous steps. [Note: Wherever you see notes written in brackets, you need to provide those pages, links or URLs according to your website. Also, you need to provide your website's test user’s login details while submitting your app so that Facebook team can review your App easily. You can use above created "Test User" login credentials for this.]
  4. Go to your Facebook App Settings and click on Basic and verify that you added a Privacy and Terms link as it will be easier to get approved. You can also add your App icon as it requires that.
  5. To start the submission, click App Review and select to Start a Submission. Make sure it’s set to Live (as seen in the screenshot below).
  6. Select “publish_actions” and if you want to get the user’s birthday for Facebook login, select “user_birthday” as well. Click Add 1 Item (or however many it shows).
  7. Complete the Notes for each item you added. For this tutorial, we’ll show the publish_actions as it’s for the social sharing.
  8. In the Notes for publish_actions, you need to choose Website for the platform and then provide detailed instructions for how Facebook can come test how it works on your site. This is where your test users you created above will come in handy as you’ll need to give Facebook a login for your site. Note that for the steps below, please put the details for your own app, as the below is an example for you.
    1. Login to http://mywebsite.com and please refer to the screencast. (Note: Give your site's login page URL here.) 
    2. Login Details(Test User):
    3. Username: xxxxxx@yyy.com​
    4. Password: *************
  9. Now for the Steps to test our app:
    1. Go to  http://mywebsite.com/members/home (Note: Give URL of the Member Home Page of your site or some other page where you would have placed “Activity Feed” widget for posting updates on Facebook from your website.).
    2. Now, post something from the available text box and select the Facebook icon adjacent to post button. Facebook log-in pop-up appears. Use the below details to login(Test User) on facebook:
    3. Email: xxxxxx@yyy.com
    4. Password: **************
    5. Post something from the available text box . Please refer to our screencast.
    6. Now head to https://www.facebook.com/ and look at the home page, you will notice the same post/feed being displayed there also. Please refer to our screencast.
    7. ​We want this permission to post updates on Facebook from our site.
  10. Make a screencast of the process and load it to the Facebook review section. The screenshot shows most of the steps but the Web instructions cut off due to their small input box. Be sure to detail as we wrote above though.
  11. Once you think it’s complete, and have attached the video, click Save to start the approval process.
  12. App Verification - be sure to click the View Notes (shown in step 7 above) and add your test user there too. It helps to have all the info you can.
  13. Click Submit for Review when you are ready. (Seen in step 7 above)

Once Approved, Link to your SocialEngine Website

The app ID and Secret that we mentioned before are needed so your users can post to Facebook and you can use them to have a custom app experience so your users don’t see SocialEngine on the permissions pages when authorizing the app. To enable this, in the left menu click Custom Social Apps and choose Facebook. Enter your App ID and Secret and Save Changes.


Great work! Please feel free to contact us if you have any questions or need further tutorials. Visit our community to have more interactions with us and other clients or third party developers. We’d love to see you there!

support@socialengine.com
https://cdn.desk.com/
false
desk
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
false
Invalid characters found
/customer/en/portal/articles/autocomplete?b_id=5097