Returning Facebook image url through javascript

Question

I'm trying to return a facebook user's profile pic through the javascript api

<script type="text/javascript">   
    function get_profile_pic(){
                    FB.api("/me/picture?type=square",  function(response) {
                    alert(response.data.url); 
                        return response.data.url;
                    });
                }
    </script>

and in my html file I have :

<img class="profile_pic" src="get_profile_pic();"/>

in my css file I have

    #profile_pic {
   height: 50px;
   width: 50px; 
   top: 315px;
    left: 30px;
    position: absolute;
    display: block;
}

but when I load the page, the profile pic is not visible. I know that the api works correctly because the url in the alert is for the picture, but I don't know what I'm missing, because it doesn't load on the html page. Any help would be appreciated!

asifrc · Accepted Answer · 2013-08-15 06:58:18Z

1

The src attribute needs to be a url. It won't execute javascript. What you can do though, after the FB api has loaded up, is to call get_profile_pic(), but only after you change it to the following:

function get_profile_pic(){
                FB.api("/me/picture?type=square",  function(response) { 
                    $('.profile_pic').attr('src', response.data.url);
                });
            }

Note: this uses jQuery.. If you're not using jQuery, and don't know how to change the src of an image using plain javascript, (and aren't willing to use jQuery), then let me know, and I'll update my answer..

Let me know if this makes sense or if you have any questions :)

Plain Javascript

By placing the code inside window.fbAsyncInit after the FB.init, you can ensure that your code is executed after the facebook api is called. For instance, the following is a plain javascript implementation of the previous script:

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    // init the FB JS SDK
    FB.init({
      appId      : 'YOUR_APP_ID',                        // App ID from the app dashboard
      channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel file for x-domain comms
      status     : true,                                 // Check Facebook Login status
      xfbml      : true                                  // Look for social plugins on the page
    });

    // Additional initialization code such as adding Event Listeners goes here
    FB.api("/me/picture?type=square",  function(response) {
        var profilePics = document.getElementsByClassName('profile_pics');
        for (i=0; i<a.length; i++)
        {
            profilePics[i].src = response.data.url;
        }
    });
  };

  // Load the SDK asynchronously
  (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/all.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>

edited Aug 15, 2013 at 6:58

answered Aug 15, 2013 at 5:06

asifrc

5,8412 gold badges20 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Kitty1911 Over a year ago

Thank you. But how do I load call the JS function after the api has loaded up? Because my page consists of static data only. Is there a way to do the same with plain JS?

asifrc Over a year ago

@Kitty1911 Updated my answer.. Let me know if it makes sense or if you still have any questions :)

Kitty1911 Over a year ago

I originally used the first method you specified and the image still doesn't load. Do you know what I might be missing?

Kitty1911 Over a year ago

Also, I'm trying to load the image before the page loads, so maybe that's where I'm missing a step. Adding the javascript tag before the page elements isn't helping me, I'm guessing because the <img> tag is located somewhere at the bottom of the page.

Kitty1911 Over a year ago

Nevermind, I realised I should use the $document.ready(); Thanks!

Collectives™ on Stack Overflow

Returning Facebook image url through javascript

1 Answer 1

Plain Javascript

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Plain Javascript

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related