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.

More on music in P4 slideshow galleries

As I mentioned in my last post, in our most recent update we restored ProPhoto’s ability to play music for slideshow galleries.

ProPhoto3 was able to play music with slideshows, but when we were building P4, we completely ripped out the flash slideshow player and rebuilt it using pure HTML/CSS/JavaScript. Due in part to a time-crunch, some laziness, an ambivalence to music on websites in general, and some tricky technical issues, we never got around to restoring this functionality until last week.

How we did it

In rebuilding the music player, we wanted to avoid using Flash if at all possible and instead adopt the new HTML5 “audio” element. While this seems fairly straightforward, it turns out there are some problems to workaround. Namely:

  • not all browsers support the HTML5 audio element (notably Internet Explorer)
  • not all browsers can play MP3-format files through the HTML5 audio element because of copyright and licensing issues (notably Firefox, because of it’s open-source nature)

The good side of the force…

So, what we ended up doing is this: When we detect a slideshow with music, we dynamically load an HTML5 audio element for all browsers that can support it, and can play an MP3 through it. This includes iPads and iPhones. For these browsers and devices, the play/pause button on the ProPhoto slideshow is a basic toggle control to the invisible HTML5 element, and the entire audio player is 100% flash free.

And the dark side…

Alternatively, on browsers and devices that either don’t support HTML5 audio, or can’t play MP3s with it, we dynamically load a 1px by 1px invisible Flash movie off of the edge of the screen. Then, for these browsers, the play/pause button on the slideshow communicates silently via JavaScript with the invisible, off-stage 1×1 pixel flash movie, to start and stop and control the audio playback. So, for these browsers, we have added back in one small Flash element as a fallback when HTML5 audio playback is not possible. Just in case there’s any anti-flash purists out there who are upset by this fact, just be aware of these facts:

  • Flash is loaded only when there is a slideshow with music present, and then only for browsers that don’t support HTML5 MP3 playback
  • when Flash is loaded, it is loaded via JavaScript, so Google never sees anything except the pure HTML5 markup
  • All modern browsers and devices (including iPhones, iPads) are never served Flash under any circumstances

Site-wide audio

There still remains one aspect of what ProPhoto3 could do that we have not yet restored, and that is overall site music — background music for your site itself.

At this point in time we are not certain that we will ever restore this functionality. It’s at least not coming back anytime soon. The reasons why we’re currently not planning to work on site-wide music are:

  • background music for websites generally annoys the user and is considered poor usability
  • background music significantly slows down page load times
  • there is no simple way to keep music playing back continuously when the user navigates from page to page within your site
  • there are several high-quality free WordPress plugins that can add general site background audio for those who still want it

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