Fetching user feeds from Facebook with AngularJS is easier than you think

I have searched through multiple articles but have yet to find a solution for this particular issue. My goal is to retrieve user feeds from Facebook. How can I achieve this?

Below is my code:

var newMod = angular.module('newapp', []);

newMod.controller('mainCtrl', function ($scope) {

window.fbAsyncInit = function () {
    //SDK loaded, initialize it
    FB.init({
        appId: 'your app id',
        xfbml: true,
        version: 'v2.3'
    });

    //check user session and refresh it
    FB.getLoginStatus(function (response) {
        if (response.status === 'connected') {
            //user is authorized
            document.getElementById('loginBtn').style.display = 'none';
            getUserData();
        } else {
            //user is not authorized
        }

       });

    function getUserData() {
        FB.api('/me', function (response) {
            document.getElementById('response').innerHTML = 'Hello ' + response.name;
            document.getElementById('dialog_div').style.border = '1px solid red';
            document.getElementById('dialog_div').innerHTML = response;
        });


    }
};

//load the JavaScript SDK
(function (d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) { return; }
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));


$scope.loginClick = function () {
    FB.login(function (response) {
        if (response.authResponse) {
            //user just authorized your app
            document.getElementById('loginBtn').style.display = 'none';
            getUserData();
        }
    }, { scope: 'email,public_profile', return_scopes: true });
}

});

My HTML code:

<body ng-app="newapp">

<div ng-controller="mainCtrl">
<button id='loginBtn' ng-click="loginClick()" >FacebookLOGin</button;
    <div id="response"></div>
    <div id="dialog_div"></div>
</div>

From my experience with getuserdata(), I am able to retrieve user details successfully. Now, I am looking to access the user's feeds. I attempted to use the code below, but it returns an empty array.

FB.api("/me/feed",function(response){
if(response !="" ){
// access the feed data
  }
})

If anyone could provide guidance on how to retrieve user feeds after login, that would be greatly appreciated.

Answer №1

I have discovered the error that caused the issue. In this case, the session expires when attempting to access the feeds.

To resolve this, include the

FB.api('/me/feed',function(response){})
within the FB.login(function(response) {}) section of the code. This adjustment will allow the session to successfully access the user's feeds.

Answer №2

In order for your application to access the user's feed, it is essential to request the user_posts permission as stated in the /user/feed documentation. It is important to implement Facebook login, seek permission from the user for user_posts, and then retrieve the user's feed.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Organize intricate JavaScript Arrays

Similar Question: How to sort an array of javascript objects? I'm in the process of transitioning some of my older ActionScript 2.0 code to JavaScript. While most things are running smoothly, I've hit a roadblock when trying to numerically s ...

PHP not delivering a variable via AJAX

I've noticed that there are similar questions on this platform, but I've spent my entire day researching and fixing bugs to figure out why my ajax code doesn't return a response from the php file. All I need is for it to notify me when a use ...

Does anyone have any insight on why I can't seem to remove an item from my list of tasks?

Having trouble with my React todo list. After submitting, the list item looks fine. I expect to be able to delete it by clicking on the item, but nothing happens. When I try to add another item, the page refreshes and all items are removed. The console ...

Easily iterate through the <li> elements using jQuery and append them to the <datalist> dynamically

My jQuery loop seems to be malfunctioning as it's not showing the values of my li elements. Instead, I'm seeing [object HTMLElement] in my input search bar. <div id="sidebar-wrapper"> <input type="text" list="searchList" class="searc ...

Styling Your Navigation Bar with CSS and Active States

Creating an interactive navigation element for a menu can be challenging, but here's a helpful example. http://jsfiddle.net/6nEB6/38/ <ul> <li><a href="" title="Home">Home</a></li> <li class="activ ...

Issues with the play() method in Javascript across Firefox, Safari, and IE 11 are causing functionality problems

I developed a basic video and audio player that smoothly fades out an introductory image and starts or stops playing an mp4 file upon click. Everything functions properly in Chrome, but unfortunately does not work in other major browsers. Despite checking ...

Experiencing a blank page issue with AngularJS ui.router

After noticing several unanswered questions related to this topic, I hope to phrase mine in a way that leads to a solution. Thank you in advance. Utilizing grunt with AngularJS 1 index.html <!doctype html > <html ng-app="studentAdmissions" > ...

Ways to position an image in the middle of a Div

I am currently working with PHP and Smarty, attempting to display a slideshow's images in the center of a specific div, but I am encountering difficulties achieving this. Below you will find the code snippet. Can anyone help me figure out what I migh ...

Emulating a Javascript API request

I'm looking to practice simulating API calls for a VueJS application. Currently, I am fetching data from a hardcoded JSON file that I've created. Within my App.vue: <template> <p>{{ teams.yankees.city }}</p> // Output will b ...

The sequence of indices in a for loop and making Ajax requests

I'm dealing with a challenge related to executing ajax requests within a for loop. Despite researching solutions online and implementing them to prevent synchronous request execution, I still face an issue in maintaining the correct order of the succe ...

Guide to including spinner in React JS with TypeScript

I need help with adding a spinner to a React component. The issue I'm facing is that the spinner does not disappear after fetching data from an API. Can someone please point out what I am doing wrong? Here is the code snippet: import React, { useSta ...

hiding a dropdown menu in vuejs when clicking outside of it

Utilizing dropdown menu components in vuejs to create a standard dropdown menu. The code for the dropdown component is as follows: <template> <span class="dropdown" :class="{shown: state}"> <a href="#" @click.prevent="toggleDro ...

Getting the iframe onload event in an ASP.NET application

I have integrated ReportViewer to display SSRS reports on my .aspx page. However, since the ReportViewer is rendered as an iframe in the browser, I am looking for a way to trigger a JavaScript function every time the iframe loads. Using window.onload w ...

Issue with Redux saga not responding to action initiated by clicking on an icon

Declaration of Saga function* DoStuffInSaga({myRef}){ try { console.info("saga running"); return yield delay(1000, 1); } catch(error){ console.warn(error); } } export function* mySaga(){ yield all([ yi ...

Executing a function on the window object in JavaScript

I have come across the following code and am seeking guidance on how to get the last line to function correctly. The API I am using currently employs _view appended as its namespacing convention, but I would prefer to switch to something like arc.view.$f ...

Inserting an item into ng-model within a dropdown menu

I have a select box populated with data from my backend. This data is an array of objects: [Object { superkund_id="4", nod_id="12068", namn="Växjö Fagrabäck"}, Object { superkund_id="5", nod_id="9548", namn="Halmstad Bågen / Pilen"}] I am using ng-o ...

Create an HTTP service using promises in AngularJS

Upon accessing a specific page of the application via its URL, I aim to verify whether the page can be loaded by making an API call. If allowed, the page should load; otherwise, it should redirect to a different page within the application. To achieve th ...

What steps should be taken to safeguard an Angular 1.2 application from XSS vulnerabilities?

Recently, I stumbled upon an interesting article at this link: In my work on an enterprise application, we have been using Angular 1.2 but are now looking to upgrade to newer versions like 1.3 and beyond. I am curious to hear from others who have made sp ...

The Angular component is failing to display the template

After following a tutorial on UI-Router () I have implemented the following states in my Angular application: angular .module('appRoutes', ["ui.router"]) .config(['$stateProvider', '$urlRouterProvider', function($sta ...

Issue with page scrolling while utilizing the Wow.js jQuery plugin

While using the Wow.js plugin for scroll animations, I encountered an issue on mobile phones. When reaching the Pricings section, scrolling becomes impossible for some reason. I am utilizing Bootstrap 3 in this project. Despite attempting to modify the an ...