Contact Us
  • How to Create a Facebook Application to Get an App ID for your Website

    If you’re not on the HyperArts Blog, click here!

    In this article, I’ll show you how to set up a Facebook application for your website domain so you can integrate Facebook features on your website, such as the Share Button, which require that your domain have an App ID. Facebook defines “App ID” or “appId” as “a unique identifier for your site that ensures that we have the right level of security in place between the user and your website.”

    When integrating the Facebook Social Plugins (Like Button, Send Button, Comments, etc.) into your website pages you don’t need an App ID, but for other features an App ID required, such as the Share Button.

    It’s pretty easy to simply set up a Facebook application for your domain, providing you with an App ID you can use for Facebook integration features on all pages of your domain or subdomains of your domain.

    Here’s how…

    Step 1: Go to the Facebook Developers Page and Set Up your Application

    While logged into Facebook under your personal profile, navigate your browser to the Facebook Developers page. You’ll see:

    Facebook App Setup Button

    Click on “+ Set Up New App” button.

    If you’ve never before created an application, you will see this screen:

    Facebook Account Verification

    If you verify with your mobile number, Facebook texts a confirmation code to the phone number you provide. I prefer this method to putting a credit card on file.

    Just follow the instructions on the popup screen:

    Facebook Confirm Phone

    Once you see the message that your account has been verified:

    Facebook Phone Confirmed

    Reload the page with the above verification box and you should see this message:

    Name your Facebook Application

    Now let’s set up your application.

    Step 2: Name your Facebook Application

    On the screen you see (pictured above) you will 1) Provide your App Name; and 2) agree to Facebook’s Terms.

    Don’t worry about setting your App name. You can always change it later.

    Once you’ve named your application and agreed to Facebook’s terms, click “Create App.”

    Step 3: The “About” your Application Screen

    On the “About” screen, you provide some basic information about your application. The items you need to pay attention to on this tab, for the purposes of integrating your website with Facebook, are:

    • Change your Application Name;
    • Add a Description;
    • Upload a 16×16 pixel image for your application thumbnail image, and a 75×75 pixel image for your app logo (probably not 100% necessary);
    • Provide a User Support Address and Contact Email.

    Facebook Application - About

    Uploading a logo is pretty straightforward. Just create it with an application like Photoshop, save it as a GIF, JPEG or PNG, and click the “Change your icon” link to browse to the file on your computer and upload it.

    Once you’ve uploaded your 16×16 pixel logo and provided a Contact Email, click the “Save Changes” button at the bottom of the screen. You will then be bounced back to the main application screen:

    Facebook App Screen

    Your Application Title Screen on the Facebook Developer Site

    You should bookmark the URL to your app’s landing screen. This is where you’ll start when you want to make any changes to your application settings or view Insights for your domain, as well as other admin tasks in the right-column navigation.

    It also displays your App ID, Secret Key, and other information about your application.

    Click on “Edit Settings” to continue.

    Step 4: Setting Up Your Website for Integration with Facebook

    For our purposes here, this is the most important tab. This is where you tell Facebook with what domain (eg mydomain.com) your application is associated.

    Facebook Web Site Integration

    “Site URL” should be the full domain name, including the “http://”. And make sure you include the trailing forward slash. You won’t be able to save your changes on this screen unless the “Site URL” domain ends with “/”.

    “Site Domain” is just the domain name (eg mydomain.com) so that you can use your App ID for any subdomains of your primary domain. (And, of course, you can use the App ID for all pages on your website, including subdirectories.)

    After entering your domain into the two fields, click “Save Changes” and you’re done!

    The remaining screens in the Settings section of your application will most likely require any editing. “Facebook Integration” is just only for creating applications for Facebook, including iFrame tab applications. The other three, “Mobile and Devices,” “Credits” and “Advanced” should be fine as they are.

    Your App ID is all you Need; You’ve Given your Domain an Application ID

    You now have your domain set up in Facebook as an “application.” You have your App ID which is available from the main application screen or from the “Facebook Integration” section of your application settings.

    You’re ready to start integrating Facebook with your website!

    More Facebook Resources

    Comments

    1. you must add a slash to the url 🙂

    2. i can’t get verified even after I insert my phone number. Facebook error?

    3. Hello timware,

      Do you know of a way to monitor multiple app accounts. In my case i manage a couple of websites and i want one account per domain. But i just have 1 mobile number.

      Any tips?

      • Alex, Once you set yourself up as a developer on Facebook, all your apps are listed under your one account. Thus, you need only provide only your one mobile number when you set yourself up as a developer.

        Each app has its own unique ID and you can access Facebook Insights for each one.

    4. Ola Johnson Oyebade says:

      try this code…

    Speak Your Mind

    *