Search for answers:
Customer Notices: WordPress 4.5 Affects LiveEditor Functionality - See this article WordFence Plugin Affects LiveEditor - See this article

Setup Facebook Comments / Facebook App ID

Setting up a Facebook App ID for Using Facebook Comments

Estimated time to complete: 10 minutes

This guide will show you how to setup a Facebook App ID is required if you wish to use Facebook comments on your OptimizePress websites.

You will need your own Facebook account in order to create the Facebook App ID so ensure that you have created a free account by going to http://www.Facebook.com first before starting this guide.

Step 1: Login to facebook and go to developers site

Ensure you are logged into your Facebook account and go http://www.facebook.com/developers

Step 2: Click on Apps > Register as a Developer

On the Developers site, click on the "Apps" link at the top of the page and then click on "Register as a Developer":

Step 3: Accept the terms and conditions in the popup

Ensure you are comfortable with the policies of using Facebook Apps and select Yes if you are ready:

 

Step 4: Verify Your Account

You need to verify your account by providing a Phone number to receive a text to confirm you are the account holder.  Follow the steps in the box to complete this process

*This step may not show for you if you have previously verified your account*.  

Step 5: Confirmation of registration

You should now receive confirmation you are registered as a developer.  Click Done to exit this process

Step 6: Create a new App

To create a new App, click on "My Apps" in the opt right side of the Facebook Developers portal, and then choose "Add a New App"

Step 7: Enter a name & Category for your app

On the "Create a New App ID" screen, you need to specify a name, email, & Category for your app.  We recommend using the name of your website with no spaces. So for our sample domain optimizetheme.com, we would use "optimizetheme" as the app name

This allows you to easily recognize your different apps as you create more for different websites in the future.

Once you have entered this information, click "Create App ID"

Step 8: Load the app for editing

Once you have created your app, you now need to modify one setting within the app.  To do this, go back to http://www.facebook.com/developers

Click on "Apps" at the top of the page and you should see your app listed in the dropdown.  If you see it listed, you created your app correctly (great work!).

Click your app name to load it for editing

Step 9: Choose Platform

In step 8 we loaded the app for editing. We need to specify the domain where your app will be used.  On the Dashboard for your app, click on "Choose Platform" 

Then, on the next screen we'll need to click on the "WWW" icon for "Website"

After you do that you'll only need to enter your URL on the next screen and then click the "Next" button:

After you click that, just scroll back to the top of your screen and proceed to the next step:

Step 10: Add your App Domain

We need to specify the domain where your app will be used.  On the Dashboard for your app, click on "Settings" on the left side menu

Now on the settings page we need to enter the domain where your app will be used.

You should enter your domain without the www - all you should enter is the main domain and the extension. So for example for our sample domain http://www.optimizetheme.com we would enter:

optimizetheme.com

Ensure you DO NOT have any other characters before or after the domain

Once you have entered this, click "Save Changes"

Step 11:  Copy your App ID from Facebook

Your app is now fully setup.  We now need to integrate this into your OptimizePress website.  

First you need to copy your App ID from Facebook.  At the top of your Settings page or the Dashboard for your App you should see the App ID number.  Copy this number to a text document or to your computer clipboard (the easiest way to do this is to highlight the number and right-click your mouse and select "Copy"

You will also need your App Secret as well so we can show share counts in the "Social Sharing" element:

Step 12: Add the App ID & App Secret to the OptimizePress options

Now head over to your OptimizePress site dashboard and go to OptimizePress > Dashboard > Social Integration > and paste in your App ID & App Secret:

Click Save Settings when you are done:

You have now completed the main Facebook App ID integration process!

The final step is to add Facebook comments to one of your pages...

Step 13: Add Facebook Comments Element to a LiveEditor Page

Inside the LiveEditor, select "Add New Element" and select the Facebook Comments element.  

You will be prompted to choose a light or dark style for your comments element, which you can select depending on whether you're placing on a light or dark background page.

You can now choose to set a number of settings for your Facebook Comments element.  You do not need to change any of these settings unless you wish to:

Facebook Comments Title: Enter a title for your comments element (optional)

Number of posts to show: Select the number of comments/posts that are shown by default - the rest will be hidden until the user selects to read more (default 10)

Facebook Comments Source URL: If you wish to show comments from a different page on your site, enter the URL of this page here.  

You may wish to use this in a launch funnel where you use your main launch page or opt-in page as the source URL and tie all other comment blocks in the launch funnel pages to that URL (optional - for advanced users only)

...Once you are happy with these options, click "Insert" to insert the element into the page.

Please note that you will not see the Facebook comments element live in the LiveEditor, it will show once you publish the page.

Step 14: Testing the Facebook Comments 

The final step is to test your Facebook comments element.  

Publish your page and view the live URL in a new browser window.  If you see the Facebook Comments input box then you're all done and ready to go.

If you see the text "Array" on your page - you need to complete one final step...

Step 15: Fixing "Array" Issue

The Facebook comments element can sometimes display the message "Array" instead of showing the Facebook comments on the page.  This is usually caused by your page not having normal comments enabled.

To fix this, go to Pages > And select your page and click "Edit":


On the page editor screen, click "Screen Options" at the top of the page and ensure that the "Discussion" option is checked (ticked):


Now Scroll down the page and click the "WordPress" Tab and then find the Discussion meta box and ensure that "Allow comments" is ticked:


Finally, publish your page again and refresh the live page and you should see the Facebook comments box showing.

If you have any further issues it's possible that something went wrong in the App setup process, contact our support for further assistance.

 

Didn't find an answer to your question? Contact Our Support Team (Submit a ticket)
Was this article helpful?
4 out of 13 found this helpful
Follow

Comments

Other Help Categories:

Get Started Guide

Watch our Ultimate Getting Started guide video

Pre-Sales Questions

Ask questions before purchasing our products

Login Problems

If you're having issues logging into our members hub

Accounts & Billing

Update your billing, request a refund and other accounts help

API Key Issues

Get help with licensing your site and API key issues

Membership Help

Get help creating Membership portals and courses

LiveEditor Help

If you need help using or troubleshooting the LiveEditor

Integrations

Find out about the many integrations possible with OptimizePress

Affiliate Questions

Have questions about promoting OptimizePress

Clubhouse Questions

Questions about our Clubhouse Membership Subscription
Powered by Zendesk