You Got Your WordPress in my Facebook: Developing WPBook
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/
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
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
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/