You are on page 1of 39

By John Michael Vincent D.

Dalisay
Jr. Software Developer
EACOMM CORPORATION
 Social Networking Service
 How important is SNS
◦ Video
 Sample Applications
◦ Descriptions and Screenshots
 Coding
◦ JavaScript with FB.ui and Twitter Widget
◦ Using Facebook PHP SDK
 A social networking service is an online
service, platform, or site that focuses on
building and reflecting of social networks or
social relations among people, e.g., who
share interests and/or activities.
 Most of them are web based. E.g. (facebook,
twitter)
 See video:
◦ http://www.youtube.com/watch?v=GSlN1cAYQxA
 http://www.eforuli.com - Online ePUB e-Book
Storage. Store, Download, Read and Share
your E-Books.
 DO-CMS websites:
◦ http://www.calleza.com/
 The user can share an ebook to facebook or
twitter with his review and rating. The site
eforuli.com will be known to his facebook
friends or twitter followers.
 The user can share list of links of ebooks to
facebook. So it is possible for his facebook
friends to view lots of ebook profile at
eforuli.com. His friends could also be
encouraged to sign up for an eforuli account.
 Special shows/events shown on their home
page can be shared to facebook or twitter
 Calleza.com facebook page photos are
synced to their website photos. We save
server disk space since the photos are stored
in facebook and not in our server.
 We can also get the events created from their
facebook page and post it on their website.
 Sharing via FB.ui and Twitter Widget
 Using Facebook PHP SDK
 We will code about how to share site contents
to user’s facebook wall and twitter account.
 Create an app for your site:
https://developers.facebook.com/setup
 Your App ID and App Secret ID will be
generated.
Include the following in your php document
<div id="fb-root"></div>
<script
src="http://connect.facebook.net/en_US/all.js"></
script>
Create your function. Include variables for data to
be displayed.
<script type='text/javascript'>

function post_to_wall( event_id, event_title,


event_date){

</script>
 Place the following inside your function.
FB.init({
appId:'178864032154187',
cookie:true,
status:true,
xfbml:true
});
 appId – is the App ID generated on App Creation
earlier.
 Place the following under FB.init code. This is where we specify the
default contents of the post
FB.ui(
{
method: 'feed',
name: event_title + ' on ' + event_date,
link: 'http://www.calleza.com/',
picture: 'http://www.calleza.com/event_image_fb.php?id=' +
event_id,
caption: 'Events @ Calleza Grill',
description: 'Calleza Grill is Antipolo’s premiere live music venue.
This bar and restaurant has evolved into one of the best live music
venues in the area. Calleza is the ideal venue for your night out.',
message: 'Hi friends! Calleza Grill will be having a great show on ' +
event_date + '!'
},
);
 Place the following inside FB.ui function if you
want the user prompted with a publishing
confirmation.

function(response) {
if (response && response.post_id) {
alert('Post was published.');
}else{
//alert('Post was not published.');
}
}
 Given the values to be processed, the button
code would be something like this:
<input type='button'
value='Share on Facebook‘
class='share-buttons'
onClick='post_to_wall( <?php echo
$event_id; ?>, "<?php echo $event_title; ?>",
"<?php echo $start_date; ?>" )'
id='fbbtn' />
 We’ll proceed with the codes on sharing via
twitter.
 Unlike facebook, you don’t have to create an
app in twitter, just include the widget:
<script
src="http://platform.twitter.com/widgets.js"
type="text/javascript">
</script>
Create your function
<script type='text/javascript'>
function share_on_twitter( event_title,
event_date ){

}
</script>
 Inside your function, you should have code something like
this:

var url = "http://www.calleza.com/";


var text = "In Calleza Grill: " + event_title + " on " +
event_date + "!";

window.open("http://twitter.com/share?count=horizontal&origi
nal_referer=http://www.calleza.com/&text=" + text +
"&url=" +
url,'name','height=300,width=500,toolbar=no,directories=no
,status=no,menubar=no,scrollbars=no,resizable=no,top=20,
left=20');
 Given the values to be processed, the button
code would be something like this:

<input type='button' value='Share on Twitter'


class='share-buttons'
onClick='share_on_twitter( "<?php echo
$event_title; ?>", "<?php echo $start_date;
?>" )' id='twitterbtn' />
 We will retrieve photo albums from a
facebook page and display it on a website.
 Download PHP SDK here:
https://github.com/facebook/php-sdk/
 Store the SDK in your web directory
 Include the following code in your php document:

include 'calleza/FQL/fb-sdk/src/facebook.php';
$facebook = new Facebook(array(
'appId' => '178864032154187',
'secret' =>
'910dfaf91735b2c3422e0b0756a32902',
'cookie' => true, // enable optional cookie support
));

 facebook.php – included in the SDK


 appId and secret – generated when we created an app
earlier
 Next is the following code. Facebook query language (FQL) is just like
SQL. The following queries the albums of the facebook page.

echo "<p style='font-weight: bold;'>Calleza Grill Photo Albums</p>";

$fql = "SELECT aid, cover_pid, name FROM album WHERE


owner=217052582900 and aid != '217052582900_225185' and aid !=
'217052582900_131309'";

$param = array(
'method' => 'fql.query',
'query' => $fql,
'callback' => ''
);

$fqlResult = $facebook->api($param);
 Next, we’re gonna loop throught the albums and create another query to get the album cover image.
foreach( $fqlResult as $keys => $values ){

//to get album cover


$fql2 = "select src from photo where pid = '" . $values['cover_pid'] . "'";
$param2 = array(
'method' => 'fql.query',
'query' => $fql2,
'callback' => ''
);
$fqlResult2 = $facebook->api($param2);
foreach( $fqlResult2 as $keys2 => $values2){
$album_cover = $values2['src'];
}
echo "<div style='padding: 10px; width: 150px; height: 170px; float: left;'>";
echo "<a href='http://www.calleza.com/10/Photo-Gallery/?action=list_pics&aid=" . $values['aid'] .
"&name=" . $values['name'] . "'>";
echo "<img src='$album_cover' border='1'>";
echo "</a><br />";
echo $values['name'];
echo "</div>";
}
 There are so many other data that we can
query from facebook.
 For more info, visit
https://developers.facebook.com/docs/refer
ence/api/
 Wikipedia
 https://developers.facebook.com
 http://www.smartbcn.com/
EACOMM Corporation
11th Floor CyberOne Bldg
Eastwood Cyberpark
Bagumbayan, Quezon City
PHILIPPINES 1110
Tel. +63 2 4382986
Fax. +63 2 912 6745
Email. info@eacomm.com
Url. http://www.eacomm.com

You might also like