WordPress to Facebook and Back Again
I was really intrigued by Dave Lester’s WPBook plugin, which lets you bring posts from your wordpress blog into an application in Facebook.
I really wanted, though, for users to be able to comment on blog posts from inside Facebook, with their Facebook identities, and have it work like the OpenID comment plugin (in the sense that the user should not need to provide any authentication info, but it should be derived from their Facebook login).
I think I’ve finally got it it nailed, at least to the point where folks can start testing it.
If you are a Facebook user, go to this application page: http://apps.facebook.com/openparenthesis/
It will require you to log in (or already be logged in) to Facebook, but you don’t have to add the application to your profile or spam all your friends.
What you’ll see is my five most recent blog posts from this blog, inside a Facebook wrapper. (Can’t include embedded videos, the styles are bit wonked, etc – but it is a start. This is basically just Dave Lester’s plugin).
You should also (this is the new part I’ve hacked in) see the ability to comment on posts – without being asked for a name or url or email address.
Please leave me a comment to test it out. It should, if all works according to plan, pull your Facebook profile pic as your avatar for the comment as well – since your facebook profile page is actually an hCard with appropriate markup (go microformats!).
I believe this will work even for folks who are not “friends” of mine in facebook – but let me know if you run into difficulty.
Once I’ve validated that it works I’ll publish the code. It required me to add at least one file to my theme, and relies on the hAvatar plugin to get the profile pic.
Known Issues:
Sometimes the “autoresize iFrame to content size” bit in Facebook fails, and you end up with a fixed size view into longer content, with no scrollbars. Haven’t figured out what triggers that yet – standard facebook javascript api.
Sometimes you’ll get the “You’re entering comments too fast” error – just wait 30 seconds. Unless lots of people are all trying to do it from facebook at once this should go away. I’ll need to figure out how to unthrottle the comment queue in wordpress for this point.
Trackback url for this post: http://www.openparenthesis.org/2008/04/22/wordpress-to-facebook-and-back-again/trackback
17 Comments for this postAdditional comments powered by BackType
This is an incredibly cool plugin/app. I can’t wait till you have all the bugs worked out and I can use it with my blog as well. Hell A version optimized for wpmu would kick even more ass.
hmm. i’m guessing i’m dumb. i added the app, but where do i go to post a comment?
Terry – you were probably having the “auto resize iframe to content height” problem – when that fails, you can’t see the comment form at the end of the blog post, or the other four blog posts.
It’s just a simple javascript call, so I can’t figure out what makes it inconsistent – I will ask on the facebook developer forums.
@jeckman – I get the auto resize iframe on ff3b5, but on safari it looks good. Just put one of those “coded for Safari” badges up?
Interestingly, after posting a comment, it redirected to your site (url is reading openparenthesis.org), and the page exceeds the window but there’s no scrollbar.
http://skitch.com/terrbear/knn7/facebook-blog-application
I got down to where I am by just selecting the text and dragging it towards the bottom of the window. The facebook-auth thing is really cool, though. I like my pic just showing up without any effort.
Hmm. Interesting how the behavior varies across browsers. Will need to spend some tweaking time – may have to wait till this weekend.
Interesting that the 1st time I hit it (FF3b5 on Leopard) the frame didn’t render right, but 2nd time I hit the app, it loaded fine.
Got this error on submit:
Assert failed: unknown connection id
Break into debugger?
[...] Open Parenthesis » WordPress to Facebook and Back Again [...]
Hey guys,
What’s the easiest way to reduce the Canvas Page (width) to fit into the iFrame content area without scrolling side to side?
Any sample codes would be much appreciated.
Thanks!
@Boogieboa Generally this is taken care of by the plugin.
Something’s off with your install, since it is showing your theme inside the iframe rather than the wpbook theme, which wouldn’t show any scroll bars.
Seems almost like the plugin is not even installed – unless you’ve customized /wp-content/plugins/wpbook/theme/ yourself?
I wish it were that simple. This is a general question not a Wpbook-related one.
I can’t get your plugin to work: to either post comments, invite friends or add a profile box. It does fit very neatly into the iFrame content area, though. I figured, if anyone would know how to do that when creating a general Facebook application, you guys would.
I’m messing about with the xd_receiver.php file here but I’m not certain if therein lies the answer.
@Boogieboa – not sure what issues are preventing the plugin from working for you – have you tried limiting plugins? It’s ultimately either plugin conflicts or misconfiguration in my experience that prevents a plugin from working.
Fitting the content to width in the iframe is a theming issue – you’d have to have your wordpress theme be “fluid” and able to show well in a skinnier window. This is what wpbook does, in fact, substituting it’s own theme when called inside the facebook context.
@Boogieboa Also, the xd_receiver.html – shouldn’t be a php file – is there for the cross-domain javascript – it enables the javascripts called from Facebook to impact your page.
For example, to add the “Add to Profile” button, or to resize the iFrame to the contents.
It doesn’t impact the width at all, and also should have no impact on the ability to post comments.
I see now that the javascript will only affects the height and not the width here (FB.CanvasClient.setCanvasHeight).
Your plugin allowed the same Canvas Page to fit inside the iFrame, adjusting the width automatically. How is that done?
Are there examples of Wpbook in action that I can see? I’d like to know what it should look like when working successfully.
WPBook controls the width by providing its own custom theme, located in wpbook/theme/index.php, and using built in WordPress “hooks” to recognize when it is inside Facebook and substitute its own theme for the blog’s current theme.
I’m partial to my own: http://apps.facebook.com/openparenthesis/
Maybe I should start a new blog post or page and ask folks using WPBook to share their urls?
That’s a good idea, John. It would be worthwhile to see how others have managed to get the plugin working as you have.
Since a few of us here can’t, and it doesn’t seem as if anyone can pinpoint what’s going wrong, I’ll just have to try something else and look elsewhere.
Thanks for your time.