Regarding Web Tools

More About Open Graph and YouTube Thumbnails

Recorded on April 27th, 2016

Here’s Part 2 of what I started last night with the YouTube thumbnail issue. I knew from doing some reading that Facebook looks for an og:image Open Graph meta tag in your HTML when you share a post from your site. If you have an embedded YouTube video that you hope generates a thumbnail, you need a meta tag that looks something like this:

<meta property="og:image"  
content="http://i3.ytimg.com/vi/
wRnfXxsPQNQ/hqdefault.jpg" />  

I’m running this blog on Statamic, which has the handy ability to let you define a new field in the YAML at the top of the text file of your post, like this. I called my static image URL field my_og_image:

---
title: 'Public Service Announcement: I've Got A Knife'. categories: [ music, safety first ]
my_og_image: http://i3.ytimg.com/vi/wRnfXxsPQNQ/hqdefault.jpg
---

And then, to make it show up in every post, you add this to Statamic’s _themes/THEME_NAME_HERE/layouts/default.html  file:

<meta property="og:image"  
content="{{ my_og_image }}" />

That’s technically not the entirely correct way to do it, because it’s not conditionally adding the meta tag. If you don’t define a value for my_og_image in your post’s YAML, you’re still going to get a meta tag for og:image and it’s going to be blank, which isn’t great. But I’m still learning about how to properly define fieldsets and stuff in Statamic, so I hope to figure that out later. This will work well enough for me now.

How to Grab a YouTube Thumbnail Image URL

Recorded on April 26th, 2016

As I started sharing more links to this blog on Facebook, I saw that if I had a YouTube video embedded, or no static image included in the post, I would get a blank white box where a thumbnail should be. I finally figured out the missing piece by looking at other sites like Tumblr, where you can share an embedded Tumblr video post to Facebook and the video thumbnail comes over intact. The key is that you have to have an “og:image” meta tag in the head of your page that tells Facebook where to grab the thumbnail. I’ll detail that in the next post, but for now, get-youtube-thumbnail.com is the tool that makes it easy to grab the image URL. You enter a YouTube URL and out pops an image URL.

Ahhhhhhhh.

Why We Still Run Our Own Blogs

Recorded on April 4th, 2016

Eddie Smith just moved Practically Efficient to Jekyll + GitHub:

Even though indie blogging has been relegated to third-, fourth-, maybe fifth-class citizen status on the internet in the last few years, I’m still grateful it lives on through the people who won’t let it go. I’ve seen so many talented, passionate bloggers move on to other mediums like podcasting or get sucked into aggregator-ish, socially-charged platforms like Facebook and Medium to chase the high of extra-instant attention, only to find that individual thoughts quickly wash away in a relentless social tsunami that leaves no trace of individual identity or permanence.

I tried to say that a while back in Why to Host Your Own Stuff, but I didn’t crystallize it nearly as well as Eddie did. He moved from Squarespace to Jekyll primarily because of Markdown editing frustrations, and in the process, he gained a huge amount of control over his content and the way it’s delivered. He also learned a bunch of new stuff to get it all working the way he liked. And since Jekyll pre-builds everything as pure HTML, his site got really fast, too.

More reasons to roll your own and go the nerdy route!

Embed Videos Responsively

Recorded on March 6th, 2016

If you need to embed YouTube or other videos in an iframe on a responsive website, the trick is to wrap the iframe in a div and use CSS to style a box with an “intrinsic ratio”. The first time I saw it was on A List Apart in 2009. Sure, I get it, but I would have never thought of it.

I had forgotten how to do this and needed a quick way to embed a YouTube video. I found Embed Responsively, which is a quick and dirty way to plug in a video URL and get a responsive video container using inline styles. Ideally, you would do this yourself by defining the same styles in your CSS one time. After that, you’d only have to remember to wrap your YouTube iframe in a <div class='embed-container'>. But if you haven’t had time to set that up, Embed Responsively is a perfect resource.