1801
Live Get Started !

Facebook and Twitter Wall PHP Script



Previous Next View All

View DemoDownload

Social Media has formed an integral part of marketing in the ever mobile digital world. Using the Social Media API access provided by the likes of Twitter and Facebook it is possible to pull content and deliver it socially from a range of sources.

One of our recent projects has involved the exploration of the Twitter and Facebook API's - to test the limits of what they can do and how they can be modified. Both social platforms provide documentation to developers in order to use the API's but there was limited resource to explain how to take the API's to the next level and represent them in different formats.

We've been able to custom develop scripts that handle the API's using PHP that allow you to customise the look and delivery of Social Media feeds in a simple to use way.

As we found resources to be limited we thought it would be beneficial to publish a tutorial on how to do this. Below are full instructions and a link to demo and download files so you can get up and running straight away.

This beginner tutorial will run through how to implement and create your own Facebook and Twitter wall script using the twitter API and Facebook Developer Graph API

In this tutorial we will start to understand social media APIs, arrays, variables and loops, we will be using PHP so you will be required to be running PHP on your server for this to run.

Step 1

First you will need to setup your folder structure and blank PHP files:


css/style.css
images/
index.php
config.php (configuration file to control both scripts)
facebook.php (facebook script)
twitter.php (twitter script)

File Structure

Step 2

The next step will be opening are index.php file and attaching our index, Facebook and Twitter pages. This can be achieved by using simple PHP including tags.
Below is the standard file model:





Social Wall Feeds - Big Wave Media




After we add our PHP including tags and style sheet files it will look like this:



Social Wall Feeds - Big Wave Media




Step 3

We will then need to open the configuration file and add a few variables we will use later on in our scripts; this configuration file will control both scripts:

Open config.php and past this bellow code.

// How many wall post do you want?
$PostCount = 1;

// Box Title
$CompanyName = "Big Wave Media";

// Twitter Username
$TwitterUserName = "bigwavemedia";

// Facebook page name
$UserName = "bigwavemedia";

// Like Button Url
$FacebookLikeButtonURL = "http://www.bigwavemedia.co.uk";

// Facebook Access Token and AppId, this can stay the same but if you want to create your own look bellow
// http://blog.awpny.com/kaiawpny/2011/how-to-facebook-access-token.html
$Key = "292423037531408|0cc972ba47bcdafed97f3d01a2a3bd77";
$AppID = "292423037531408"
?>

Step 4

Next you will need to open your facebook.php, any sections that need explaining will be php commented out.

Please paste all bellow into your facebook.php file.

// Connect the configuration file

    // Creating Function (makeClickableLinks) to make text links linkable, we will attach it to the wall message soon.
    function makeClickableLinks($text)
    {
    $text = html_entity_decode($text);
    $text = " ".$text;
    $text = eregi_replace('(((f|ht){1}tp://)[[email protected]:%_\+.?#?&//=]+)',
    '\\1', $text);
    $text = eregi_replace('(((f|ht){1}tps://)[[email protected]:%_\+.?#?&//=]+)',
    '\\1', $text);
    $text = eregi_replace('([[:space:]()[{}])(www.[[email protected]:%_\+.?#?&//=]+)',
    '\\1\\2', $text);
    $text = eregi_replace('([_\.0-9a-z-][email protected]([0-9a-z][0-9a-z-]+\.)+[a-z]{2,3})',
    '\\1', $text);
    return $text;
    }

    //PHP gets contents of the Facebook API using are page name and access token we specified earlier.
    $facebookpage = file_get_contents('https://graph.facebook.com/'.$UserName.'/feed?access_token='.$Key.'&limit='.$PostCount.'');

    // Looks at the facebook page with Json
    $json = json_decode($facebookpage);

    // Start Looping through data.
    // Example how it looks https://graph.facebook.com/bigwavemedia/feed?access_token=362033320533249|aTsWraWTTNai9k_gBh2Lmcx7khM
    // As you can see you see the data array in this url we are pulling data out of that.

    foreach ($json->data as $wall) :

    // We are going inside data then message.
    $pagepost = $wall->message;

    ?>

Step 5

Next you will need to open your twitter.php. A lot of the theory above is going to be used on the twitter API and this can be used for many other APIS.

Please paste all bellow into your twitter.php file.


    //PHP gets contents of the Twitter API using are username we specified earlier.

    $twitterpage = file_get_contents('https://api.twitter.com/1/statuses/user_timeline.json?screen_name='.$TwitterUserName.'');
    $json = json_decode($twitterpage);

    $i = 1;

    if (!empty($json)) :
    foreach ($json as $tweet) :

    // start counting for number of tweets.
    if($i > $PostCount) break;
    if($i > 1);
    if($i == $max || $i == count($json));

    $datetime = $tweet->created_at;
    $tweet_text = $tweet->text;
    $tweet_image = $tweet->user->profile_image_url;
    $created_at = substr($tweet->created_at,0, 11);

    //add one each time
    $i++;

    ?>

  • // The Regular Expression filter
    $reg_exUrl = "/(http|https|ftp|ftps)\:\/\/[a-zA-Z0-9\-\.]+\.[a-zA-Z]{2,3}(\/\S*)?/";

    // Check if there is a url in the text
    if(preg_match($reg_exUrl, $tweet_text, $url)) {

    // make the urls hyper links
    echo '

    '.preg_replace($reg_exUrl, ''.$url[0].'', $tweet_text).'

    ';

    } else {

    // if no urls in the text just return the text
    echo '

    '.$tweet_text.'

    ';

    }
    ?>


Step 6

Finally the last step is to upload these 4 images to your images directory and to upload these styles to your style.css.

Save the images into your images directory or download the zip and use from there
http://www.bigwavemedia.co.uk/tutorials/22-08-2012/images/bg_blue.png
http://www.bigwavemedia.co.uk/tutorials/22-08-2012/images/bg_pink.png
http://www.bigwavemedia.co.uk/tutorials/22-08-2012/images/facebook_icon.png
http://www.bigwavemedia.co.uk/tutorials/22-08-2012/images/twitter_icon.png


.FBwrapper h2 {
color:white;
font-size:18px;
font-weight:100;
margin:0;
padding:0;
}
.FBwrapper p {
color:#FFFFFF;
font-size:12px;
line-height:21px;
}
.clear {
clear:both;
}
.FBwrapper ul {
margin:0;
padding:0;
}
.FBwrapper ul li {
list-style-type:none;
padding-bottom:10px;
border-top:#FFF 1px dashed;
}
.FBwrapper ul li:first-child {
border-top:none;
}
.FBwrapper {
position:relative;
width:370px;
background-image:url(../images/bg_pink.png);
background-repeat:repeat-y;
border-radius:7px;
margin-top:20px;
margin-left:auto;
font-family: Tahoma, Geneva, sans-serif;
margin-right:auto;
}
.FBwrapper a {
color:#FFF;
}
.FBwrapper .rightFB {
float:right;
width:253px;
margin-top:20px;
margin-left:10px;
margin-bottom:20px;
margin-right:20px;
}
.leftIcon {
z-index:2;
background-image:url(../images/facebook_icon.png);
margin-top:15px;
width:50px;
height:49px;
position:absolute;
left: 15px;
top: 2px;
}
.Twrapper h2 {
color:white;
font-size:18px;
font-weight:100;
margin:0;
padding:0;
}
.Twrapper p {
color:#FFFFFF;
font-size:12px;
line-height:21px;
}
.clear {
clear:both;
}
.Twrapper ul {
margin:0;
padding:0;
}
.Twrapper ul li {
list-style-type:none;
padding-bottom:10px;
border-top:#FFF 1px dashed;
}
.Twrapper ul li:first-child {
border-top:none;
}
.Twrapper {
position:relative;
width:370px;
background-image:url(../images/bg_blue.png);
background-repeat:repeat-y;
border-radius:7px;
margin-top:20px;
margin-left:auto;
font-family: Tahoma, Geneva, sans-serif;
margin-right:auto;
}
.Twrapper a {
color:#FFF;
}
.Twrapper .rightT {
float:right;
width:253px;
margin-top:20px;
margin-left:10px;
margin-bottom:20px;
margin-right:20px;
}
.Twrapper .leftIcon {
z-index:2;
background-image:url(../images/twitter_icon.png);
margin-top:15px;
width:50px;
height:49px;
position:absolute;
left: 15px;
top: 2px;
}


Download


Previous Next View All Get a Quote

Tags

Image of a Apple mouse

There's a lot of knowledge within
Bigwave's walls

Call us and benefit on 01392 492380, 01803 266380 or 01752 668813 or submit a brief online for a free no obligation quote.

Request a quote