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