Page 1 of 1

facebook php sdk result from feed

Posted: Wed May 09, 2012 6:57 pm
by Tazman74
Hi there,

I have made a facebook wall widget for on my own site using the php skd from facebook.
everything is working fine, except.....

the links in the message are no links anymore

if I take one result as example :
[message] => Why not use modern tech to keep kids playing.
Shilo Shiv Suleman: Using tech to enable dreaming #TED :
http://on.ted.com/BUjv
how can i turn this http://on.ted.com/BUjv into <a href="http://on.ted.com/BUjv">http://on.ted.com/BUjv</a>

the only thing that is for sure is that there is alway's a http|https in front of it, and it end by the first space.

is there a way that i can select that and use str_replace ore something ?

by the way,
if anybody is interested in the complete code, say it and i will post it here.

Re: facebook php sdk result from feed

Posted: Wed May 09, 2012 7:56 pm
by Tazman74
great, this website makes the links click-able,
I think i already found the way,
i will come back on this tomorrow,
it's far past bedtime now.

Re: facebook php sdk result from feed

Posted: Wed May 09, 2012 8:21 pm
by Tazman74

Re: facebook php sdk result from feed

Posted: Thu May 10, 2012 6:35 am
by Tazman74
Well this was working fine, until i try to do it whit the facebook feed.
The page just doesn't load anymore.

so i gonna try to do the same after the page loads, but then with Javascript.

Re: facebook php sdk result from feed

Posted: Thu May 10, 2012 7:01 am
by Tazman74
anyhow, i will post my code here,
maybe somebody knows why this isn't working.
I rather do it whit PHP then Javascript
for the search engine spiders.

my code :

first you need to download the facebook default sdk files from
https://github.com/facebook/php-sdk
and upload theme

now at the top off the page i have the following code

Code: Select all

include '_includes/facebook.php';
$facebook = new Facebook(array(
  'appId'  => '#########',
  'secret' => '###################',
  'cookie' => true
));
$FBuser = 'patrickvanthiel';
$user = $facebook->api('/'.$FBuser);
$feed = $facebook->api('/'.$FBuser.'/feed');


Don't forget to fill in your own appId and secret here

next, at the top off the body i have the fb-root for a small like-button

Code: Select all

<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: '196802733664214', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol +
'//connect.facebook.net/nl_NL/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
and then on the place where you want the facebook wall to appear you place this code :

Code: Select all

<div id="facebookHeader"><span class="facebookTitle">Vind ons leuk op <h1>facebook</h1></span></div>
<fb:like class="fb-like" width="330" data-href="http://www.facebook.com/patrickvanthiel" data-show-faces="false" ></fb:like>
<div id="wall" class="facebookWall">
<?php
for ($i=0;$i<3;$i++) {
echo '<li>';
	echo '<img src="'.$user['picture'].'" class="avatar" width="50px" height="50px" />';
	echo '<div class="status">';
		echo '<h2><a href="http://www.facebook.com/profile.php?id='.$user['id'].'" target="_blank">'.$feed['data'][$i]['from']['name'].'</a></h2>';
//		$message = $feed['data'][$i]['message'];
//		$newmessage = '';
//		$messageContents = preg_split("/[\s]+/",$string);
//		for ($i=0;$i<count($messageContents);$i++) {
//			$messageContentsParts = preg_split('/[:]+/',$messageContents[$i]);
//			if($messageContentsParts[0]=="http"|$messageContentsParts[0]=="https") {
//				$messageContents[$i]='<a href="'.$messageContents[$i].'">'.$messageContents[$i].'</a>';
//			}
//			$newmessage = $newmessage.$messageContents[$i].' ';
//		}
		echo '<p class="message">'.$feed['data'][$i]['message'].'</p>';
		if($feed['data'][$i]['type']=="link") {
			echo '<div class="attachment">';
				if(!empty($feed['data'][$i]['picture'])) {
					echo '<img class="picture" src="'.$feed['data'][$i]['picture'].'" />';
				}
				echo '<div class="attachment-data">';
					echo '<p class="name"><a href="'.$feed['data'][$i]['link'].'" target="_self">'.$feed['data'][$i]['name'].'</a></p>';
					echo '<p class="caption">'.$feed['data'][$i]['caption'].'</p>';
					echo '<p class="description">'.$feed['data'][$i]['description'].'</p>';
				echo '</div>';
			echo '</div>';
		} // end if($feed['data'][$i]['type']=="link") {
		if($feed['data'][$i]['type']=="photo") {
			echo '<p><a href="'.$feed['data'][$i]['link'].'" titel="'.$feed['data'][$i]['message'].'" target="_blank" border="none"><img class="picture" src="'.$feed['data'][$i]['picture'].'"/></a></p>';
		}
		if($feed['data'][$i]['type']=="video") {
			echo '<div id="'.$feed['data'][$i]['id'].'" class="video">';
			if(!empty($feed['data'][$i]['properties'])) {
				echo '<div class="videoDescription" onclick="embedVideo(\''.$feed['data'][$i]['source'].'\',\''.$feed['data'][$i]['id'].'\',\'mp4\')">';
			} else {
				echo '<div class="videoDescription" onclick="embedVideo(\''.$feed['data'][$i]['source'].'\',\''.$feed['data'][$i]['id'].'\',\'youtube\')">';
			}
			echo '<img class="picture" src="'.$feed['data'][$i]['picture'].'" align="left" />';
			echo '<span class="videoName">'.$feed['data'][$i]['name'].'</span><br/>';
			echo '<span class="videoDescription">'.$feed['data'][$i]['description'].'</span>';
			echo '</div>';
			echo '</div>';
		}
		echo '</div>';
		echo '<p class="meta">';
		$thisDate = $feed['data'][$i]['created_time'];
	echo date('j-m-\'Y G:i',mktime($thisDate));
	echo '</p>';
	echo '</li>';
		}
?>
</div><!-- end <div id="wall" class="facebookWall"> -->


in the for loop you can set the number off posts you wane display
as you see there is a part taken out,
that is the part i still cant get working
I given everything a classname so you can style is with css
I have a javescript code for 2 way's i load video's in the wall.
this is because video's from youtube are loaded as a *.swf
and video's from facebook are loaded as *.mp4

here's the Javascript code i use to load the video's

Code: Select all

function embedVideo(url,id,car) {
	OldHtml = document.getElementById(id).innerHTML;
	document.getElementById(id).style.height="190px";
	if(car=="youtube") {
		document.getElementById(id).innerHTML='<div class="videoCloseButton" onclick="closeVideo(\''+id+'\')"></div><embed id="'+id+'" width="300" height="170" allowfullscreen="true" quality="high" src="'+url+'" type="application/x-shockwave-flash">'
	}
	if(car=="mp4") {
		document.getElementById(id).innerHTML='<div class="videoCloseButton" onclick="closeVideo(\''+id+'\')"></div><embed width="300" height="170" name="plugin" src="'+url+'" type="video/mp4">'
	}
}
function closeVideo(id) {
	document.getElementById(id).style.height="120px";
	document.getElementById(id).innerHTML=OldHtml;
}
and to give you a head start for the styling
here my style sheet :

Code: Select all

#facebookHeader {
	position:absolute;
	top:180px;
	left:40px;
	color:#1482bb;
	font-size:1.4em;
	text-shadow:2px 2px 5px #666;
	font-style:oblique;
}
#facebookHeader h1 {
	margin:-10px 0;
	padding:0;
	font-size:2.4em;
	color:#3B5998;
	font-family:Arial, Helvetica, sans-serif;
	text-shadow:2px 2px 5px #666;
	font-style:normal;
}
#wall {
	position:absolute;
	top:295px;
	left:40px;
	width:400px;
	height:520px;
	opacity:1;
	color:#666666;
}

#page{
	width:550px;
	margin: 100px auto 100px;
}
.fb-like {
	position:absolute;
	top:245px;
	left:40px;
}
/* The wall post items */
.facebookWall ul {
	margin:0;
	padding:0;
}
.facebookWall li{
	background: url('../_images/divider.png') no-repeat center bottom;
	list-style: none;
	margin:0;
	padding:0;
	overflow: hidden;
	padding-top: 5px;
	position: relative;
	min-height:140px;
}

/* The user/page avatar */

.facebookWall li img.avatar{
	float:left;
	margin:0 8px 8px;
}
.facebookWall img {
	-moz-box-shadow:    1px 2px 18px -5px #000;
	-webkit-box-shadow: 1px 2px 18px -5px #000;
	box-shadow:         1px 2px 18px -5px #000;
}
/* The user/page name */

.facebookWall h2{
	margin:0;
	font-size:1.3em;
	font-weight:normal;
	margin: 0px;
	text-shadow:2px 2px 5px #666;
	font-style:oblique;
}
.facebookWall p.message {
	margin:0 0 5px 0;
	font-size:0.75em;
	text-shadow:1px 1px 2px #999;
}

/* The .status div container */

.facebookWall .status{
	width:290px;
	padding-left:10px;
}

/* Link share attachment */

.facebookWall .attachment{
	border-left: 1px solid #C4C4C4;
	font-size: 12px;
	margin-top: 14px;
	overflow: hidden;
	padding-left: 10px;
}

.facebookWall .attachment-data{
	display:table-cell;
	vertical-align:top;
}

.facebookWall img.picture{
	margin-right: 10px;
}


/* Posted date/time, number of likes and comments */

.facebookWall p.meta{
	margin:0;
	position:absolute;
	right:100px;
	bottom:0px;
	color:#999;
	font-size:10px;
	height:16px;
}

/* Generic demo page styles */

.facebookWall a, .facebookWall a:visited {
	text-decoration:none;
	outline:none;
	color:#1482bb;
}

a:hover{
	text-decoration:underline;
}

.videoName {
	color:#1482bb;
	font-size:0.7em;
	line-height:1.7em;
}
.videoName:hover {
	text-decoration:underline;
}
img.picture {
	opacity:0.8;
}
img.picture:hover {
	opacity:1;
}
span.videoDescription {
	font-size:0.6em;
}
span.videoDescription:hover {
	text-decoration:underline;
}
.video {
	position:relative;
	width:300px;
	height:120px;
	cursor:pointer;
}
.videoCloseButton {
	position:absolute;
	top:-15px;
	left:280px;
	width:15px;
	height:15px;
	background-image:url(../_images/closeVideoButton.png);
	cursor:pointer;
}
<!-- end facebook likebox styling -->


so this is a complete facebook wall widget made with the facebook php sdk

hope you like it

Re: facebook php sdk result from feed

Posted: Thu May 10, 2012 8:20 am
by Tazman74
and so we have a Java function for the facebook links :

Code: Select all

function makeFacebookLinks() {
	var FBmessages = document.getElementsByClassName('message');
	for(i=0;i<FBmessages.length;i++) {
		var newFBmess='';
		FBmesContent = FBmessages[i].innerHTML.split(" ");
		for(j=0;j<FBmesContent.length;j++) {
			var pos=FBmesContent[j].indexOf('http');
			FBmesConParts = FBmesContent[j].split(":");
			for(k=0;k<FBmesConParts.length;k++) {
				var pos=FBmesConParts[k].toLowerCase().indexOf('http');
				if(pos>=0) {
					FBmesContent[j] = '<a href="'+FBmesContent[j]+'">'+FBmesContent[j]+'</a>';
				}
			}
			newFBmess = newFBmess+FBmesContent[j]+' ';
		}
		FBmessages[i].innerHTML=newFBmess;
	}
}
but still, as anyone gets this going in PHP,
I really like to hear it.