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.