Embedding Gists to display code snippets normally works great, and I wrote a post a few days ago explaining how to do that on a WordPress site or blog. But what about when, for whatever reason, your Gists don’t show up? I’ve seen it happen on this blog a few times, and just last week someone commented that my Gists had been removed from one of my tutorial posts.
I’m fairly certain it’s not just my blog this happens to – a few weeks ago I was on the StudioPress site looking for a Genesis code snippet and the code was missing from the page. I thought that was odd, but then I remembered to refresh the page and the “missing” embedded Gist with the code appeared on the page.
Give each Gist a linked heading
One of the first things I did to improve the embedded Gist experience for my users was to add a heading above each Gist describing what it was. Now if the Gist doesn’t appear at least the reader will (probably) know that there is supposed to be a Gist there.
My next improvement was to link that heading to the Gist itself so that the reader could still find it, although it wouldn’t be on my site.
Add a fallback background image to the Gists
I don’t know why embedded Gists don’t always work like they should, except that this is the Internet, and sometimes these things happen. Refreshing or reloading the page nearly always fixes the problem, but some folks don’t realize this and they think something is broken or missing from your post.
I was pondering this situation the other day when the idea occurred to me to use a background image that would be visible if and when the Gists don’t display, and the image could have a helpful message telling the user to refresh the page to see the Gists.
Making this happen was a matter of creating a quick image in Photoshop, adding a DIV container around the embedded Gist URL in the post editor, and then adding the CSS to make it work. The code below is what I came up with, and below that is the background image I’m currently using.
Background image to display when Gists don’t
That’s what I’ve done so far to make using embedded Gists a better experience for everyone involved. What do you think? Are there more improvements that could be made when using Gists?