{"id":11478,"date":"2024-01-20T22:25:03","date_gmt":"2024-01-21T01:25:03","guid":{"rendered":"https:\/\/4tuneagencia.digital\/blog\/working-with-the-facebook-api-in-a-cordova-app-sitepoint-sitepoint\/"},"modified":"2024-01-20T22:25:03","modified_gmt":"2024-01-21T01:25:03","slug":"working-with-the-facebook-api-in-a-cordova-app-sitepoint-sitepoint","status":"publish","type":"post","link":"https:\/\/4tuneagencia.digital\/blog\/working-with-the-facebook-api-in-a-cordova-app-sitepoint-sitepoint\/","title":{"rendered":"Working with the Facebook API in a Cordova App \u2014 SitePoint – SitePoint"},"content":{"rendered":"

In this tutorial we\u2019ll be creating a Cordova app that connects to the Facebook API using the official Facebook plugin for Cordova<\/a>. We\u2019ll cover how to login and logout of Facebook, use dialogs, and make calls to the Graph API. Note that this tutorial isn\u2019t for beginners, I will assume that you have already setup your machine to work with Cordova and deploy to an Android device.
First create an app on the Facebook Developer Website<\/a>. Hover over the My Apps<\/em> menu and select add a new app<\/em>. This will open a modal window that allows you to select the platform for your app. In this case we\u2019ll be deploying to an Android device so select Android<\/em> from the modal window.
\"new
Enter a name for the app and click the Create New Facebook App ID<\/em> button.
\"new
This will ask you if the app is a test version of an existing app, leave it on the no<\/em> default. The other option is the category, select apps for pages<\/em> then click on the create app ID<\/em> button.
\"app
Next you will be asked to add the Facebook SDK to your project. We don\u2019t need to do this for our app so keep scrolling down until you find the Tell us about your Android project<\/em> section. Enter com.yourname.appname<\/em> for the package name and then com.yourname.appname.MainActivity<\/em> for the default activity class name, replacing with appropriate values for your project.
\"project
Once that\u2019s complete we need to add the development and release key hashes. These validate the authenticity of your app so that Facebook is sure you are the author of the app and requests made to their API are from you.
\"development
Before you can generate a hash, you first need a keystore. You can generate one by executing the following command in a terminal window.
Get the hash from the keystore:
This should ask you for a password. Just use the same password used when you created the keystore. Once entered it should return the hash for that keystore. Copy and paste it in the development hashes field.
Click next<\/em> and refresh the page. Your app should now be listed when you click on the My Apps<\/em> menu. Note the App ID as we will be needing it later when we install the Facebook plugin.
Now we\u2019re ready to build the app. Install Ionic (which we will use for creating our app) with the following command:
Create a new blank app:
Add the android platform:
Next we need to install the following plugins:
Allows us to control which domains the app can make requests to.
Allows us to use the device camera to capture photos.
Allows us to upload photos captured by the camera plugin to a remote server.
Note<\/strong>: We\u2019re using the old version of this plugin since the latest version is incompatible with the current Cordova version (5.0.0) at the time of writing. If you\u2019re reading this in the future you might want to try using the following command: cordova plugin add cordova-plugin-file-transfer<\/code> and see if it works for you. Otherwise use the command below.
The official Facebook plugin used for performing different operations with the Facebook API.
Install the plugins with the following commands:
Once that\u2019s complete we need to install a front-end dependency called Angular Local Storage<\/a>. This allows us to work with the local storage for caching data in our app. You can install Angular Local Storage through Bower with the following command:
Ionic installs Bower components in the www\/lib<\/em> directory. You can check the save location by opening the .bowerrc<\/em> file in the root directory of the project.
At this point we\u2019ll be primarily working inside the www<\/em> directory. Open the index.html<\/em> file in that directory.
Link to the Angular Local Storage script below the ionic.bundle.js<\/em> file.
Below the app.js<\/em> file link the following scripts:
Later I\u2019ll explain what each of those scripts does. The service scripts are for making HTTP requests and as a wrapper for the Camera plugin. The controller scripts are for the different pages in the app.
Modify the <body><\/code> tag (and its contents) to have the following markup. <ion-nav-view><\/code> is where the different pages will be loaded later.
Open the www\/js\/app.js<\/em> file and add the LocalStorageModule<\/code>. This allows us to use the localStorageService<\/code> for storing and retrieving data from the local storage.
Below the .run<\/code> method, add the app configuration by calling the config<\/code> method. This method accepts a callback function where we pass in the $stateProvider<\/code> and $urlRouterProvider<\/code> so that we can specify the route for the different pages in the app.
Breaking the code down. First we have an abstract state called app<\/code>. This is like the parent state where all the other states defined below inherits from it. In this case we\u2019re setting the templateUrl<\/code> to templates\/menu.html<\/code> which is the path to the main template in which all the views will inherit from.
Create the main template under the www\/templates<\/em> directory and name it menu.html<\/em>, adding the following.
This template uses <ion-side-menus><\/code> which displays a side menu on the left side of the app. By default it\u2019s collapsed which shows a burger menu.
The <ion-nav-view><\/code> displays the current view. The name<\/code> attribute must be specified because this is where the view is tied to.
The main content of this template is a list of menu items which links to the different pages in the app.
Returning to the www\/js\/app.js<\/em> file, we then define the states for the different pages. These states all use the abstract state declared earlier. This is indicated by prefixing each route with app.<\/code>. The url<\/code> is the URL in which the view is displayed. For the login route we\u2019ve only specified \/login<\/code>. But since we\u2019re using an abstract state, the actual URL will be \/app\/login<\/code> since the value for the url<\/code> assigned earlier to the abstract state is \/app<\/code>. Then we have the views<\/code> object in which we specify the name of the view where the template is displayed. This requires the templateUrl<\/code> property which contains the path to the template. The same pattern is used in all the other routes.
Finally we specify the default page:
We\u2019re using services as a container for the tasks needed to perform more than once throughout the app. This way we can avoid repeating the same code.
The first service that is the CameraService<\/code>, this serves as a container for the API calls we can make with the Camera plugin. Create a CameraService.js<\/em> file under the js\/controllers<\/em> directory and add the following.
Breaking the code down, we first wrap everything inside an \u2018Immediately Executed Function Expression\u2019. This prevents conflict with other scripts.
Next we specify the module to which this service belongs and that this service depends on Angular\u2019s $q<\/code> service. This allows us to run functions asynchronously.
This is then passed as an argument to the CameraService<\/code> function.
Inside the function we set the me<\/code> variable as an alias to the current context and use it to set the options for the camera plugin.
Next we have the getPicture<\/code> function. This is the function called every time we need to take a photo. This returns a promise which means that we can use the then<\/code> method to pass a function that we want to execute once the user selects the photo.
The Requests Service makes HTTP requests to the app server. The app that we\u2019re building has a server component which allows us to inspect the response returned by the Facebook API and upload photos to the server. Create a RequestService.js<\/em> file inside the js\/services<\/em> directory and add the following:
Breaking the code down, we first import several services built-in to Angular and Ionic.
Set the settings for the base URL for making requests and timeouts:
The requestTimeout<\/code> function allows us to alert the user when a request reaches the timeout value specified. This works by stopping the timeout once we get a response from the request.
The sendData<\/code> function allows us to send data to the server. For this app we\u2019re using it to send user data to the server and then save it to the database. This function accepts the data sent as its parameter and then uses Angular\u2019s $http<\/code> service to make a POST<\/code> request to the server. Once we get a success as a response, we cancel the timeout so the call to the $ionicPopup.alert<\/code> doesn\u2019t get executed. As with other functions we\u2019re using the $q<\/code> service to turn it to an asynchronous function call. Later when we begin calling these functions from the controller you will see a lot of then()<\/code> method calls triggered whenever we call deferred.resolve(response)<\/code>. We can then pass a function to the then()<\/code> method in which we can have access to the response<\/code> returned from the request.
The uploadPhoto<\/code> function allows us to upload photos to the server. This accepts the photo_url<\/code> which is basically the FILE_URI<\/code> returned by the camera plugin after a photo has been taken. The params<\/code> contains any custom data that we want to pass in with regards to the file.
The controllers are mainly used for listening to events and responding to them. An example is when a user clicks on a button. The controller is responsible for handling that specific event.
The login controller handles all the events that happen on the login page of the app. Create a LoginController.js<\/em> file under the js\/controllers<\/em> directory and add the following:
Just like the services, we can import services inside controllers. This time we\u2019re using two new services: $scope<\/code> and localStorageService<\/code>.
Here\u2019s a brief description of what they do:
Inside the controller we\u2019re attaching the updateLoginStatus<\/code> function. This function checks if the current Facebook session is still active through the facebookConnectPlugin<\/code> object available globally from the Facebook plugin. We then update the value of the logged_in<\/code> property based on the result. This flips the switch in the view on whether to display the login or the logout button.
Attach the fbLogin<\/code> function to the current scope. This gets executed when the user clicks on the login<\/em> button.
Inside the fbLogin<\/code> function we call the login<\/code> method from the facebookConnectPlugin<\/code> object, opening the Facebook login box. If the Facebook app is installed and a user is currently logged in, all the user has to do is to agree to the app permissions to authenticate the app. In this case the permission passed is email<\/code>. This means the app will have access to the users email address. Once the user agrees to the permissions, the success callback function is called, otherwise the error callback function is called. When the user agrees, the response contains the user data. We use the localStorageService<\/code> to save those in local storage and then use the RequestsService<\/code> to send it to the server.
Here\u2019s how the login will look:
\"facebook
The fbLogout<\/code> function is used to log out of Facebook. This destroys the current user session.
Next we can now add the login view. Views are saved under the templates<\/em> directory. Create a login.html<\/em> file inside that directory and add the following.
All views start with the <ion-view><\/code> tag. In the code above we\u2019re passing in the title (shown in the page header) and the controller which this view uses. The ng-init<\/code> directive executes the updateLoginStatus<\/code> once this view is initialized. This means that it immediately gets executed when the user navigates to the login page.
The <ion-content><\/code> specifies the page content. In this case all we need is the button for logging in with Facebook. We added an ng-click<\/code> attribute to this button and specify the fbLogin<\/code> function defined earlier in the loginController<\/code> as the value. ng-click<\/code> is a directive built-in to Angular which is primarily used for listening to click events in a specific element. This means that when the button is clicked it executes the fbLogin<\/code> function, the same is true with the button used for logging out of Facebook. The ng-hide<\/code> and ng-show<\/code> directive hides and shows these two buttons depending on whether the user is logged in or not.
The UserDetailsController<\/code> displays the info of the logged in user. Create a UserDetailsController.js<\/em> file under the www\/js<\/em> directory and add the following.
Inside the controller we set the user<\/code> to null<\/code> so user info only shows when the button is clicked, calling the getUserInfo<\/code> function.
Inside the function we get the Facebook user ID from local storage.
And use it for getting the user info from the Graph API. We\u2019re only trying to get basic information available without app registration through the API.
To make a request to the Graph API, call the api<\/code> method and pass four arguments. First is the path in which the request is made. Since we\u2019re working with user data we\u2019re using the users\u2019s Facebook ID as the base and specifying which information we want to get by supplying fields<\/code> as the query parameter.
We then pass a comma-separated list of all the fields we want to get. If you want a full list of the fields available, check out the Facebook Graph API User Reference<\/a>.
The second argument is an array containing the different permissions the user needs to approve. Here we\u2019re requiring the users public_profile<\/code> and email<\/code>. You can see a full list of the permissions in the Permissions Reference Page<\/a>. Note that if a specific permission says that it requires a review from Facebook then you cannot use it even if you\u2019re the developer of the app.
The third and fourth arguments are the success and error callbacks. If we get a success we issue an alert so we can see the response, send it to the server and assign the response to the user<\/code> variable. In the user details view this user<\/code> variable is checked for existence and if it exists display the user data.
Here\u2019s the user details view (www\/templates\/user-details.html<\/em>). You can see that we have used the ng-if<\/code> directive to check if the user<\/code> variable is set. If it is then the user details are displayed.
Here\u2019s how the user details page should look:
\"user
The DialogController<\/code> handles events in pages that use the Facebook sharing dialogs<\/a> such as the feed, send and share dialog. Create a DialogController.js<\/em> under the js\/controllers<\/em> directory and add the following.
Breaking the code down, inside the controller is the URL for accepting photo uploads. This is where the RequestsService<\/code> submits the captured photo.
Next we have the postStatus<\/code> function called when the user clicks on the button for posting a Facebook status.
Instead of posting directly using the graph API we use Facebook\u2019s feed dialog. This requires an object containing the type of dialog, the URL to include in the post and the text to show as the title.
Call the showDialog<\/code> method and pass dialog_options<\/code> as the first argument. The second and third arguments are the success and error callbacks. The success callback gets executed if the user actually publishes the post. The error callback gets executed if the user cancels.
Here\u2019s how posting the status should look in the app:
\"posting
Attach the function for opening the default camera app in the device to the $scope<\/code>. This uses the CameraService<\/code> to trigger the camera app to open. Once the user finishes taking a photo, it assigns the local path of the photo to the photo<\/code> property of the controller. This displays the actual image. Later this value is used by the function for posting the photo.
Next is the method for posting the photo.
Inside we add the options for the Facebook dialog. We\u2019re using the feed dialog again but this time adding other options such as the name<\/code> (name of the link attachment), caption<\/code> (the text that appears below the link name), and description<\/code> (appears below the caption text).
Create an object which stores the data submitted along with the photo. In this case we only need the caption inputted by the user.
Make an HTTP request to upload the photo to the server. Note that this is the server used by the app for uploading photos and inspecting responses, not Facebook\u2019s servers. This is because we\u2019re using the Facebook feed dialog which cannot directly accept uploads. All it can do is accept the URL to an image and add it as a link to a post. This means that what we\u2019re simply linking to an image. The server returns the file name to the uploaded photo and we\u2019re using that as the value for the picture<\/code> attribute of the dialog.
Once we have that, we call showDialog<\/code> to open another Facebook dialog which links to the photo uploaded.
Here\u2019s how posting a photo looks:
\"posting
Lastly for the DialogController<\/code> we have the sendMessage<\/code> method which opens Facebook\u2019s send dialog and we pass the URL that the user inputted. The send dialog then creates a preview for that URL and allows the user to choose whom to send it to and an optional text message.
Here\u2019s how sending of messages should look:
\"sending
The DialogController<\/code> is used in these three views:
\u2013 the view for posting status
\u2013 the view for posting a photo
\u2013 the view for sending a message
The view for posting status (www\/templates\/post-status.html<\/em>) accepts the values for the URL and caption of the status to post. Clicking on the Post Status<\/em> button opens Facebook\u2019s feed dialog.
The view for sending message (www\/templates\/send-message.html<\/em>) accepts the URL that the user wants to share. Clicking on the Send Message<\/em> button opens Facebook\u2019s send dialog.
The view for posting photos (www\/templates\/post-photo.html<\/em>) contains the button for capturing photos. As we saw in DialogController<\/code>, this opens the default camera app on the device. Once a photo has been taken it is displayed inside the #photo-container<\/code> div along with a text field that asks the user for the caption. Clicking Post Photo<\/em> opens the feed dialog which displays a preview of the post.
Throughout the whole app we have been making requests to a server but we haven\u2019t built it yet. In this section I\u2019ll create the server component of the app so that we can complete it.
Before we proceed with the code, we need to install the following dependencies:
To install the dependencies, create a folder called server<\/em> in the root directory of the app. Here we will save the files used by the server. Inside the folder create a package.json<\/em> file and add the following:
Save the file and execute npm install<\/code> to install the dependencies.
Create an app-server.js<\/em> file and add the following:
Here we first import all dependencies and set their default options. For multer<\/code> we\u2019re setting the uploads folder to public\/uploads<\/em>. Create that folder and set the necessary permissions, for example:
Set the app to use the body-parser<\/code> library.
Set the public<\/em> folder as the static directory for express. If a file called myphoto.png<\/em> is uploaded to the public\/uploads<\/em> directory, it is accessible through the following URL: http:\/\/your-server.com\/uploads\/myphoto.png<\/a><\/em>
Attach the app to port 3000<\/code>. This allows access at http:\/\/localhost:3000<\/a><\/em>.
Define the route for the home page. We\u2019re only using it for testing so you can check if the server is running.
Define the route for accepting data submitted from the app. The route logs that a request has been received and the contents of the request body. Then it returns an \u2018ok\u2019 as the response.
Finally we have the route for accepting uploaded files. This uses the upload<\/code> object provided by the multer<\/code> library to upload a single file. Once the file is uploaded, the file data is available in the req.file<\/code> object and we send back the file name to the app.
Now we\u2019re ready to compile the app and deploy to an Android device. Before we do, we need to run the node server and make it accessible through the internet.
Use ngrok<\/a> to expose it to the internet:
This returns the URL which you can use in the app. Open js\/services\/RequestsService.js<\/em> and update base_url<\/code>. In js\/controllers\/DialogController.js<\/em> update base_uploads_url<\/code>.
Compile and run the app for Android:
That\u2019s it! In this tutorial you\u2019ve learned how to work with the Facebook API inside a Cordova app. Specifically you\u2019ve learned how to log in and out of Facebook, use the Graph API to get users data and Facebook dialogs to post a status and send messages. You can access the source code used in this tutorial in this Github repo<\/a> and I would love to hear any comments or questions you may have.
Wern is a web developer from the Philippines. He loves building things for the web and sharing the things he has learned by writing in his blog. When he’s not coding or learning something new, he enjoys watching anime and playing video games.
\u00a9 2000 \u2013 2024 SitePoint Pty. Ltd.
This site is protected by reCAPTCHA and the Google Privacy Policy <\/a>and Terms of Service <\/a>apply.<\/p>\n

source<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

In this tutorial we\u2019ll be creating a Cordova app that connects to the Facebook API using the official Facebook plugin for Cordova. We\u2019ll cover how to login and logout of Facebook, use dialogs, and make calls to the Graph API. Note that this tutorial isn\u2019t for beginners, I will assume that you have already setup…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[69],"class_list":["post-11478","post","type-post","status-publish","format-standard","hentry","category-tutoriais","tag-tutorial"],"yoast_head":"\nWorking with the Facebook API in a Cordova App \u2014 SitePoint - SitePoint - 4tuneagencia.digital<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/4tuneagencia.digital\/blog\/working-with-the-facebook-api-in-a-cordova-app-sitepoint-sitepoint\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Working with the Facebook API in a Cordova App \u2014 SitePoint - SitePoint\" \/>\n<meta property=\"og:description\" content=\"In this tutorial we\u2019ll be creating a Cordova app that connects to the Facebook API using the official Facebook plugin for Cordova. We\u2019ll cover how to login and logout of Facebook, use dialogs, and make calls to the Graph API. Note that this tutorial isn\u2019t for beginners, I will assume that you have already setup...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/4tuneagencia.digital\/blog\/working-with-the-facebook-api-in-a-cordova-app-sitepoint-sitepoint\/\" \/>\n<meta property=\"og:site_name\" content=\"4tuneagencia.digital\" \/>\n<meta property=\"article:published_time\" content=\"2024-01-21T01:25:03+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/uploads.sitepoint.com\/wp-content\/uploads\/2015\/12\/1449042843new-app.png\" \/>\n<meta name=\"author\" content=\"4tune\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"4tune\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"18 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/4tuneagencia.digital\/blog\/working-with-the-facebook-api-in-a-cordova-app-sitepoint-sitepoint\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/4tuneagencia.digital\/blog\/working-with-the-facebook-api-in-a-cordova-app-sitepoint-sitepoint\/\"},\"author\":{\"name\":\"4tune\",\"@id\":\"https:\/\/4tuneagencia.digital\/blog\/#\/schema\/person\/7c40d2e8b9964c2390122613459c2100\"},\"headline\":\"Working with the Facebook API in a Cordova App \u2014 SitePoint – SitePoint\",\"datePublished\":\"2024-01-21T01:25:03+00:00\",\"dateModified\":\"2024-01-21T01:25:03+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/4tuneagencia.digital\/blog\/working-with-the-facebook-api-in-a-cordova-app-sitepoint-sitepoint\/\"},\"wordCount\":3464,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/4tuneagencia.digital\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/4tuneagencia.digital\/blog\/working-with-the-facebook-api-in-a-cordova-app-sitepoint-sitepoint\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/uploads.sitepoint.com\/wp-content\/uploads\/2015\/12\/1449042843new-app.png\",\"keywords\":[\"Tutorial\"],\"articleSection\":[\"Tutoriais\"],\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/4tuneagencia.digital\/blog\/working-with-the-facebook-api-in-a-cordova-app-sitepoint-sitepoint\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/4tuneagencia.digital\/blog\/working-with-the-facebook-api-in-a-cordova-app-sitepoint-sitepoint\/\",\"url\":\"https:\/\/4tuneagencia.digital\/blog\/working-with-the-facebook-api-in-a-cordova-app-sitepoint-sitepoint\/\",\"name\":\"Working with the Facebook API in a Cordova App \u2014 SitePoint - SitePoint - 4tuneagencia.digital\",\"isPartOf\":{\"@id\":\"https:\/\/4tuneagencia.digital\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/4tuneagencia.digital\/blog\/working-with-the-facebook-api-in-a-cordova-app-sitepoint-sitepoint\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/4tuneagencia.digital\/blog\/working-with-the-facebook-api-in-a-cordova-app-sitepoint-sitepoint\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/uploads.sitepoint.com\/wp-content\/uploads\/2015\/12\/1449042843new-app.png\",\"datePublished\":\"2024-01-21T01:25:03+00:00\",\"dateModified\":\"2024-01-21T01:25:03+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/4tuneagencia.digital\/blog\/working-with-the-facebook-api-in-a-cordova-app-sitepoint-sitepoint\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/4tuneagencia.digital\/blog\/working-with-the-facebook-api-in-a-cordova-app-sitepoint-sitepoint\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/4tuneagencia.digital\/blog\/working-with-the-facebook-api-in-a-cordova-app-sitepoint-sitepoint\/#primaryimage\",\"url\":\"https:\/\/uploads.sitepoint.com\/wp-content\/uploads\/2015\/12\/1449042843new-app.png\",\"contentUrl\":\"https:\/\/uploads.sitepoint.com\/wp-content\/uploads\/2015\/12\/1449042843new-app.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/4tuneagencia.digital\/blog\/working-with-the-facebook-api-in-a-cordova-app-sitepoint-sitepoint\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\/\/4tuneagencia.digital\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Working with the Facebook API in a Cordova App \u2014 SitePoint – SitePoint\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/4tuneagencia.digital\/blog\/#website\",\"url\":\"https:\/\/4tuneagencia.digital\/blog\/\",\"name\":\"4tuneagencia.digital\",\"description\":\"Marketing e Web Designer \",\"publisher\":{\"@id\":\"https:\/\/4tuneagencia.digital\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/4tuneagencia.digital\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/4tuneagencia.digital\/blog\/#organization\",\"name\":\"4tuneagencia.digital\",\"url\":\"https:\/\/4tuneagencia.digital\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/4tuneagencia.digital\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/4tuneagencia.digital\/blog\/wp-content\/uploads\/2023\/09\/novo-logo-e1694954525541.png\",\"contentUrl\":\"https:\/\/4tuneagencia.digital\/blog\/wp-content\/uploads\/2023\/09\/novo-logo-e1694954525541.png\",\"width\":250,\"height\":250,\"caption\":\"4tuneagencia.digital\"},\"image\":{\"@id\":\"https:\/\/4tuneagencia.digital\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/4tuneagencia.digital\/blog\/#\/schema\/person\/7c40d2e8b9964c2390122613459c2100\",\"name\":\"4tune\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/4tuneagencia.digital\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e81e8ea0176022ee4555117aee5e3092bff2a7aaa930134f8023c7d4bc2f1495?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e81e8ea0176022ee4555117aee5e3092bff2a7aaa930134f8023c7d4bc2f1495?s=96&d=mm&r=g\",\"caption\":\"4tune\"},\"sameAs\":[\"http:\/\/4tuneagencia.digital\"],\"url\":\"https:\/\/4tuneagencia.digital\/blog\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Working with the Facebook API in a Cordova App \u2014 SitePoint - SitePoint - 4tuneagencia.digital","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/4tuneagencia.digital\/blog\/working-with-the-facebook-api-in-a-cordova-app-sitepoint-sitepoint\/","og_locale":"pt_BR","og_type":"article","og_title":"Working with the Facebook API in a Cordova App \u2014 SitePoint - SitePoint","og_description":"In this tutorial we\u2019ll be creating a Cordova app that connects to the Facebook API using the official Facebook plugin for Cordova. We\u2019ll cover how to login and logout of Facebook, use dialogs, and make calls to the Graph API. Note that this tutorial isn\u2019t for beginners, I will assume that you have already setup...","og_url":"https:\/\/4tuneagencia.digital\/blog\/working-with-the-facebook-api-in-a-cordova-app-sitepoint-sitepoint\/","og_site_name":"4tuneagencia.digital","article_published_time":"2024-01-21T01:25:03+00:00","og_image":[{"url":"https:\/\/uploads.sitepoint.com\/wp-content\/uploads\/2015\/12\/1449042843new-app.png"}],"author":"4tune","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"4tune","Est. tempo de leitura":"18 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/4tuneagencia.digital\/blog\/working-with-the-facebook-api-in-a-cordova-app-sitepoint-sitepoint\/#article","isPartOf":{"@id":"https:\/\/4tuneagencia.digital\/blog\/working-with-the-facebook-api-in-a-cordova-app-sitepoint-sitepoint\/"},"author":{"name":"4tune","@id":"https:\/\/4tuneagencia.digital\/blog\/#\/schema\/person\/7c40d2e8b9964c2390122613459c2100"},"headline":"Working with the Facebook API in a Cordova App \u2014 SitePoint – SitePoint","datePublished":"2024-01-21T01:25:03+00:00","dateModified":"2024-01-21T01:25:03+00:00","mainEntityOfPage":{"@id":"https:\/\/4tuneagencia.digital\/blog\/working-with-the-facebook-api-in-a-cordova-app-sitepoint-sitepoint\/"},"wordCount":3464,"commentCount":0,"publisher":{"@id":"https:\/\/4tuneagencia.digital\/blog\/#organization"},"image":{"@id":"https:\/\/4tuneagencia.digital\/blog\/working-with-the-facebook-api-in-a-cordova-app-sitepoint-sitepoint\/#primaryimage"},"thumbnailUrl":"https:\/\/uploads.sitepoint.com\/wp-content\/uploads\/2015\/12\/1449042843new-app.png","keywords":["Tutorial"],"articleSection":["Tutoriais"],"inLanguage":"pt-BR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/4tuneagencia.digital\/blog\/working-with-the-facebook-api-in-a-cordova-app-sitepoint-sitepoint\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/4tuneagencia.digital\/blog\/working-with-the-facebook-api-in-a-cordova-app-sitepoint-sitepoint\/","url":"https:\/\/4tuneagencia.digital\/blog\/working-with-the-facebook-api-in-a-cordova-app-sitepoint-sitepoint\/","name":"Working with the Facebook API in a Cordova App \u2014 SitePoint - SitePoint - 4tuneagencia.digital","isPartOf":{"@id":"https:\/\/4tuneagencia.digital\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/4tuneagencia.digital\/blog\/working-with-the-facebook-api-in-a-cordova-app-sitepoint-sitepoint\/#primaryimage"},"image":{"@id":"https:\/\/4tuneagencia.digital\/blog\/working-with-the-facebook-api-in-a-cordova-app-sitepoint-sitepoint\/#primaryimage"},"thumbnailUrl":"https:\/\/uploads.sitepoint.com\/wp-content\/uploads\/2015\/12\/1449042843new-app.png","datePublished":"2024-01-21T01:25:03+00:00","dateModified":"2024-01-21T01:25:03+00:00","breadcrumb":{"@id":"https:\/\/4tuneagencia.digital\/blog\/working-with-the-facebook-api-in-a-cordova-app-sitepoint-sitepoint\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/4tuneagencia.digital\/blog\/working-with-the-facebook-api-in-a-cordova-app-sitepoint-sitepoint\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/4tuneagencia.digital\/blog\/working-with-the-facebook-api-in-a-cordova-app-sitepoint-sitepoint\/#primaryimage","url":"https:\/\/uploads.sitepoint.com\/wp-content\/uploads\/2015\/12\/1449042843new-app.png","contentUrl":"https:\/\/uploads.sitepoint.com\/wp-content\/uploads\/2015\/12\/1449042843new-app.png"},{"@type":"BreadcrumbList","@id":"https:\/\/4tuneagencia.digital\/blog\/working-with-the-facebook-api-in-a-cordova-app-sitepoint-sitepoint\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/4tuneagencia.digital\/blog\/"},{"@type":"ListItem","position":2,"name":"Working with the Facebook API in a Cordova App \u2014 SitePoint – SitePoint"}]},{"@type":"WebSite","@id":"https:\/\/4tuneagencia.digital\/blog\/#website","url":"https:\/\/4tuneagencia.digital\/blog\/","name":"4tuneagencia.digital","description":"Marketing e Web Designer ","publisher":{"@id":"https:\/\/4tuneagencia.digital\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/4tuneagencia.digital\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"pt-BR"},{"@type":"Organization","@id":"https:\/\/4tuneagencia.digital\/blog\/#organization","name":"4tuneagencia.digital","url":"https:\/\/4tuneagencia.digital\/blog\/","logo":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/4tuneagencia.digital\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/4tuneagencia.digital\/blog\/wp-content\/uploads\/2023\/09\/novo-logo-e1694954525541.png","contentUrl":"https:\/\/4tuneagencia.digital\/blog\/wp-content\/uploads\/2023\/09\/novo-logo-e1694954525541.png","width":250,"height":250,"caption":"4tuneagencia.digital"},"image":{"@id":"https:\/\/4tuneagencia.digital\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/4tuneagencia.digital\/blog\/#\/schema\/person\/7c40d2e8b9964c2390122613459c2100","name":"4tune","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/4tuneagencia.digital\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e81e8ea0176022ee4555117aee5e3092bff2a7aaa930134f8023c7d4bc2f1495?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e81e8ea0176022ee4555117aee5e3092bff2a7aaa930134f8023c7d4bc2f1495?s=96&d=mm&r=g","caption":"4tune"},"sameAs":["http:\/\/4tuneagencia.digital"],"url":"https:\/\/4tuneagencia.digital\/blog\/author\/admin\/"}]}},"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/4tuneagencia.digital\/blog\/wp-json\/wp\/v2\/posts\/11478","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/4tuneagencia.digital\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/4tuneagencia.digital\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/4tuneagencia.digital\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/4tuneagencia.digital\/blog\/wp-json\/wp\/v2\/comments?post=11478"}],"version-history":[{"count":0,"href":"https:\/\/4tuneagencia.digital\/blog\/wp-json\/wp\/v2\/posts\/11478\/revisions"}],"wp:attachment":[{"href":"https:\/\/4tuneagencia.digital\/blog\/wp-json\/wp\/v2\/media?parent=11478"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/4tuneagencia.digital\/blog\/wp-json\/wp\/v2\/categories?post=11478"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/4tuneagencia.digital\/blog\/wp-json\/wp\/v2\/tags?post=11478"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}