{"id":72,"date":"2012-08-19T19:41:00","date_gmt":"2012-08-19T19:41:00","guid":{"rendered":"https:\/\/www.tech-and-dev.com\/blog\/2012\/08\/19\/facebook-app-tutorial-the-basics\/"},"modified":"2021-02-22T00:59:47","modified_gmt":"2021-02-22T00:59:47","slug":"facebook-app-tutorial-basics","status":"publish","type":"post","link":"https:\/\/www.tech-and-dev.com\/blog\/2012\/08\/facebook-app-tutorial-basics.html","title":{"rendered":"Facebook App Tutorial – The Basics"},"content":{"rendered":"
Facebook applications gives you the opportunity to deeply integrate into the core Facebook experience. Your app can integrate with many aspects of Facebook.com, including the News Feed, Notifications, open-graph and all of the core Facebook Platform technologies, such as Social Plugins, like the registration plugin, like plugin, login.<\/div>\n

 <\/p>\n

To create your first facebook application:<\/h4>\n

Go to https:\/\/developers.facebook.com\/apps<\/a>
\nClick on “Go to app”<\/p>\n

\"Facebook<\/a><\/div>\n

On the top right side click on “Create new App”<\/p>\n

\"Facebook<\/a><\/div>\n
<\/div>\n
Choose the name of your app, this can be anything.<\/div>\n
Choose the namespace of your app, this is a unique name, so it might be already taken.<\/div>\n
Uncheck Web Hosting with Huroku. Huroku allows you to host your app on their servers for free. We won’t be using Heroku for this tutorial. I will write a tutorial in the future on how to use Heroku with facebook apps.<\/div>\n
Click “Continue”.<\/div>\n

 <\/p>\n

\"Facebook<\/a><\/div>\n

You might need to verify your facebook account by adding your mobile phone number or credit card.<\/p>\n

<\/div>\n
\"Facebook<\/a><\/div>\n

This is the interface of our new app:<\/p>\n

\"Facebook<\/a><\/div>\n
<\/div>\n
<\/div>\n
The most important two things in the new app are the “App ID” and the “App Secret”. Never share your App Secret with anyone.<\/b><\/div>\n
<\/div>\n
Let’s go to “Edit Settings”<\/div>\n
<\/div>\n
In “Edit Settings”, we can see all the app’s important info.<\/div>\n
If you want your app to be accessed from one or more website, you can define those websites in the “App Domains<\/b>“. For this tutorial, I’m gonna allow the app to be accessed from tech-and-dev.com, which also includes the subdomains of this site.<\/div>\n
\"Facebook<\/a><\/div>\n

If you want to use the facebook login button on your website, you will have to set the URL in the “Website with Facebook Login<\/b>” section.<\/p>\n

\"Facebook<\/a><\/div>\n

If you want your app to be part of facebook, that is, your app displayed in a facebook canvas, you can set the url of your facebook canvas. (I will explain more about this in my next tutorial)<\/p>\n

\"Facebook<\/a><\/div>\n

Let’s go to the “Auth Dialog” and configure it. The “Auth Dialog” link is on the left sidebar.<\/p>\n

\"Facebook<\/a><\/div>\n
<\/div>\n
You can check how will the app dialog will appear by clicking on the Preview Current Dialog<\/b>.<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
It’s very important to set a logo for your application, otherwise later on, when you decide to work with Open Graph, facebook will reject your application.<\/div>\n
Adding a privacy policy and terms of service is a facebook requirements now, and any app that does not have a privacy policy or terms of use URL will receive a warning to add one or the application will be banned from facebook.<\/div>\n
<\/div>\n
You can google for privacy policy<\/i> and terms & conditions<\/i> if you don’t have any.<\/div>\n
<\/div>\n
A warning will look like the following:<\/div>\n
\n

Notice of Violation: Privacy Policy (App ID: [YOUR_APP_ID])<\/b><\/i><\/p>\n

Hi,<\/p>\n

We’ve found the following policy violation with your app and you need to address this issue by [DATE] at [TIME] or your app may be subject to enforcement action.<\/p>\n

Our policies require that your app has a privacy policy that tells users what user data you are going to use and how you will use, display, share, or transfer that data and you will include your privacy policy URL in the Developer Application (See Platform Policy II.3, http:\/\/developers.facebook.com\/policy).<\/p>\n

It has come to our attention that your app is missing a privacy policy in the permissions dialogue. Please update the privacy policy URL field in the Developer Application at developers.facebook.com\/apps\/[YOUR_APP_ID]\/auth. Also, please review your app to ensure you are also displaying your privacy policy on your web site or within your app.<\/p>\n

Thanks,
\nPlatform Policy Teamen<\/p>\n<\/div>\n

<\/div>\n
<\/div>\n
<\/div>\n
Let’s add some permissions in the Configure how Facebook refers users to your app<\/b>:<\/div>\n
\"Facebook<\/a><\/div>\n
<\/div>\n
All the permissions and their description can be found in here:<\/div>\n
http:\/\/developers.facebook.com\/docs\/authentication\/permissions\/<\/a><\/div>\n
<\/div>\n
<\/div>\n
You can check the app canvas in here: http:\/\/apps.facebook.com\/tech-and-dev\/<\/a><\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
\"Facebook<\/div>\n
<\/div>\n
Notice how there is a privacy policy<\/b> and terms and conditions<\/b> link on the bottom, and all the permissions we’ve added.<\/div>\n
<\/div>\n
<\/div>\n
That’s it for our basic tutorial!<\/div>\n
<\/div>\n
In my next tutorial, I will show you to build a php facebook app and work with the permissions and login.<\/div>\n
<\/div>\n
<\/div>\n
Any questions or suggestions? Leave a comment below!<\/b><\/div>\n
<\/div>\n
<\/div>\n","protected":false},"excerpt":{"rendered":"

Facebook applications gives you the opportunity to deeply integrate into the core Facebook experience. Your app can integrate with many aspects of Facebook.com, including the News Feed, Notifications, open-graph and all of the core Facebook Platform technologies, such as Social Plugins, like the registration plugin, like plugin, login.   To create your first facebook application: […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[33,94,92],"tags":[],"class_list":["post-72","post","type-post","status-publish","format-standard","hentry","category-facebook","category-facebook-api","category-facebook-app"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.tech-and-dev.com\/blog\/wp-json\/wp\/v2\/posts\/72","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.tech-and-dev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tech-and-dev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tech-and-dev.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tech-and-dev.com\/blog\/wp-json\/wp\/v2\/comments?post=72"}],"version-history":[{"count":1,"href":"https:\/\/www.tech-and-dev.com\/blog\/wp-json\/wp\/v2\/posts\/72\/revisions"}],"predecessor-version":[{"id":200,"href":"https:\/\/www.tech-and-dev.com\/blog\/wp-json\/wp\/v2\/posts\/72\/revisions\/200"}],"wp:attachment":[{"href":"https:\/\/www.tech-and-dev.com\/blog\/wp-json\/wp\/v2\/media?parent=72"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tech-and-dev.com\/blog\/wp-json\/wp\/v2\/categories?post=72"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tech-and-dev.com\/blog\/wp-json\/wp\/v2\/tags?post=72"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}