If your blog is built on WordPress, and your videos are hosted on YouTube, you’ll notice that Facebook’s “Like” and “Send” buttons will rather liberally “scrape” (Facebook’s version of spidering and indexing) the article you posted. If you have the WordPress SEO plugin installed, you’re given some greater control over the granularity of your meta. But neither the WordPress core nor this popular plugin currently has a handler for passing YouTube video thumbnails to your social networks via Open Graph. For posts that are videos with only a few words of supplemental copy, Facebook users may not be enticed to click these shared links if they don’t include video thumbnails.

Until WordPress SEO updates its image handlers, here’s a quick, easy trick to extract a video ID from your YouTube embed code and use it to pass a thumbnail to Facebook via the YouTube API.

Find the file class-opengraph.php, typically here:
http://www.yourdomain.com/wp-content/plugins/wordpress-seo/frontend/class-opengraph.php

Jump to around line 264, in the function called “image”, and you’ll find the following code:

Source code

...	if ( preg_match_all( '/<img [^>]+>/', $post->post_content, $matches ) ) {
		foreach ( $matches[0] as $img ) {
			if ( preg_match( '/src=("|\')(.*?)\1/', $img, $match ))
			$this->image_output( $match[2] );
		}
	}		
}

Add a little chunk of code to search for video embeds, and include thumbnails among the Open Graph meta properties, if they’re found.

Source code

...	if ( preg_match_all( '/<img [^>]+>/', $post->post_content, $matches ) ) {
		foreach ( $matches[0] as $img ) {
			if ( preg_match( '/src=("|\')(.*?)\1/', $img, $match ))
			$this->image_output( $match[2] );
		}
	}
 
	if (preg_match_all("#(?<=v=)[a-zA-Z0-9-]+(?=&)|(?<=v\/)[^&\n]+(?=\?)|(?<=v=)[^&\n]+|(?<=youtu.be/)[^&\n]+#", $post->post_content, $matches)) {
		foreach(array_unique($matches[0]) as $m) $this->image_output("http://img.youtube.com/vi/{$m}/0.jpg");
	}		
}

There is no need to republish your posts or rescrape your page using Facebook’s Debugger. Just reload your browser, share the post on Facebook, and your problem is solved.

Working with URL rewriting (namely: Apache’s mod_rewrite, a rule-based rewriting engine) can be a little bit confusing. LiquidWeb Hosting’s stellar technical support team passed the inquiry from tech-to-tech before a solution was found. This solution was further polished by ERA404 systems guru, Tony Muka, and is explained below.

 
What are the rules?

We mentioned “rule-based” when describing this Apache module. So what are the rules?

1. Ignore files that already exist on your web-space (index.htm, logo.png, and so on).

Source code

RewriteCond %{SCRIPT_FILENAME} !-f

2. Ignore directories that already exist on your webspace, too (image folders, script folders, and so on).

Source code

RewriteCond %{SCRIPT_FILENAME} !-d

3. For everything else, let’s pass anything after the base URL as an argument to your backend script to do whatever magic you wish to do. Now this is the confusing part because (unlike the previous two rules) it’s written in something that looks like Q*bert gibberish. Let’s have a look at that last rule.

Source code

RewriteRule ^([^/]+)/?(.*)$ /?user=$1&$2

Notice that this rule starts with “RewriteRule” and not “RewriteCond[ition]“. This is where we ask Apache to rewrite the URL if the first two conditions aren’t met—that is to say, it will only rewrite URLs for non-existent files and directories. Here’s a little breakdown of what will happen when you’ve put this instruction set on your web server:

 
With this last requested URL, you can see the power of Apache’s mod_rewrite, because we can technically provide instruction for your handler scripts to do anything you need them to do. In this usage, a username is passed, as well as an action to present the profile page. This methodology can be used in countless scenarios where a long, cumbersome URL can be compacted, such as REST requests, XML requests, and so on.

 
Putting it All Together

Source code

# address translation for user URLs
RewriteEngine on
RewriteBase /
# look for url/username or url/username/ and translate to url/?user=username
# maintain all other passed arguments
RewriteCond %{SCRIPT_FILENAME} !-f
RewriteCond %{SCRIPT_FILENAME} !-d
RewriteRule ^([^/]+)/?(.*)$ /?user=$1&$2

Simply put this script into a text document, name it “.htaccess” and drop it into your webserver’s root directory. Make sure that Apache’s mod_rewrite module is activated on your HTTP server’s configuration (it usually is), and you’ll be all set to rewrite some URLs.

1. Google Author Tag

If you want your authorship information to appear in search results for the content you create, you’ll need a Google+ Profile with a good, recognizable head-shot as your profile photo. Then, verify authorship of your content by associating it with your profile using either of the methods below. Google doesn’t guarantee to show author information in Google Web Search or Google News results and it could take anywhere from two weeks to three months before these pages are indexed and returned among results.

Option 1: Link your content to your Google+ profile using a verified email address.

Twitter Cards help increase your visibility and encourage users to click to your site by providing more information beyond Twitter’s 140 character limit. Furthermore, design and development studios with Twitter Card functionality built into their site can provide a working example for clients to see how the same functionality can be implemented into their sites.

ERA404 Twitter Card Example

As with most of Twitter’s APIs, Twitter cards are fairly quick to implement. All you need to do is insert some metadata, test, and apply to participate. To make things even easier, Niall Kennedy has created a WordPress plug-in to automatically scrape your post’s title,  permalink, description and image URL for summary Twitter cards. After installing and activating the plug-in, preview your Twitter card by pasting the post’s URL into their preview page.

Lastly, you’ll need to apply to participate. Simply enter your site and contact information here and Twitter will reply within 5-10 business days.

As browser resolutions increase, the fold mark keeps changing. In 2013, 25.4% of the world was browsing at 1366×768, as opposed to only 18.7% in 2012. And the growing availability of mobile phones and tablet devices, such as iPads, has changed the landscape to a point where we can no longer rely on a majority resolution and location of the fold. As a result, we recommend fluid, responsive layouts that accommodate for the broadest range of resolutions possible. Not only does this help clients to be able to see the most important content, while helping them to sell their services over their competitors’, but it also helps us to reorganize and strategize content based on the different types of users. For instance, a user on a phone may be more interested in contact information, a tablet user may want to read topical news or view videos, and a desktop user may want more in-depth articles and research information. Responsive layouts help gear the content toward these different demographics and re-organize what’s seen above the various folds.

That said, we’re currently in the age of Cinema (16 x 9 resolutions) and Retina (2x Device Pixel Ratios) displays. With iOS’s dock protruding into the available horizontal space and retina’s ability to scale content by pinching, the confusion over the floating fold mark is mired further.

With the one caveat that the rapidly changing environment may soon render this outdated, our recommended fold mark remains 645px for landscape orientations (with allowance for a persistent bookmarks bar) and 900px for portrait.

Examples of our testing can be seen below:

Safari Landscape

Chrome Landscape

Safari Portrait

Chrome Portrait

Safari Landscape – Bookmark Bar

If you’re interested in learning more about fold lines, Strategic UI/UX or the changing landscape of the web, drop us a line to initiate a conversation.

• Anxiety: What environmental factors should be concern me?
• Trust: Will I get out what I put in?
• Expectations: What level of commitment should I prepare for, in terms of budget? Labor? Upkeep?
• Comfort: What is a realistic yield for an endeavor of this size?

When breaking ground on any mission that will require his time, energy, and resources, my father knows that thorough, comprehensive planning, coupled with a solid foundation, will make all the difference in the success of his venture.

The importance of well-written production scope has always been easy to communicate and readily received, but for unknown reasons, this document is all-too-often missing from RFPs. And while my father’s garden may seem an odd metaphor for web and application development, it should show that we scope non-web projects all the time without realizing. And his garden is a reasonably good visual for putting a scope into somewhat relatable terms, demonstrating its necessity, and giving a little color to a rather dry subject for backyard reading.