• Save
Social Network Integration
Upcoming SlideShare
Loading in...5
×
 

Social Network Integration

on

  • 1,867 views

This presentation discusses the importance of social networking services' integration to websites and sample coding using twitter widget and facebook sdk.

This presentation discusses the importance of social networking services' integration to websites and sample coding using twitter widget and facebook sdk.

Statistics

Views

Total Views
1,867
Views on SlideShare
1,856
Embed Views
11

Actions

Likes
1
Downloads
0
Comments
3

3 Embeds 11

http://www.codeofaninja.com 5
http://codeofaninja.blogspot.com 4
http://blog.eacomm.com 2

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • dfdfdffd
    Are you sure you want to
    Your message goes here
    Processing…
  • dsfdsf
    Are you sure you want to
    Your message goes here
    Processing…
  • sssssssssased
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Special shows/events shown on their home page can be shared to facebook or twitter

Social Network Integration Social Network Integration Presentation Transcript

  • Social Network Integration
    By John Michael Vincent D. Dalisay
    Jr. Software Developer
  • Contents
    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
  • social networking service
    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)
  • How important/useful is this?
    See video: Facebook and Websites.mp4
    (Video from SmartBCN)
  • Sample Applications
    http://www.eforuli.com - Online ePUB e-Book Storage. Store, Download, Read and Share your E-Books.
    DO-CMS websites:
    http://www.calleza.com/
  • http://www.eforuli.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.
  • http://www.eforuli.com
  • http://www.eforuli.com
    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.
  • http://www.eforuli.com
  • http://www.calleza.com/
    Special shows/events shown on their home page can be shared to facebook or twitter
  • http://www.calleza.com/
  • http://www.calleza.com/
    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.
  • http://www.calleza.com/ (site album)
  • http://www.calleza.com/ (FB album)
  • http://www.calleza.com/
    We can also get the events created from their facebook page and post it on their website.
  • Coding
    Sharing via FB.ui and Twitter Widget
    Using Facebook PHP SDK
  • Sharing via FB.ui and Twitter Widget
    We will code about how to share site contents to user’s facebook wall and twitter account.
  • JavaScript with FB.ui
    Create an app for your site: https://developers.facebook.com/setup
    Your App ID and App Secret ID will be generated.
  • JavaScript with FB.ui
    Include the following in your php document
    <div id="fb-root"></div>
    <script src="http://connect.facebook.net/en_US/all.js"></script>
  • JavaScript with FB.ui
    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>
  • JavaScript with FB.ui
    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.
  • JavaScript with FB.ui
    Place the following underFB.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 + '!'
    },
    );
  • JavaScript with FB.ui
    Place the following insideFB.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.');
    }
    }
  • JavaScript with FB.ui
    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' />
  • That was the code used here…
  • JavaScript with Twitter Widget
    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>
  • JavaScript with Twitter Widget
    Create your function
    <script type='text/javascript'>
    function share_on_twitter( event_title, event_date ){
    }
    </script>
  • JavaScript with Twitter Widget
    Inside your function, you should have code something like this:
    varurl = "http://www.calleza.com/";
    vartext = "In Calleza Grill: " + event_title + " on " + event_date + "!";
    window.open("http://twitter.com/share?count=horizontal&original_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');
  • JavaScript with Twitter Widget
    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' />
  • And that was the code used here…
  • Using Facebook PHP SDK
    We will retrieve photo albums from a facebook page and display it on a website.
  • Using Facebook PHP SDK
    Download PHP SDK here: https://github.com/facebook/php-sdk/
    Store the SDK in your web directory
  • Using Facebook PHP SDK
    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
  • Using Facebook PHP SDK
    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);
  • Using Facebook PHP SDK
    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 "<imgsrc='$album_cover' border='1'>";
    echo "</a><br />";
    echo $values['name'];
    echo "</div>";
    }
  • And that was the code used in here…
  • Using Facebook PHP SDK
    There are so many other data that we can query from facebook.
    For more info, visit https://developers.facebook.com/docs/reference/api/
  • References
    Wikipedia
    https://developers.facebook.com
    http://www.smartbcn.com/
  • The End