you got your wordpress in my facebook: developing wpbook

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/

http://www.openparenthesis.org/

2 © 2009 John Eckman. Some rights reserved.

What WPBook Does

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

Overview


Same blog, inside and outside FacebookOverview

http://www.openparenthesis.org/ http://apps.facebook.com/openparenthesis/


Facebook FeaturesOverview


Facebook featuresOverview


Setting Up WPBook

Install WPBook Plugin• 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


WPBook

How does it work?


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


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;

}



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;

}}



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,) );

}



WPBook

What about the Facebook stuff?


Share on Facebook button

if($enable_share == "true"){echo '<span class="wpbook_share_button”>';echo '<a onclick="window.open(\'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;\""; echo ' class="share" title="Send this to friends or post it on your profile.">Share This Post</a>’;echo '</span>’;

}

Facebook


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 = trueforce_mode = fbml )

Facebook Key Features


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


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

Facebook javascript 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


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


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


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 WordPress configuration(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

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


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.


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/

you got your wordpress in my facebook: developing wpbook

Technology

facebook return

facebook profile

new facebook

facebook stuff

facebook buttonif

outside facebook overview

wpbook doeswpbook

right theme