Screenshot: An expansion of a mobile ad banner that shows the most recent 20 Facebook posts.

An expansion of a mobile ad banner that shows the most recent 20 Facebook posts.Facebook is the world's largest social network, with over a billion active users (and the only social network profiled in an award-winning blockbuster movie, released when its userbase was only half as large). And with over 50 million Pages, Facebook has also moved well past friend-to-friend interactions. Along with Twitter, Facebook has become one of the mission-critical social media platforms for brands to interact with fans, kick off promotions, and make announcements that have the potential to spread virally.

As I discussed in my blog post last week, embedding social media in display (banner) ads offers users the opportunity to do more than click and interrupt their site browsing experience. It also offers brands the opportunity to share the kind of content that was valuable enough to post on their Facebook Pages with a potentially much larger audience, one that is practically only limited by budget.

How does it work? Most Facebook Pages are public, and Facebook makes public Page content available via their API. Similar to tweets on Twitter, Facebook Page posts can be imported and displayed in a rotating ticker widget within an ad. The recency of the posts, a thumbnail of any associated photo, and the option to autoscroll through posts, all add to the perception that the brand's social media channel is active and worth paying attention to.

Let's have a look at how this looks in both desktop and mobile Web environments.

Facebook in Display (Banner) Ads

To save myself a little time, and to demonstrate how quick it is to use Flite Ad Studio 3 to construct and edit an interactive ad, I reused the ad I had built last week, adding a tab with the Facebook Page for Talk Like Shakespeare Day (apparently a Chicago tradition inaugurated by Mayor Rahm Emanuel last year). Adding the Facebook tab and configuring it to autoscroll and show the most recent 20 items took all of five minutes.  UPDATE: Set up a free Design Studio HTML5 account and build a Facebook-embedded ad yourself!

The Page is kept fairly current with a steady stream of posts, so I chose to show a timestamp. I also prefer to float thumbnails to the right, so that's how I configured it within the ad's Facebook component. And I was happy with the default font, background color, and other aesthetic options, so I kept them as-is, although those would have been easy to tweak if I so chose.

Facebook in Mobile Ads

Embedding Facebook Page posts makes terrific sense for mobile ads, considering well over half of Facebook's active users (we're talking 680 million users as of the end of last year) are accustomed to digesting Facebook through their mobile device. 

Budgeting myself with an additional five minutes to put together this mobile ad (which must also must be viewed using a WebKit-enabled browser, like Chrome or Safari), I used last week's Twitter ad as the foundation.

(Click to expand)

I made a few tweaks to this ad creative. First, I floated the thumbnails to the right, like I did in the desktop display ad above. I added a rounded (8-pixel radius) corner to the thumbnails. Finally, I used a 4-button pagination option instead of a scroll.

I chose to pull in a different page—The Chicago Shakespeare Theater's—instead. But any public Facebook Page would have been fair game. Users can click on any post, or on the Visit button to be taken over to the entire Facebook Page.

With the right tools in place and a talented designer, display and mobile ads like the ones I created can be vastly improved upon. The aesthetic impact is only limited by a designer's creative skills; the quality and value of the Facebook posts are determined by the content and social media marketers you have manning your Facebook Page.

This is the second post in a series on embedding interactive media in display (banner) and mobile ads. Have a look at the first on Twitter in display (banner) ads.