Trying to scrape information from Facepile Facebook Social Plugin (php)

[shakethefloor]

As the title and description say, I am trying to use Facebooks Social Plugin FacePile which displays the name, profile pic and a link to the profile of people who like it, but its in a standard facebook box and I just want to be able to manage the contents how I want.

I did some searching and I saw a few people saying not to use regexp but it was the solution that I understood the most.

I made a page using <start>, <part1>, <part2> and <end> tags, then used those tags to split up a sentence, then used a regexp to sort it into variables and call it where I wanted it. Thats exactly the functionality of what I need, but from facebook.

At the moment I have this:
(The file_get_contents is a realllyy long link to whats embedded on my page. They give me a <div> to add and it adds Facepile. I open the 'frame' in a new tab on firefox and got this link.

$html = file_get_contents("http://www.facebook.com/plugins/facepile.php?action=like&channel=https%3A%2F%2Fs-static.ak.fbcdn.net%2Fconnect%2Fxd_proxy.php
%3Fversion%3D3%23cb%3Dff3e21a27ec6d8%26origin%3Dhttp%253A%252F%252Fmywebsite.co.uk
%252Ff18c1e5327085e6%26relation%3Dparent.parent%26transport%3Dpostmessage&colorscheme=light&extended_social_context=false&href=http%3A%2F%2F
mywebsite.co.uk&locale=en_GB&login_text=&max_rows=1&sdk=joey&size=large&tense=past&width=640");
preg_match_all(
    '/<a class="link" title="(.*?)" href="(.*?)" data-jsid="anchor" target="_blank"><img class="uiProfilePhoto uiProfilePhotoLarge img" src="(.*?)"/s',
    $html,
    $posts, // will contain the blog posts
    PREG_SET_ORDER // formats data into an array of posts
);

foreach ($posts as $post) {
    $p1 = $post[1];
    $p2 = $post[2];
    $p3 = $post[3];

    echo 'Name: '.$p1.'<br />URL: '.$p2.'<br />Image Link: '.$p3.'<br /><br /><br />';
}

The URL in the $html var is the link to the frame that facebook includes on my page if I add facepile to it. it shows all your friends who have liked the specified link in the URL.

This is the original HTML that I am trying to search for and grab

<a class="link" title="FULL FACEBOOK NAME" href="http://www.facebook.com/PROFILEURL" data-jsid="anchor" target="_blank"><img class="uiProfilePhoto uiProfilePhotoLarge img" src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/NUMBERS_NUMBERS_NUMBERS.jpg" alt="" data-jsid="img" /></a>

Could anyone possibly point me in the right direction as im appalling with php :)

[rookwood101]

Could you give an example of some facepile output because I have no idea what it will actually give.

[shakethefloor]

They give me this to put into my page

<div id="fb-root"></div>
<script>(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_GB/all.js#xfbml=1&appId=APPID";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

and

<div class="fb-facepile" data-href="http://mywebsite.co.uk" data-size="large" data-max-rows="1" data-width="300"></div>

and on my page i just get the div above ^
and if I right click the div i can view frame source and it has this:

//alot of css

<script type="text/javascript">onloadhooks=[];onloadRegister_DEPRECATED=function(a){onloadhooks.push(a);};onafterloadhooks=[];onafterloadRegister_DEPRECATED=function(a){onafterloadhooks.push(a);};function require(){return function(){};}(function(){var a={loaded:1,complete:1},b=true,c=function(){};function d(){if(document.readyState in a){document.detachEvent("onreadystatechange",d);c('t_domcontent');}}function e(){try{f();}catch(h){}}if(window.CavalryLogger){c=function(h){CavalryLogger.getInstance().setTimeStamp(h);};}else if(window._cavalry){c=function(h){_cavalry.log(h);};}else b=false;function f(){c('t_prehooks');g(onloadhooks);c('t_hooks');c('t_layout');c('t_onload');g(onafterloadhooks);}function g(h){for(var i=0;i<h.length;i++)h[i]();}window.onload=function(){e();};if(!b)return;if(window.addEventListener){window.addEventListener('DOMContentLoaded',function(){c('t_domcontent');},false);}else if(document.attachEvent)document.attachEvent("onreadystatechange",d);})();
</script>
</head>
<body class="plugin ff4 win Locale_en_GB"><input type="hidden" autocomplete="off" id="post_form_id" name="post_form_id" value="4b3b2f120a90624f3e9114669b5eb3ca" />
<div id="FB_HiddenContainer" style="position:absolute; top:-10000px; width:0px; height:0px;">
</div>
<div class="pluginSkinLight">
<div>
<div style="padding-left: 19px;" class="uiIconText pluginFontLarge">
<i class="img sp_favicon sx_favicon_fav" style="top: 0px;"></i>
<a href="https://www.facebook.com/PROFILEURL" target="_blank">Users Name</a>
and <a href="https://www.facebook.com/PROFILEURL" target="_blank">Users Name</a> like this.</div>
<div class="uiFacepile mts uiFacepileLarge"><ul class="uiList uiListHorizontal clearfix">
<li class="uiFacepileItem uiListItem  uiListHorizontalItemBorder uiListHorizontalItem">
<a class="link" title="Users Name" href="https://www.facebook.com/profileid" data-jsid="anchor" target="_blank">
<img class="uiProfilePhoto uiProfilePhotoLarge img" src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-snc4/pic.jpg" alt="" data-jsid="img" /></a>
</li><li class="uiFacepileItem uiListItem  uiListHorizontalItemBorder uiListHorizontalItem">
<a class="link" title="Users name" href="https://www.facebook.com/profileid" data-jsid="anchor" target="_blank">
<img class="uiProfilePhoto uiProfilePhotoLarge img" src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-snc4/pic.jpg" alt="" data-jsid="img" />
</a>
</li>
</ul>
</div>
</div>
</div>
<script>function envFlush(a){function b(c){for(var d in a)c[d]=a[d];}if(window.requireLazy){requireLazy(['Env'],b);}else{Env=window.Env||{};b(Env);}}
envFlush({"post_form_id":"4b3b2f120a90624f3e9114669b5eb3ca","fb_dtsg":"AQCI_q-M","ajaxpipe_token":"AXgWz9diRIgUbcCI","lhsh":"cAQHXqWfy"});
</script>

<script>
require("invokeCallbacks")(["__y(\"XDUnverifiedChannel\",[],{\"channel\":\"https:\\\/\\\/s-static.ak.fbcdn.net\\\/connect\\\/xd_proxy.php?version=3#cb=f3a10d098332eba&origin=http\\u00253A\\u00252F\\u00252Fmywebsite.co.uk\\u00252Ff2d1a8f9e8d84d4&relation=parent.parent&transport=postmessage\"});\n"])
</script>

I just want the <a><img /></a> with the users name, profile link and profile pic

[wutanggrenad]

XFBML still uses javascript to get the information, therefore the page is fully loaded and sent to the browser before PHP even sees there is any information.

You'll have to use javascript if you want to get the guts out of it. If you just want to change how it looks, you may be able to do that with CSS !important

[shakethefloor]

[QUOTE=wutanggrenad;35092051]XFBML still uses javascript to get the information, therefore the page is fully loaded and sent to the browser before PHP even sees there is any information.

You'll have to use javascript if you want to get the guts out of it. If you just want to change how it looks, you may be able to do that with CSS !important[/QUOTE]

I'm trying to include the images into a 'tag-cloud' where they all float around. I need them to be styled like so:

<div id="tags">
<ul>
<li><a href="http://www.facebook.com/profileurl" title="users name" target="_blank"><img src="pic.jpg" /></a></li>
<li><a href="http://www.facebook.com/profileurl" title="users name" target="_blank"><img src="pic.jpg" /></a></li>
<li><a href="http://www.facebook.com/profileurl" title="users name" target="_blank"><img src="pic.jpg" /></a></li>
<li><a href="http://www.facebook.com/profileurl" title="users name" target="_blank"><img src="pic.jpg" /></a></li>
</ul>
</div>

[wutanggrenad]

So does the information load properly?

Are the names and pictures showing up at all?

[shakethefloor]

The information that facebook is giving me on my page with the actual facepile app is loading the pictures and videos but my scraper page isnt getting anything at all. It worked with my test scrape but its not getting anything, probably because its already loaded like you said

[wutanggrenad]

Your regular expression is not so good, it may work in testing but fail in reality.

Things like (.*?) are a little dangerous as it just picks up anything. Try a basic reg ex and see if it works, if it does than PHP can be used.

Try this,

/class\=\"uiProfilePhoto\"/

[camacazie638]

I do not know exactly what format of requests you are having to send or the blocks of information you are recieving back; as I have yet to attempt this myself. This might be a long-shot, but I would use [url=http://www.w3schools.com/ajax/ajax_xmlhttprequest_send.asp]xmlhttprequest[/url] to send the same request to connect.facebook.net and then write the response text inside a <div></div>. Once the <div></div> is filled I would have a script pickout the information I believe to be useful to then put into a format of my own choosing; profile images, links, posts, etc. etc. Again, possibley a long-shot, but that is how I would personally attempt this.