Home > User Manual > Marketing > Facebook Social Stores > Create a Facebook App

Create a Facebook App

You must first create or login to a Facebook account. At the moment, in order to create an app you must have a working profile. If you have only a fan page, you may need to create a Facebook profile otherwise this setup may not work for you.

These are all very important steps. If not followed, the store will not work.

Step 1. Create a new app 
  1. Login to your Facebook Profile
  2. Go to http://developers.facebook.com/apps and allow the developer app to install.
  3. Click on "Create New App" button.

Create a New App 


Step 2. Decide on your app display name and namesapace 

  1. Add App Display Name (the name of your application that your friends will see when installing or searching in Facebook App's. We suggest your store name here.)
  2. Add App Namespace which will be used as the extention to your app URL. (This must be minimum 7 characters)
  3. Click on "continue"

Creating your App Name


Step 3. Fill in your app details under Basic Info 

  1. Add your contact email 
  2. Add your App Domain which is your site Domain without the http:///www
    See screenshot below
  3. Your category will most likely be set to "shopping"

Basic Info

Step 4. Select how your app integrates with Facebook

a. Canvas Page URL:

Enter the following URL, then swap the XXXX at the end for your namespace
http://fbconnect.shop033.com/fbconnect/Sites/XXXXXXXX/
e.g. http://fbconnect.shop033.com/fbconnect/Sites/storename/

b. Secure Canvas URL:

Enter the following URL, then swap the XXXX at the end for your namespace, as above.
https://fbconnect.shop033.com/fbconnect/Sites/XXXXXXXX/

c. Canvas Page:

This URL will be derived from what you entered above in the "App namespace" field. It will automatically be created.

 

Step 5. Select Page Tab to Create a tab for your online store

a. Page tab name

Enter a short name for the tab that will appear at the top of your Facebook store. Usually your store name.

b. Page tab URL

Enter the following URL, then swap the XXXX at the end for your storename
http://fbconnect.shop033.com/fbconnect/Tabs/XXXXXXXX/

c. Secure Page tab URL

Enter the following URL, then swap the XXXX at the end for your storename
https://fbconnect.shop033.com/fbconnect/Tabs/XXXXXXXX/

Page Tab Edit URL: This may be left blank

Page Tab Width: 810px (the default width for the new Timeline layout for Fan Pages)

Change "tie-dyes-togo" to your namespace.                     


Canvas Page & Tab Settings


Step 6. Click save changes. Don't close the following page. (If you do click http://developers.facebook.com/apps again)

The result screen after creating your app on Facebook

Optional Steps

  1. Upload a logo. At the top of the page you will see a default logo/icon. You can click the edit link to upload your own logo. (Any icon 16x16 size) Your Store Icon is suggested
  2. Choose a category for your online store
  3. Provide admin privileges to other users that need access to the Facebook App

Now that you have completed creating your Facebook app, it's time to setup your Facebook App on your store Admin. 

Step 7. Enter your Facebook App Details to your store admin

a. Open your Ashop admin panel and go to the Facebook Social Store edit page, under the Marketing top menu.

b. Enter your username (this is your Facebook username that is displayed in the URL your Facebook page eg. http://www.facebook.com/JohnSmith)


Your Facebook username is not your email, it is found under your Facebook settings page.


c. Enter your App Namespace
this can be found via your app summary page within Facebook. (http://developers.facebook.com/apps)


Make sure that there are no spaces in the beginning or at the end of your namespace                     


d. Enter your App ID (as shown on your Facebook App Page on http://developers.facebook.com/apps)

e. Enter your App Secret (as shown on your Facebook App Page on http://developers.facebook.com/apps)

f. Save


Step 8.  Open Graph Setup:

You want to be sure to have set up the open graph, this is a required step.

  1. Click on get started under open graph as seen above, type in whatever you want, We chose browse and website, click green get started button 
  2. scroll down and select save changes and next button, 
  3. on next screen click in the data to display box and choose 1 then in aggregation title (if not filled in automatically) type in the title (same as whats in data to display box) and click on save and finish. you can be done here if you choose or to add more items go to step 4
  4. Next you'll want to create objects to link to first, select create new object type, type in an object that you sell in your store, then submit and scroll down & save.
  5. Click to return to the open graphs dashboard on top then Select create new action type, there you can type in purchase then right below it youll select the item you created in the last step IE: hemp necklace, save
  6. select create new Aggregation and click in the data to display box and choose 1 then in aggregation title type in the title you want and click on save changes.

The finished Open Graph will look somewhat like this


Here is an open graph checklist https://developers.facebook.com/docs/opengraph/checklist/


Here are some links to tutorials on how to set up open graph. also.


https://developers.facebook.com/docs/opengraph/ & https://developers.facebook.com/docs/opengraph/keyconcepts/

Step 9. Authentication:

  1. Select Auth. Dialog right below settings. 
  2. Select the Authenticated Referrals at bottom of page then click in the user & friend permissions box and type an E select email, type a P and select publish actions and whatever else you feel you need permissions for can be found here. 
  3. You can fill out the Headlines and the description's above and the privacy policy URL & terms of service above should be filled out as well make a privacy policy content page & a terms of service page in your admin panel on ashop and copy and paste the URL's here, this can be done at a later time as well. Click on the area of the logo to upload a logo to the site

Step 10. Make a Community Page:

  1. Select Advanced under settings on left hand sidebar, here you'll need to add an email to the user support email section then click on the create facebook page at bottom as seen in screen shot circled below, confirm and save changes.
Example after page is made


Then when all setup on both sites log into your facebook profile on your home page and on left side youll see your community page and once you go to your app thru the community page youll see the app listed.

Facebook App setup is a guide for only setting up the App. Your customers will be able to access your App via your invitations or a direct link. In the community page you can click on build audience and invite people from friends list or send emails or share your community page on your timeline or a groups timeline. In order to get your app visible on your fan page, you will need to a create a page tab.





Translate and Localize your website with 'Localizer pluggin

Shopping Cart Software by Ashop