Use the Facebook API to easily access any user's profile picture by providing their unique Facebook user ID

For my JavaScript function, I am taking the input "user_id" and expecting it to provide me with the profile photo data. Everything works fine when a logged in user's profile picture is being displayed. However, when I pass a logged out user_id, an error occurs stating "TypeError: response.picture is undefined". This is my first attempt at using the Facebook API to retrieve user information based solely on user_id input. Below is the code snippet for reference where "a" represents the input.

// Function to fetch profile picture with just username input
function getInfopeople(a) {

    // Constructing the user_id link for profile picture
    var user_id = "/"+a + "/picture";

    console.log(user_id);
    
    // Calling FB.api to get profile picture based on user_id
    FB.api('/http://graph.facebook.com/user_id,','GET', {fields:'picture.width(150).height(150)'}, function(response) {
        document.getElementById('user_status').innerHTML = "<img src='" + response.picture.data.url + "'>";
    });
}

Answer №1

Your API call was incorrect. The correct way to fetch the user profile picture is by calling this specific API.

function retrieveUserInfo(id) {

    // https://graph.facebook.com/{version}/{user_id}?fields=picture.width(150).height(150)

    FB.api('/' + id, 'GET', { fields:'picture.width(150).height(150)' }, function(response) {
        document.getElementById('user_display').innerHTML = "<img src='" + response.picture.data.url + "'>";
    });
}

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

Searching for mobile WiFi preferences through a web browserHere are the steps to

Is there a method to access mobile connectivity settings through a website? I am interested in determining the connection type (3G\4G\WiFi) and if it is WiFi, identifying the security method being used. Is this achievable? If so, how? Edit: If ...

Creating a BPMN web-based designer using JavaScript

In search of a web-based UI tool to design and save bpmn workflows as XML for integration with an Angular front end. As a starting point, I need to draw bpmn shapes. Does anyone have suggestions on the best method to accomplish this using JavaScript? I&apo ...

Selecting an option from the drop-down list will change a text box to read

My current challenge involves making certain text boxes read-only based on the injury selected from a drop-down list. For example, if "thigh," "arm," "head," "heart," or "fingers" are chosen, specific text boxes will be restricted for input. For instance, ...

Discovering the wonders of React and Javascript through the powerful Map function

I've exhausted all my knowledge of map functions and syntax, but I keep encountering the error TypeError: Cannot read property 'action' of undefined. This issue seems to stem from this line: constructor(data=[]). Typically, I am only familia ...

ReactJs - The pagination feature in MaterialTable is malfunctioning, it is not displaying the correct

I am currently utilizing the Material-table plugin. It successfully displays the data, however, I am facing issues with Pagination and Row per Page dropdown functionality. When trying to click on the next button or select a number of rows, nothing happens. ...

What sets apart genuine user interactions from programmatically generated actions?

Working with webkit notifications on Chrome has presented a challenge. The window.webkitNotifications.requestPermission method must be called from a user action, such as a click. Attempting to call it at any other time will not have any effect and will not ...

Checking for at least one matching pair in a JavaScript object

I have a pair of dictionaries that I need to compare in JavaScript. The goal is to determine if there is at least one identical key-value pair between them, not necessarily the entire dictionary being identical. my_dict = {"Text1":"Text1", "Text2":"Text3", ...

Accessing the Angular scope and making modifications using Chrome browser

I need to access the $scope value in order to update its data values via a chrome extension. I have attempted to obtain the $scope using the code below: var $scope = angular.element(document.getElementById('name')).scope() While this code wor ...

Despite being invoked five times and enclosed in a React.Fragment tag, the functional component is still not displaying any content

<html lang="en"> <head> <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js& ...

What is the sequence of the middlewares for error handling and handling of 404 errors?

The express.js website has confused me with contradictory statements regarding error-handling middleware. According to one page, you should define error-handling middleware last, after other app.use() and routes calls. However, another page states that you ...

Upgrade to the latest Gulp version and transition away from using the gulp.start function

Currently in the process of updating all my gulp v3 projects to v4, but running into an issue with the gulp start function. Upon executing gulp start in gulp v4, I encounter an error. This was the code snippet I used in v3: gulp.parallel within gulp.seri ...

Is it possible to override values set in the constructor(props) in React? If not, what is the best way to set defaults that can be overwritten later?

I'm confident I know the solution to this problem because my setState({}) seems to have no effect. This is the constructor code that I currently have: constructor(props) { super(props); this.state = { percentiles: { incN ...

Protractor's browser.wait function is not functioning properly when conducting tests on a non-AngularJS website

I am currently working on testing a non-angular JS website using Protractor. Even though my test case passes successfully, I am looking to eliminate the sleep statement and replace it with either a wait or Expected condition in my test case. Here is a sni ...

Executing PHP script using HTML button in combination with Ajax and Javascript

I have a PHP function that I would like to execute from an HTML button that I have. The PHP function is located in a separate file from the HTML button. I have achieved this using: <input type="submit" name="test" id="bt1" value="RUN" /><br/> ...

Ajax in action

I've encountered a problem with my JavaScript function. The function is supposed to display an alert when called without AJAX, but it's not working when I include AJAX. Here's the function: function stopSelected(){ var stop=document ...

Is the form being submitted with the href attribute?

Does this code ensure security? <form id="form-id"> <input type='text' name='name'> <input type='submit' value='Go' name='Go'/></form> <a href="#" onclick="docume ...

Close the menu in Angular 7 by clicking outside of it

I am seeking a way to detect when a click event occurs inside the parent div #menu, regardless of any HTML tags present within it. Using nativeElement.parent did not provide the desired result. Here is the HTML code: <button #toggleButton (click)="to ...

What is the best way to sort search results using various criteria?

Currently, my search filter is only able to filter results based on the 'packageName' field. I now have a requirement to expand this filter to also include the 'dateStart' and 'dateFinish' fields. getters: { filteredPacks: ...

Revamping the website to become a Progressive Web App

I am in the process of transforming my website into a Progressive Web App (PWA) and have made some updates to my code to facilitate this: index.html <script> if('serviceWorker' in navigator) { navigator.serviceWorker.registe ...

Grabbing nested JSON Array data using Node.js

As a beginner in Node.js, I’m attempting to extract data from the JSON below: var data1 = { "_id":"R1::table::A1::order::167::comanda::2", "_rev":"1-ed6df32d3b4df9cc8019e38d655a86f5", "comanda":[ [ { ...