Introduction to the WPBook plugin for WordCamp NYC. Focuses on the hooks behind the core functions

1. You Got Your WordPress in My Facebook! Developing WPBook. 14th November 2009 WordCamp NYC John Eckman http://www.openparenthesis.org/ @jeckman Check out http://2010.boston.wordcamp.org/

2. What WPBook Does WPBook is a plugin which exposes a view of your self-hosted WordPress blog as a Facebook Application. Overview

3. Same blog, inside and outside Facebook Overview http://www.openparenthesis.org/ http://apps.facebook.com/openparenthesis/

4. Facebook Features Overview

5. Facebook features Overview

6. Setting Up WPBook Install WPBookPlugin http://wordpress.org/extend/plugins/wpbook/ Activate as usual Create a Facebook Application Requires Facebook Developer application Get ‘api key’ and ‘secret’ Set callback url Set iFrame, resizeable Configure WPBook Options Allow comments Require email address Add to Profile button Invite friends link “Share” button External site link Give credit Advanced Options Custom header/footer for each post Overview

7. WPBook How does it work?

8. Check for Facebook function check_facebook() { if (!isset($_SERVER["HTTP_USER_AGENT"])) return false; if (isset($_GET['fb_sig_in_iframe']) || isset($_GET['fb_force_mode'])) return true; return false; } if (check_facebook()) { add_filter('template_directory', 'wpbook_template_directory'); add_filter('theme_root', 'wpbook_theme_root'); add_filter('theme_root_uri', 'wpbook_theme_root_uri'); } Core Functions / Hooks

9. Theme Filter function wpbook_theme_root($path) { $theme_root = dirname(__FILE__); if (check_facebook()) return $theme_root . '/theme'; else return $path; } function wpbook_theme_root_uri($url) { if (check_facebook()) { $dir = get_bloginfo('wpurl') ."/wp-content/plugins/wpbook/theme"; return $dir; } else return $url; } Core Functions / Hooks

10. Filter Permalinks function fb_filter_postlink($postlink) { if (check_facebook()) { $my_offset = strlen(get_option('home')); $my_options = wpbook_getAdminOptions(); $app_url = $my_options['fb_app_url']; $my_link = 'http://apps.facebook.com/’ . $app_url . substr($postlink,$my_offset); return $my_link; } else { return $postlink; } } Core Functions / Hooks

11. Update Profile Boxes function wp_update_profile_boxes() { if(!class_exists('FacebookRestClient')) { include_once(ABSPATH.'wp-content/plugins/wpbook/client/facebook.php'); } . . . $api_key = $wpbookAdminOptions['fb_api_key']; $secret = $wpbookAdminOptions['fb_secret']; $facebook = new Facebook($api_key, $secret); $ProfileContent = '<h3>Recent posts</h3><div class=' . '"wpbook_recent_posts">' . '<ul>' . . wpbook_profile_recent_posts(5) . '</ul></div>'; // this call just updates the RefHandle, set for the user profile $facebook->api_client->call_method('facebook.Fbml.setRefHandle', array('handle' => 'recent_posts', 'fbml' => $ProfileContent,) ); } Core Functions / Hooks

12. WPBook What about the Facebook stuff?

13. Share on Facebook button if($enable_share == "true"){ echo '<span class="wpbook_share_button”>'; echo '<a onclick="window.open(amp;apos;http://www.facebook.com/sharer.php?s=100&p[title]='; echo urlencode(get_the_title()); echo '&p[summary]='; echo urlencode(get_the_excerpt()); echo '&p[url]='; echo urlencode(get_permalink()); echo "','sharer','toolbar=0,status=0,width=626,height=436'); return false;amp;quot;"; echo ' class="share" title="Send this to friends or post it on your profile.">Share This Post</a>’; echo '</span>’; } Facebook

14. Invite Friends if($invite_friends == "true"){ $invite_link = '<a href="http://apps.facebook.com/' . $app_url .'/index.php?is_invite=true&fb_force_mode=fbml" class="share"> Invite Friends</a>'; echo '<div style="float:right; ">'; echo '<span class="wpbook_invite_button">'; echo("$invite_link"); echo '</span></div>'; } (This just redirects user back to index.php with: is_invite = true force_mode = fbml ) Facebook Key Features

15. Invite Friends, Cont’d <fb:fbml> <fb:title>Invite Friends</fb:title> <fb:request-form action="http://apps.facebook.com/<?php echo $app_url ?>" method="post" type="<? echo $app_name; ?>" content="<? echo htmlentities($content); ?>" image="<? echo $app_image; ?>"> <fb:multi-friend-selector actiontext="Here are your friends who don't have <? echo $app_name; ?> yet. Invite all you want - it's free!"exclude_ids="<? echo $friends; ?>" bypass="cancel" /></fb:request-form> </fb:fbml> When index.php in /theme/ is loaded: If “is_invite” is set, AND $_POST[“ids”] is set, show thank you message If “is_invite” is set, but $_POST[“ids”] is empty, show the add friends form First get set of friends who already have the app, and exclude them in form If “is_invite” is not set, we’re just on the blog home page (see wpbook/theme/index.php for detailed version) Facebook Features

16. Add to Profile In HTML page (theme): <div id="addProfileButton"></div> Plus Javascript from Facebook: <script type="text/javascript"> FB_RequireFeatures(["XFBML"],function() { FB.Facebook.init('<?php echo $api_key; ?>', '<?php echo $receiver_url; ?>',null); FB.Connect.showAddSectionButton('profile', document.getElementById('addProfileButton')); }); </script> <script type="text/javascript"> FB_RequireFeatures(["CanvasUtil"], function() { FB.FBDebug.isEnabled=true; FB.FBDebug.logLevel = 4; FB.XdComm.Server.init("<?php echo $receiver_url; ?>"); FB.CanvasClient.startTimerToSizeToContent(); } );</script> Facebook Features Facebookjavascript loads and replaces the div with id of addProfileButton with a styled "Add to Profile" button. It also resizes the iFrame to avoid the scroll bar – if the iFrame is set to resizable in FB settings

17. Add to Profile, Cont'd $ProfileContent = '<h3>Recent posts</h3>' . <div class="wpbook_recent_posts">' . '<ul>' . wpbook_profile_recent_posts(5) . '</ul></div>'; $facebook->api_client->call_method( 'facebook.Fbml.setRefHandle',array( 'handle' => 'recent_posts', 'fbml' => $ProfileContent, ) ); $facebook->api_client->call_method( 'facebook.profile.setFBML',array( 'uid' => $user_id, 'profile' => '<fb:wide><fb:ref handle="recent_posts" /></fb:wide> <fb:narrow><fb:ref handle="recent_posts" /></fb:narrow>', 'profile_main' => '<fb:ref handle="recent_posts" />' ) ); Facebook Features

18. View on Blog <span class="wpbook_external_post"> <?php $permalink_peices = parse_url(get_permalink()); $permalink_app_url = "/".$app_url; $external_post_permalink = str_replace_once($permalink_app_url,"",$permalink_peices[path]); $external_site_url_peices = parse_url(get_bloginfo('wpurl')); $external_site_url = $external_site_url_peices[host]; $exteral_post_url = get_bloginfo('wpurl').$external_post_permalink; echo "<a href='$exteral_post_url' title='View this post on the web at $external_site_url'>View post on $external_site_url</a>"; ?> </span> Facebook Features

19. Roadmap Fix What’s Broken Require PHP5, eliminate potential for uncaught exceptions Eliminate hard-coded wp-content directory, assumption about plugin files location http://willnorris.com/2009/05/wordpress-plugin-pet-peeve-hardcoding-wp-content/ http://willnorris.com/2009/06/wordpress-plugin-pet-peeve-2-direct-calls-to-plugin-files Fix bug on invite friends outside home page Better Respect WordPressconfiguration(s) Better handle custom home pages, subdirectories Better handle pages,not just posts Threaded comments (if enabled in blog) Theme customization (in Facebook) Enable sidebars, widgets List pages / navigation Allow theme selection / avoid overwriting theme on updates More Facebook features Post to [author’s | user’s] wall / notifications on new blog post Publish to comment author’s news feed on comment Get email addresses from comment authors via Facebook permissions

20. Thanks WPBook was originally created by Dave Lester as part of the ScholarPress project. (He's here speaking at WordCamp NYC) Brooke Dukes has also contributed significantly to WPBook. Unfortunately, she's not here speaking (as far as I know). Many WPBook users have helped with bug reports / patches, suggestions, and testing.

21. WPBook Q & A Plugin: http://wordpress.org/extend/plugins/wpbook/ Blog: http://www.openparenthesis.org/ In FB: http://apps.facebook.com/openparenthesis/ Twitter: @jeckman Check out http://2010.boston.wordcamp.org/