How to Create a Facebook App for OSEmbed Pro

To embed Facebook and Instagram posts in your Joomla content using the OSEmbed Pro Joomla extension, you need to connect your Joomla site to Facebook. This is a three-step process:

  1. Create a new Facebook App.
  2. Add basic settings mandatory for the app review.
  3. Upload documents required for your individual verification.
  4. Submit a request for the app testing and review.
  5. Connect your Joomla site to Facebook using OSEmbed Pro.

Let's take a look at these five steps in detail.


Step #1. Create a new Facebook App

click create app

  • You will see the "Select an app type" white modal box, as shown in the next image. Click "Consumer" and click "Continue":

click consumer and click continue

  • You will see the "Create an App" box, as shown in the next image. Fill in the "App Display Name" and "App Contact Email" fields.
  • Click "Create App":

fill in name and email and click create app

  • You will see either the "Security Check" or "Please Re-enter Your Password" popups. Click the "I am not a robot" checkbox or re-enter your Facebook password. You may also be asked to complete some more Captcha screens.

click i am not a robot checkbox

  • You will see your Facebook App created:

facebook app created

Well done. You are ready to move to the next step.


Step #2. Add basic settings mandatory for the app review

  • Go to "Settings" > "Basic":

go to settings then basic

  • You will see the screen with the basic details of your Facebook App as shown in the next image:

screen with the basic settings

  • In your Joomla site, create a dummy Joomla article with a title similar to "Privacy Policy".
  • Create a hidden menu for this article and copy its URL.
  • Get back to the screen with the basic settings of your Facebook app. Enter the URL of your "Privacy Policy" article into the "Privacy Policy URL" field, as you can see in the next image:

enter the privacy policy and user data deletion urls

  • In your Joomla site, create a dummy Joomla article with a title similar to "Data Deletion Instructions".
  • Create a hidden menu for this article and copy its URL.
  • Get back to the screen with the basic settings of your Facebook app. Enter the URL of your "Data Deletion Instructions" article into the "Data Deletion Instructions URL" field, as you have seen in the previous image.
  • Click on the "App Icon" field and upload a dummy PNG or JPG image:

click on the app icon field

Note: The size of the image must be between 512 x 512 and 1024 x 1024 pixels. File size limit 5 MB.

  • Click "Choose a Category" and select a relevant category:

select category

  • In the "App Purpose" section, click "Yourself or your own business":

click for yourself

  • Click the blue "Save changes" button:

click the save changes button

Well done. Your newly created Facebook App has all the mandatory data now. You are ready to move to the next step.


Step #3. Upload documents required for your individual verification

  • Scroll down to the "Verification" section. Notice the "Individual Verification" heading and "In Review" green button, as shown in the next image. Click "Go To Verification":

click go to verification

On the next screen, you will need to upload approved verification documents. This includes but is not limited to:

  • Valid Passport
  • Government-issued photo ID
  • Driver's License.

Note: See this page for the full list of the Government issued and non-Government issued verification documents accepted by Facebook.

  • Click "Upload File":

click upload file

  • You will see the "Confirm Your Identity" screen. Scroll down the page and click "Browse". Upload your verification document and click the "Send" button:

click browse click send

  • After a few moments, you will see the "Form submitted successfully" box with some instructions:

the form successfully submitted box

  • Read the instructions and click "Okay".
  • You will return to the "Individual Verification" screen. You will see that the "Individual Verification Status" section now displays the "Verified" status:

the verified status

  • Check your email. You should see a confirmation email from Facebook:

the conirmation email

  • Return to the "Facebook for Developers" screen and click "My Apps" at the top:

click my apps

Excellent. At this point, you are ready to move to the next step and submit your Facebook App for testing and review.


Step #4. Submit a request for the app testing and review

  • Click on the name of your Facebook App:

click on the name of your facebook app

  • Check the "Require Actions" box. Make sure it says "You don't have any required action items to display.":

check the required actions

  • Click "App Review":

click app review requests

  • You will be taken to the "App Review Requests" screen, as you can see in the next image. Click "Request Permissions or Features":

click request permissions or features

  • This will open up the "How This App Requests Data" box with tips, see next image. Click on the cross icon to close this box:

close the box

  • Find the "Oembed Read" permission and click on the "Request Advanced Access" button:

click request advanced access

  • This will bring you to the "Request for App Review" screen, as you can see on the next image:

the request for app review screen

  • Scroll down to the "Complete App Settings" section:

complete app settings

  • If you followed instructions in Step #2, you won't see any basic settings listed here. Otherwise, go back to "Settings" > "Basic" and fill in the missing settings.
  • Click anywhere on the "Compete App Verification" box:

click on the complete app verification box

  • You will see the "App Verification Details" popup box, as shown in the next image. Click "Add Platform":

click add platform

  • You will see a new browser tab opened. Click the "+ Add Platform" button:

click add platform

  • This will open up the "Select Platform" box. Click "Website":

click website click next

  • You will see the "Website" box with the "Site URL" field appeared above the "Add Platform" button, as shown in the next image. Enter the URL of your Joomla/OSEmbed Pro site in the "Site URL" field and click "Save changes":

enter your joomla site url and click save changes

  • Return back to the tab with the "App Verification Details" popup where a few seconds ago you clicked the "Add Platform" button and click the "Save" button:

click save

  • This will close the "App Verification Details" popup. Click once again anywhere on the "Complete App Verification" box:

click on the complete app verification box

You will see the "App Verification Details" popup. At this point, you want to do your best to enable Facebook reviewers to test your Joomla/OSEmbed Pro/Facebook integration as if they were your site administrators.

  • Provide detailed step-by-step instructions on how they can test your Facebook App integration on your Joomla/OSEmbed Pro site. Include any testing credentials required to access your Joomla site and its integration with this Facebook App.

You can use the following structure, which worked for us (make sure you replaced example.com with the domain name of your own Joomla/OSEmbed Pro site):

Login URL: https://example.com/administrator

Login username: <your-joomla-superuser-username>

Login password: <your-joomla-superuser-password>

To see how the "Oembed Read" permission is used in my app:

Log into the https://example.com/administrator

At the top menu, go to "Content" > "Articles".

You will see listed articles. Click on the name of the "<your-article-with-facebook-url-embedded>" article.

You will see my Joomla article with a Facebook post URL embedded.

Now go to <the-frontend-url-of-your-joomla-article-with-facebook-post-embedded>. You will see that instead of the Facebook post, this frontend page displays its URL.

Go back to the Joomla administrator panel.

At the top menu, go to "Extensions" > "Plugins".

This will open the "Plugins" screen listing the existing plugins. Find the "Content - OSEmbed Pro" plugin and click on its name.

You will see the "Plugins: Content - OSEmbed Pro" screen with the plugin's settings. Click the "Facebook/Instagram" tab.

Enter the ID of this Facebook App you are testing in the "App ID" field.

Enter the App Secret of this Facebook App you are testing in the "App Secret" field.

At the top of the screen, click "Save".

Now go to <the-frontend-url-of-your-joomla-article-with-facebook-post-embedded>. Once this review is approved, this article will display the Facebook post.

  • Enter these instructions and click "Save":

enter testing instructions for facebook reviewers

  • You will see that the "Complete App Verification" section now has a checkmark. You will also notice that the "Submit for Review" at the bottom of the screen button is still grayed out. You need to submit to Facebook reviewers some more data.

the complete app verification box has a checkmark

  • Click anywhere on the "Requested Permissions and Features" box:

click anywhere on the requested permisssions and features box

  • You will see the "Tell Us Why You're Requesting Oembed Read" box, as shown in the next image:

the tell us why you are requesting oembed read box

  • As you can see, you have two fields to fill in and a check box to check. The first field gives you the following prompt:

Please provide a detailed description of how your app uses the permission or feature requested, how it adds value for a person using your app, and why it's necessary for app functionality.

  • Enter in it something along the following lines, which worked for us:

My "Oembed Read" feature will enable my Joomla extension "OSEmbed Pro" from joomlashack.com to embed Facebook posts inside Joomla articles.

  • In the second field, enter the URL of the Facebook post you embedded in your Joomla article that you previously created for yourself and Facebook testers/reviewers. Then click "Save":

fill in the fields with the required data and click save

  • You will see that the "Request Permissions and Features" box has been cleared and has a checkmark now, as shown in the next image. Click the "Submit for Review" button:

click submit for review

  • You will see the "Please Re-enter Your Password" popup box, as shown in the next image. Enter your Facebook password and click "Submit":

enter facebook password and click submit

  • This will bring up the "App Submission Received" popup box, as you can see in the next image. Click "Close" or "Take Survey" as you see fit:

the app submission received popup box

  • After a brief screen activity, you will see the "In App Review" step of the progress bar at the top changed from gray to blue:

the in app review step is now blue

  • As you can see, Facebook promises to review your request in five days. I submitted my review at 00:20 GMT. Facebook approved it for us in ten hours:

approved in ten hours

  • To check if the status of your request changed from "Pending" to "Approved", go to "App Review" > "Requests":

check the status of your request


Step #5. Connect your Joomla site to Facebook using OSEmbed Pro

Once Facebook approved your request for the Facebook App review, you are ready to connect your Joomla site to Facebook using OSEmbed Pro.

  • In your Facebook Developer dashboard, go to "Settings" > "Basic".
  • On the next screen, copy the number in the "App ID" field and click "Show":

copy the app id number and click show

  • You will be asked to enter a password. Enter your password:

enter your facebook password

  • Copy your Facebook App secret from the "Secret" field:

copy your facebook app secret

  • In your Joomla administrator panel, go to your OSEmbed Pro plugin settings and paste the Facebook App ID and Facebook App Secret into their respective fields:

paste your facebook app id and secret in their fields

  • Click "Save" or "Save & Close".
  • Test embedding a Facebook post in your Joomla article. You should see the posts successfully embedded:

final result with facebook post embedded

  • Test embedding an Instagram post. You should see the Instagram post displayed at the frontend of your Joomla site as well:

final result with instagram post embedded