Refresh Columbia » Tutorials

Sync WordPress and Facebook Comments

Jason Beaird — Wed, 11 Aug 2010 20:31:18 +0000

Let’s face it, nobody comments on blog posts any more. There’s just too many ways to consume information. With Refresh Columbia in particular, meetup announcements start as blog posts, get automatically syndicated as a MailChimp email campaign, posted as a note on the Facebook fan page wall, read in a bunch of other RSS readers and announced on Twitter. Many of those steps (Specifically Facebook and Twitter) provide people external channels to communicate about the content here. I was trying to figure out a way to tie some of those conversations together and decided to give the WPBook WordPress plugin a try.

According to WPBook, any post made here (assuming *cough* you’re reading this on the blog) will still appear in Facebook, but (and this is really cool) comments made on Facebook will be syndicated to the blog and vice versa. It doesn’t completely glue together the fractured world of social media, but it’s certainly a step in the right direction.

Setup was very straightforward:

From the WordPress Plugins Page in Admin, click “Add New”
Search for WPBook and click “Install”
Click “WPBook” in the Settings Sidebar
Click the “Detailed Instructions” link near the top of the page
Follow this page word-for-word…

Yea, I know, that was pretty sad for a tutorial. There are a quite a few steps involved with setting up the Facebook application, adding the app to your fan page and configuring WPBook, but the directions are pretty straightforward. You can check out the Refresh Blog’s evil Facebook twin at http://apps.facebook.com/refreshcolumbia.

I’m not sure why this post didn’t get pulled in as a wall post on the Refresh Columbia fan page but as you can see below, comments from the blog and from the post on Facebook show up in both places.

Great, but what about Twitter?

I also just added the Twitoaster plugin which promises to pull any tweet that links to this post as a comment as well. Time to tweet it from the Refresh Columbia account to see if it shows up!

CSS Sprites2

Jason Beaird — Tue, 26 Aug 2008 17:30:28 +0000

CSS Sprites have been a staple of modern web development since Dave Shea formally introduced the technique in his A List Apart article from 2004. The concept is simple: if you want the appearance of a link to change when hovered, you put the normal and hover state in the same background image and offset the background-position with CSS when the link is hovered. The benefit was that you no longer had to save the hovered version of the link as a separate image and more importantly, didn’t have to rely on JavaScript. …and nobody ever really missed MM_preloadImages(), MM_swapImage(), and MM_swapImgRestore().

Well, Shea is bringing JavaScript back with an updated version of his technique which is aptly named CSS Sprites 2. The original functionality is maintained for users without JavaScript, but transitional effects are dynamically added to the rollover using jQuery.

A List Apart: CSS Sprites 2

ID vs. Class

Jason Beaird — Wed, 09 Jul 2008 14:39:25 +0000

This is the kind of foundational CSS knowledge that I often assume everyone knows. Even though it’s a basic topic, Chris Coyier does an excellent job of explaining it in a way that won’t make you feel like a noob.

IDs and Classes the “hooks” we need to build into markup to get our hands on them. CSS obviously needs these so that we may build selectors and do our styling, but other web languages like Javascript depend on them too. But what is the difference between them?

CSS-Tricks: The Difference Between ID and Class