Improved Like Box Widget

As I mentioned in my previous post about the most recent auto-update we’ve pushed, as a part of our ongoing efforts to improve Facebook integration, we’ve now re-built the Facebook Like Box widget. The main differences from this particular rebuild are:

  • we’ve switched to the new and recommended HTML5/JavaScriptSDK Facebook API, instead of using hard-coded IFRAME elements
  • we now have built-in customization and live preview instead of copy/pasting code from Facebook

The new HTML5 API

Switching to the new HTML5/JavascriptSDK API means we no longer hard-code IFRAME elements into your site. Instead, simple, valid HTML5 placeholders are left in place in your markup, and the Facebook JavaScript code turns it into the correctly customized Like Box.

The new API is the currently suggested way to do Facebook integration, and we’re in the process of moving all of our Facebook elements to the new API. The new API gives us more flexibility and intelligence in dealing with Facebook elements and events, and degrades better (and faster) when Facebook isn’t loading quickly or properly.

The new customizer with live preview

In ProPhoto3 and older builds of P4, the Facebook Like Box widget was just a glorified text-box, where you pasted in code that you had to generate on Facebook’s developer page:

This was annoying and error-prone. The new method gives you all of the Facebook-permitted customization options right in the widget editing screen, and shows you a live preview of your Like Box, which is much better:

ProPhoto will automatically and seamlessly convert your old-style Like Box to the new format, so there’s no need to do anything if you made a Like Box before the new format was released. As soon as your ProPhoto4 site updates to the latest build, the Like Boxes will be converted.

Facebook Comments are Coming…

As you have probably already figured out, we’ve been working a lot on improving existing and adding new Facebook integration functionality into ProPhoto4. The last big thing on our list for this round of development is built-in Facebook comments.

We’ll probably have a first-pass of Facebook comments integration ready to push in our next auto-update, probably about 2 weeks away. Straightforward integration of Facebook comments is trivial from a development standpoint — I implemented Facebook comments on this blog this morning in about 15 minutes. (So, scroll down and leave a comment through Facebook if you’re logged in!) What makes building Facebook comments for P4 not so easy figuring out the best way to handle two tricky issues:

Tricky issue #1 – Syncing Facebook comments with WordPress

Comments left via Facebook comments actually live and reside on Facebook, not your website. So, to do Facebook comments the right way, we need to make sure that any comments on your posts created through Facebook also get imported into your WordPress database. There are two reasons for this:

  • if you ever want to stop using Facebook comments, you will want to keep all of the comments left on Facebook and display them as normal WordPress comments
  • Google doesn’t read Facebook comments, so we need to have the comments in WordPress so we can use some trickeration to show Google the comments so that they get indexed

Thankfully, Facebook does provide a couple of ways to programmatically read comments from their API so we can insert them behind the scenes into the WordPress database. We’re just working on the smartest way to do this to ensure a more-or-less accurate sync with WordPress without slowing down your site page loads with expensive calls to the Facebook external API service. When we do push the update with Facebook comments, I’ll be able to share more about how decided to go about keeping your WordPress comments in sync with comments added through Facebook.

Tricky issue #2 – Dealing with old comments

The other tricky thing we need to do a good job handling is old comments – comments posted on your blog posts before you started using Facebook comments.

If you’re like a lot of ProPhoto users, you might have several years of blog posts with comments. If you opt to turn on Facebook comments, you probably want to keep displaying those comments. Unfortunately, there is no way to push comments created outside of Facebook into Facebook, so we can’t turn your old non-Facebook comments magically into Facebook comments.

So, we have a couple of options of how we could handle comments from old posts:

  • Option 1: we could just not show your old comments and replace them with an empty area for adding new Facebook comments
  • Option 2: we could use only the WordPress commenting system on old posts created before you started using Facebook comments
  • Option 3: for older posts with non-Facebook comments, we could mix old WordPress comments with new Facebook comments, showing the pre-Facebook comments in WordPress-style, but allowing for and showing new Facebook comments as well
  • Option 4: we could implement options 1 – 3 and let the user choose which method they would like for handling old comments
  • Option 5: you could tell us in the comments area below a different idea you have of how you would prefer this to be handled

Please weigh in by commenting through Facebook below and give us your input!

P4 Auto-update details, build #1013

This morning we pushed an auto-update for ProPhoto4 users on capable web-hosts. The auto-update adds some more Facebook functionality improvements, takes care of a few minor bugs, and fixes one major bug that affected a few of you.

Facebook “Like Box” updated:

In this update we switched the Facebook “Like” box widget to the new HTML5/JavascriptSDK API instead of using hard-coded iFrame elements. This allowed us to also build in a much easier-to-use live preview to help in customizing Like boxes. More on this in a future blog post.

More granular control of Facebook previews:

Also in this update, we provided some more intelligent and customizable controls for dictating how Facebook previews of your site and posts render inside of Facebook. If you want to know all of the gory details, see this major new support tutorial we just published.

One big bug fix:

Over the weekend, a few users who purchased or updated to build #1011 experienced a bug where when they went to an “Older posts” page view for any page type, the screen was white, or showed some PHP fatal error reporting code. Sorry about that, that was completely our fault. That is fixed in this update as well.


For those interested, a fairly exhaustive list of the changes is below:

  • 02/20/12 – add Facebook numeric personal ID option for insertion into <head>, to silence Facebook linter warning and associate site with a Facebook user
  • 02/19/12 – fix fatal error on “paged” pages caused by mis-typed method call in SEO class
  • 02/16/12 – auto-lint WordPress posts and pages on save to prevent problems with Facebook not showing most recent preview image/title/description data because of Facebook cache
  • auto-lint home page and static front page when Facebook preview overrides changed to prevent out-of-date Facebook cache from messing up previews
  • always provide og:description meta tags so that Facebook debugger/linter is happy
  • give more granular controls for Facebook link previews for blog posts home page and static page home page
  • fix rare problem where very large Lightbox gallery thumbnails with watermarking applied were not displaying in rows
  • force WordPress captions to max-width 100% to prevent alignment issues with default WordPress captions and downsized images
  • 02/14/12 – fix rare bug with menu dropdown link spacing caused by off-by-one logic error
  • add another acceptable MP3 mime-type so Firefox + OSX Lion don’t go moo when uploading
  • scrub another norwegian character from uploaded image filenames because it causes problems with iPad display
  • strip <br /> tags from mobile post excerpts, also prevent poorly coded plugins from outputting inside link tag elements
  • 02/13/12 – ensure Facebook “Like” box constrained to widget area width when possible
  • convert Facebook Like box widget to new html5/jsSDK format, with better configuration and live preview, and handle legacy conversion of old Like box widgets
  • 02/10/12 – add Facebook language “locale” option because it is required for the new HTML5/JavascriptSDK API
  • change mobile device image constraint size because of some Android handsets with larger screen dimensions
  • fix bug where mobile slideshow buttons were not obeying button color customization
  • ensure “Like” button spacing options applied to mobile site
  • 02/09/12 – echo out HTML comments when GD image-downsizing to assist in troubleshooting rare PHP out-of-memory errors when downsizing massive images
  • allow user to set max-threshold for GD image downsizing to help some problematic web-hosts
  • trash and untrash Galleries when their parent post/page is trashed or untrashed

Find your Facebook ID

I’ve been working a ton on Facebook integration, and we’ll continue to keep rolling out new features and improvements for ProPhoto in the weeks to come. While I was working, I came across the fact that for many Facebook social plugins, you are required to know your personal Facebook numeric ID (mostly to fill in the “fb:admins” meta tag). But, Facebook does not give any simple way to find that ID.

Anyway, I quickly built a simple utility website that allows people to paste their Facebook profile URL into a form and it will scrape their numeric ID from the code of their profile page. We may be directing people there in the future, or building in a similar functionality into the ProPhoto core.

But, for anyone who wants to, now you can easily find your Facebook numeric id.


Introducing the "Tweaks" plugin

We receive tons of input about ProPhoto almost every day. What new features you want, what customization choices you wish you could change, etc. Because we have so many users who want so many things, we have to make hard choices about what makes it into ProPhoto and what does not. Every time we add a feature or a customization option, there is a small amount of simplicity and usability lost, so we can’t just include every good idea.

Because of our near-constant struggle with the trade-off between wanting to keep customers happy, and not wanting to bloat the main ProPhoto core software, we recently built an official add-on plugin for ProPhoto called the “Tweaks” plugin.

The purpose of the tweaks plugin is to allow for fringe customizations that are valid and important to a small number of users, but not worth including as a built-in customization option for everyone. When you install the plugin, it adds another menu item to your ProPhoto left-hand WordPress admin menu:

Clicking on the Tweaks plugin link takes you to a screen where you can start taking advantages of currently available tweaks:

Currently, the list of supported “Tweaks” is sort of small, but it’s a good start. You can:

  • remove all ProPhoto-generated Facebook meta data if you’d rather use a plugin
  • force filenames to display for every image in Lightbox galleries, even when no custom title is set (useful for proofing with clients)
  • restore the “From URL” tab to the WordPress upload screen, allowing you to insert images from hard-coded external image URLs
  • override the default limit of 60 masthead image
  • override the default limit of 25 widget custom images
  • override the default Lightbox image size constraint of 900 pixels

We will be slowly adding more tweaks in the weeks and months to come, and will likely do a blog post every time we add something to the plugin. If you want to make use of the plugin, we have detailed installation instructions over here.

Get a $30 rebate when you choose our recommended host, Bluehost