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

1. Social Network Integration By John Michael Vincent D. Dalisay Jr. Software Developer

2. 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

3. 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)

4. How important/useful is this? See video: http://www.youtube.com/watch?v=GSlN1cAYQxA

5. 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/

6. 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.

7. http://www.eforuli.com

8. 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.

9. http://www.eforuli.com

10. http://www.calleza.com/ Special shows/events shown on their home page can be shared to facebook or twitter

11. http://www.calleza.com/

12. 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.

13. http://www.calleza.com/ (site album)

14. http://www.calleza.com/ (FB album)

15. http://www.calleza.com/ We can also get the events created from their facebook page and post it on their website.

16. Coding Sharing via FB.ui and Twitter Widget Using Facebook PHP SDK

17. Sharing via FB.ui and Twitter Widget We will code about how to share site contents to user’s facebook wall and twitter account.

18. 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.

19. 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>

20. 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>

21. 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.

22. 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 + '!' }, );

23. 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.'); } }

24. 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' />

25. That was the code used here…

26. 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>

27. JavaScript with Twitter Widget Create your function <script type='text/javascript'> function share_on_twitter( event_title, event_date ){ } </script>

28. 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');

29. 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' />

30. And that was the code used here…

31. Using Facebook PHP SDK We will retrieve photo albums from a facebook page and display it on a website.

32. Using Facebook PHP SDK Download PHP SDK here: https://github.com/facebook/php-sdk/ Store the SDK in your web directory

33. 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

34. 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);

35. 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>"; }

36. And that was the code used in here…

37. 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/

38. References Wikipedia https://developers.facebook.com http://www.smartbcn.com/

39. The End