facebook status updates op eigen website

[bart1074]

Ik wil de status updates van mijn facebook op mijn eigen website plaatsen. Ik kan alleen nergens vinden hoe dit moet. Ik lees het een en ander over het gebruik van rss-feeds, maar dat kan ik ook niet vinden. Weten jullie hoe dit moet?

Via google kom jij eigenlijk alleen maar terecht bij deze website maar die is volgens mij nogal verouderd, en als ik het goed heb werkt die manier niet meer.

Kennen jullie een mogelijkheid? Ik hoor het graag.

P.S. Ik weet niet zeker of dit het juiste forum is?!

[Verwijderd]

http://developers.facebook.com/docs/reference/api/user/

[bart1074]

Verwijderd schreef op woensdag 12 januari 2011 @ 23:07:
http://developers.facebook.com/docs/reference/api/user/

Veel dank. Aangezien ik alleen mijn eigen berichten wil laten zien op de website neem ik aan dat ik de connection 'posts' moet hebben. Maar waar kan ik ergens een goede uitleg vinden van wat ik precies in de code van mijn eigen webpagina's moet zetten om die posts op te halen via deze graph api.

Mijn doel is om op de voorpagina van mijn eigen website, al mijn eigen status updates van FB te laten zien. Het moet dus niet veranderd als bij wijze van spreken Jantje de website bezoekt, dat zijn status updates verschijnen. Volgens mij gaat dat via de graph api met de connection 'posts'. Maar hoe roep ik dat precies op?

Als je naar de hierboven genoemde website gaat en dan naar de paragraaf 'personalization' kom je volgens mij bij de sectie die ik moet hebben. Hier staat ook een code voorbeeld waarin o.a. de FB.ui api wordt opgeroepen. Begrijp ik het goed dat ik hiervan alleen de image src hoef aan te passen in het adres dat ik krijg als ik op de connection posts druk (terwijl ik ben ingelogd) op de hierboven genoemde website? Daarnaast moet ik natuurlijk mijn eigen APP ID opgeven, lijkt me?

Ik heb het al geprobeerd en krijg een 'undefined' terug, dus iets gaat er fout. Hopelijk kunnen jullie helpen. Bij voorbaat dank.

[Naranya]

Om 'statuses' te tonen heb je de 'read_stream' permissie nodig.

[bart1074]

Ik vind het nogal ingewikkeld.

Allereerst registreer ik mijn website waarop ik mijn eigen feed wil publiceren als app, zodat ik een id en secret id krijg.
Vervolgens volg ik keurig de stappen uit de 'authentication guide' onder het kopje 'Authenticating Users in a Web Application', alleen volg ik er een 'scope=read_stream' aan toe omdat ik uitgebreide toegang nodig heb voor de status updates uit de feed. Vervolgens vul ik dus het volgende in om toegang te verlenen:

1. https://graph.facebook.co...xample.com/oauth_redirect (waar ik ipv example.com het domein van mijn website invul)
2. Ik kom terecht op mijn eigen pagina die weliswaar aangeeft dat hij de opgevraagd pagina niet kan vinden, maar wel een code in de adresbalk terugstuurt.
3. https://graph.facebook.co...lient_secret=...&code=... (id en app behorende bij mijn website applicatie en code zoals teruggegeven door de browser na stap 1).
4. In de browser staat nu: access_token=...
5. Deze access_token gebruik in het hieronder geplaatste script dat ik op mijn website plaats

code:

<div id="fb-root">
</div>

   <script src="http://connect.facebook.net/nl_NL/all.js">
   </script>
   
        <script>
         FB.init({ 
            appId:'<ID van de app behorende bij mijn eigen website>', cookie:true, 
            status:true, xfbml:true 
         });
         FB.api('< ID van de user van wie ik de informatie wil >', function(user) {
           if(user != null) {
              var image = document.getElementById('image');
              image.src = 'https://graph.facebook.com/1521886344/feed?access_token=< zoals teruggekregen via hierboven genoemde stappen >';
              var name = document.getElementById('name');
              name.innerHTML = user.name
           }
         });
        </script>
        
            <div align="center">
           
                <img id="image"/>
                
                    <div id="name">
                    </div>
                    
            </div>

Doe ik iets fout? Resultaat op mijn website is dat er niks te zien is. Er wordt niets weergegeven. Iemand een idee?

[bart1074]

Mijn graphs adres lijkt overigens wel te kloppen, want als ik die oproep in de browser krijg ik een overzicht in een soort van scripttaal met alle laatste gegevens uit mijn feed. Dus het gaat kennelijk mis in het omzetten van die scripttaal. Waarschijnlijk zit de fout dus in het scriptsvenster hierboven. Maar wat dan?

[RobIII]

Murderer schreef op donderdag 13 januari 2011 @ 22:45:
een soort van scripttaal

Ik voermoed dat je JSON bedoelt. Misschien is het handig als je je even inleest in de basismaterie en termen; dat praat makkelijker

[ Voor 7% gewijzigd door RobIII op 13-01-2011 22:48 ]

[bart1074]

RobIII schreef op donderdag 13 januari 2011 @ 22:47:
[...]

Ik voermoed dat je JSON bedoelt. Misschien is het handig als je je even inleest in de basismaterie en termen; dat praat makkelijker

Dank voor je reactie. De scripttaal waar ik op doelde, is inderdaad JSON.
Ik ben er ook al gedeeltelijk achter wat er mis ging. De manier waarop ik de graph api wilde renderen (zo heet dat toch?) ging helemaal mis. Op die manier kon ik alleen mijn facebook profielfoto renderen. Eigenlijk is mijn vraag dus hoe render ik de feed via de graph api. Ik kan dat via het developer gedeelte van facebook.com niet vinden en heb er zelf te weinig verstand van. Iemand die me een tip kan geven?

[Naranya]

Je krijgt van https://graph.facebook.com/1521886344/feed?access_token= een JSON array van 'Post' Objecten terug welke je direct aan de source van een image hangt, dat werkt natuurlijk niet. Je zult deze eerst moeten parsen.

[bart1074]

Naranya schreef op donderdag 13 januari 2011 @ 23:13:
Je krijgt van https://graph.facebook.com/1521886344/feed?access_token= een JSON array van 'Post' Objecten terug welke je direct aan de source van een image hangt, dat werkt natuurlijk niet. Je zult deze eerst moeten parsen.

Ja precies, daar was ik even geleden zelf ook achter gekomen. Maar hoe werkt dat parsen van die post objecten? Waar kan ik daar voorbeeld of uitleg over vinden? Veel dank alvast.

[Naranya]

Ik zou deze calls serverside maken, weet niet welke taal je gebruikt maar Python heeft bijvoorbeeld een urlopen() je kunt de response dan makkelijk parsen met een json lib. PHP heeft bijvoorbeeld ook een json parser.

Je kunt verder ook parameters meegeven zoals ?limit=1 wanneer je alleen de eerste feed wilt bijvoorbeeld.

[bart1074]

Naranya schreef op donderdag 13 januari 2011 @ 23:41:
Ik zou deze calls serverside maken, weet niet welke taal je gebruikt maar Python heeft bijvoorbeeld een urlopen() je kunt de response dan makkelijk parsen met een json lib. PHP heeft bijvoorbeeld ook een json parser.

Je kunt verder ook parameters meegeven zoals ?limit=1 wanneer je alleen de eerste feed wilt bijvoorbeeld.

Server-side betekent dat het al op de server wordt uitgevoerd toch? Dat maakt het weergeven van de website sneller toch? Dat is zeker wat ik wil.

Ik begrijp wel wat van PHP. Dus ik ga het eens op die manier proberen. Dank!

EDIT: Dankjulliewel allemaal, volgens mij ben ik er aardig uitgekomen. Het heeft wat moeite gekost, maar ik ben tevreden met het resultaat. Nogmaals dank voor alle hulp.

[ Voor 8% gewijzigd door bart1074 op 14-01-2011 04:05 ]

[Cartman!]

Een website wordt niet sneller van serverside-parsing, eigenlijk is het altijd trager dan statische files zelfs. Plaats anders nog even je oplossing, dan heeft een ander er ook iets aan.

JSON is trouwens geen scripttaal maar een formaat voor uitwisseling van data

[bart1074]

PHP:

<div id="fb">
<div id="fb-root"></div>
      <script type="text/javascript" src="http://connect.facebook.net/nl_NL/all.js">
      </script>
      <script type="text/javascript" >
         FB.init({ 
            appId:'<MIJN APP ID>', cookie:true, 
            status:true, xfbml:true 
         });
         FB.api('1521886344', function(user) {
           if(user != null) {
              var image = document.getElementById('fbimage');
              image.src = 'https://graph.facebook.com/1521886344/picture?<MIJN ACCESS TOKEN>';
              var name = document.getElementById('name');
              name.innerHTML = user.name
           }
         });
       </script>
        
           <div id="fbkop">
           <img id="fbimage" align="left" class="fbimage" src="" alt="Gert Crum"/>
                <div id="fbkop-text">
                    <a href="http://www.facebook.com/gert.crum" target="blank">Volg Gert Crum op Facebook.</a> <br />
                </div>
                <div id="fbkop-text2">
                    Hieronder een overzicht van mijn laatste updates:
                </div>
           </div>

<div id="status">          
<?php

//function to retrieve posts from facebook&#8217;s server
function loadFB($fbID){
     // this is the URL that gets the data from facebook
     // the ?limit=20 tells facebook how many posts we want
     // since we&#8217;re filtering out some posts you may need to mess with this a bit
     $url="https://graph.facebook.com/1521886344/feed?access_token=<MIJN ACCESS TOKEN>&limit=7";
     //load and setup CURL
     $c = curl_init($url);
     curl_setopt($c, CURLOPT_RETURNTRANSFER, 1);
     //get data from facebook and decode JSON
     $page = json_decode(curl_exec($c));
     //close the connection
     curl_close($c);
     //return the data as an object
     return $page->data;
}

//BE SURE to enter your facebook id here
$fbid="1521886344";
//how may posts to show
$fbLimit=7;
//variable used to count how many we&#8217;ve loaded
$fbCount=0;

//call the function and get the posts from facebook
$myPosts=loadFB($fbid);

//set timezone (change this to your timezone)
date_default_timezone_set("Europe/Amsterdam");
setlocale(LC_ALL, 'nl_NL');

//loop through all the posts we got from facebook
foreach($myPosts as $dPost){
     //only show posts that are posted by the page admin
     if($dPost->from->id==$fbid){
          //get the post date / time and convert to unix time
          $dTime = strtotime($dPost->created_time);
          //format the date / time into something human readable
          //if you want it formatted differently look up the php date function
          $myTime=strftime("%e %B %Y, %H:%M uur",$dTime);
          //add a line break to separate comments
          echo("<div class=\"update\">");
          //output the message body
          $message1 = $dPost->message;
          $message2 = utf8_decode($message1);
          echo($message1);   
          //output the date / time
          echo("<br /><div class=\"datum-update\">".$myTime."</div> ");
          //add a line break to separate comments
          echo("</div>");    
          //increment counter
          $fbCount++;
          //if we&#8217;ve outputted the number set above in fblimit we&#8217;re done
          if($fbCount >= $fbLimit) break;    
     }
}

?>
</div>
<!-- <a href="http://www.facebook.com/" target="_blank" id="fblogo"> -->
<img src="gfx/facebook.png" class="fblogo" alt="" />
<!-- </a> -->
</div>

Dit is hoe ik het uiteindelijk voor elkaar heb gekregen. Overigens met dank aan Google.
Wel krijg ik volgens mij in onderstaand stukje in IE7 een 'null' is null or not an object error. Die wil ik graag wegwerken alleen weet niet precies hoe. Als ik de error console moet geloven ligt het aan innerHTML = user.name. Maar ik zie de fout niet. Wellicht kunnen jullie me erop wijzen.

JavaScript:

*doe eerst zelf eens wat moeite*

[ Voor 5% gewijzigd door RobIII op 14-01-2011 14:28 ]

[RobIII]

Murderer schreef op vrijdag 14 januari 2011 @ 14:22:
Maar ik zie de fout niet. Wellicht kunnen jullie me erop wijzen.

Doe me een lol en probeer eerst eens zelf iets: Debuggen: Hoe doe ik dat?
Pak er een Firebug bij of druk op F12 in IE of plaats op wat strategische plekken wat alerts in de JS en hoppa, debuggen maar.

[ Voor 6% gewijzigd door RobIII op 14-01-2011 14:29 ]

[DUX]

RobIII was me te snel af

spoiler:

Misschien kijk ik er overheen, maar volgens mij heb je geen HTML-object in je code wat het id "name" heeft? Dan kan er ook niet naar toe geschreven worden, nee...

[ Voor 11% gewijzigd door DUX op 14-01-2011 14:32 ]

[bart1074]

Dankjulliewel. Heel handig die functie!