Hop Studios is Canada's top ExpressionEngine
Web consulting, design and development firm.

ask about your project

Work With Us!

Get A Quote


Increase Sharing, Reach and Readership by Publishing Facebook Instant Articles

Facebook Instant Articles are a distributed content publishing format developed by Facebook. With it, they hope that news stories of participating publishers, viewed on the Facebook mobile app, will:

  • Load super quickly
  • Be easy to read and uncluttered
  • Be bug and malware free
  • Include advertising (that they might be able to help with and thus get a slice of)

According to Facebook, reader engagement increases when content loads quickly, particularly on mobile. No doubt we can all use our own experience as anecdotal evidence that this is true! Faster loading, says Facebook, means more readers reading more stories. In their FAQ, Facebook says:

“[a]ny publisher — of any size, anywhere in the world — will be able to easily create fast, interactive articles and deliver a better mobile reading experience to people worldwide on Facebook.”

The way FIA works is this: As you publish a story on your site, you also publish an “Instant Article” version. This “shadow” copy is extremely lightweight, in part because of how Facebook is able to serve it (from their huge global network of servers), and in part because many elements of a standard web site aren’t used: site navigation, sidebars, popups, and so on, are not included.

Screenshot of an FIAHere’s a screenshot of an FIA in action from our client Truthdig.com.

FIAs also load more quickly because the Facebook app preloads FIA content, and readers stay inside the Facebook app proper, rather than getting pushed to the Web browser to load the publisher’s Web site.

In practice, here’s how it works:

  1. A publisher creates a custom version of one of their stories and publishes that custom version into Facebook’s system, telling it the URL of the original story. (This can be automated.)
  2. When a reader shares that story either from the original Web site, by pasting in the URL, or by resharing it, Facebook checks to see if there is a FIA that matches that URL.
  3. If there is a FIA, any user of the Facebook app that clicks on the story will see the FIA version without leaving Facebook. If there is no FIA (or if it’s been removed by the publisher), the app opens the story in the browser.

FIAs are for mobile only—Facebook users on regular old computer get the publisher’s Web site, not an FIA.

There are just a few steps to get started:

  1. Sign up for Facebook Instant Articles
  2. Create an RSS feed of stories to be automatically published to Facebook
  3. Submit sample articles for Facebook approval

And that’s it—once you’re accepted, articles get updated as quickly as the RSS feed is updated, and there’s no limit to the number of articles a publisher can include. Stories can be somewhat customized with the publisher’s general look and feel, and publishers can include features like videos, maps, and other interactivity, depending on the content management system that they use.

It’s worth noting that creating an FIA does not publish that article to your Facebook feed automatically—that’s a separate process, and you’ll still be in control of which stories you share and when. Instant Articles are served when anyone (you or any Facebook user) shares an article from your site that has a matching Instant Article.

Advertising and traffic analytics aren’t overlooked, either. Publishers can still serve their own display ads (and keep all revenue), or they earn advertising dollars by using the Facebook Audience Network and splitting revenue with Facebook, or both.

Facebook also allows views of an FIA to be incorporated into analytics tools, like Google Analytics, which means publishers can measure those views in their usual traffic statistics. Additionally, using Facebook’s own tools, publishers can see how many viewers each article gets, how far down viewers scroll, number of shares, and number of clicks.

Screenshot of Instant Article Insights

Facebook Instant Articles do appear to be a useful addition to a good web publishing strategy, but it’s worth paying close attention to the last couple of words in that quote I mentioned earlier:  “on Facebook.” All of the effort you put in to making Facebook articles efficient, unique, or to add special content—could also be put into making your general mobile site streamlined and fast to load. It’s a good idea to do FIAs, but it’s not a bad idea to make your Web site’s mobile delivery just as sharp.

(Last month we talked about publishing in the Apple News Format; next week we’ll discuss Google Accelerated Mobile Pages.)



Publishing from ExpressionEngine to Apple News

About a year ago with the release of iOS 9, Apple introduced the Apple News app, which comes installed (and uninstallable) on iPhones and iPads in the United States, the U.K. and Australia. Apple touts the app as being a “captivating experience” that displays personalized news content from sources and topics you select.

“Captivating” may be accurate but not in the way they intend, although the articles are certainly attractive and easy to navigate. You see, with Apple News, your articles appear not just in the app itself, but are suggested by Siri occasionally depending on your conversation with her, and they also show up when you search on your phone’s main search tool. So you really do have a chance to reach a captive audience, without them even having to subscribe.

When they stories are displayed in Apple News, they look like the source web sites they come from, although they are by no means identical. Compare these screenshots of the same story served on the Guardian.co.uk web site and from within Apple News:

The publishers among you may wonder what the benefit is to providing your content for free to Apple, stripped not only of web site features like your site navigation, but also of your advertising. Apple has thought of that and offers publishers the ability to sell ads within the app using iAd, or to utilize Apple-sold ads (Apple keeps 30% of revenue). You as the publisher retain control over layouts and typography, within some limits. And, according to Apple, your content is likely to be seen by more people than you might otherwise reach, and since it is being collated on the basis of people’s personal preference and active searches, it is more likely to be read by those who come across it.

What it takes to get started: You can either create content using Apple’s News Publisher, a web-based editing tool, or if your site uses a content management system like ExpressionEngine, you can deliver content to Apple automatically via the Apple News API—we’d create a method where, when you publish a regular article, you simultaneously and automatically published to Apple News. There are CMS plug-ins for Drupal, WordPress, Squarespace, and Craft.

Interested? Drop us a line and we’ll give you a quick quote on what it would take to get you set up.


12 Days of Add-on Updates

Tea time for duckiesOh long-suffering, ever-patient friend of Hop Studios, your long dark tea-time of the soul is over.

Those critical ExpressionEngine add-ons you need to make your site as spiffy as you want it to be? They’ve been upgraded!

Starting on Monday and continuing for 12 days, we’re releasing 10 updates, one per day. On the last two days, we’ve got two surprises for you: two brand new add-ons! Here’s a little hint: We’ve been holdin’ off tellin’ ye about th’ brand new incarnations fer good rrreason!

Follow us on Twitter to get notified the moment each new add-on is released, and break out finger sandwiches of celebration! Or the scones. Scones are good, too.

(There are, of course, a few add-ons that don’t make any sense to upgrade. Contact us if your favorite didn’t make the cut, but you simply must have it. We’ll work something out.)


ExpressionEngine 3

ExpressionEngine 3 ReleaseWe’ve been holding off telling you about the brand new incarnation of ExpressionEngine until it had a decent support from third-party developers, and had gone through enough versions for the bugs to be mostly squashed.  Well, ExpressionEngine 3.2 was released this week and we think it’s time for you to take a look at the future of EE.

The star of EE3 is the re-tuned control panel. It now works just as well across all manner of devices, including your smartphone. Built to be more internally consistent as well, the EE3 control panel is better organized, simpler on the surface but more complex underneath, and will have you spending less time figuring how to do something instead of just doing it.

Many of you have had spam issues over the years. EE3 has broader, built-in spam handling with settings for sensitivity, and the spam module will learn over time to better be able to judge the spam contents of your site.

Getting the most horsepower out of your site is critical.  The latest version of EE can run using PHP7, which has significant performance improvements over earlier versions of PHP.

Ellislab also improved the general update process for EE3. The EE core files have been isolated from site-specific files. This doesn’t help so much going from EE2 to EE3, which is still somewhat of an undertaking, but it means that it’ll be much easier going forward to ensure that your site is always up to date.

Since EE3 still has that new car smell, not every third-party addon is compatible yet, so if you want to switch up to EE3, drop us a line and we’ll do an assessment to see if you are able to upgrade. And if you want to get a free demo of the new control panel, we’re happy to give you a tour of that as well.


Job Opening - Web Designer

The position is now filled.

Hop Studios has an immediate opening for a full-time Web designer. You’ll be working on interesting and meaningful projects for a wide range of clients, though we focus on media, non-profits, educational institutions, author and book sites, and small businesses.  We are Canada’s leading ExpressionEngine design and development firm.

The most interesting applicant will have many of the following skills at the “Very Fine”, “Near Mint” or “Mint” level:

  • Strong design experience, at least half of which is in web and interactive design. (Adobe Photoshop is open on your computer right now, right?)
  • Photoshop’s not running because you’re currently using Sketch, Illustrator, Omnigraffle…
  • Success eliciting design guidance from clients who have little to no design background
  • Wireframing, information architecture and content organization skills
  • User interface experience on multiple platforms (desktop, mobile, email)
  • Experience with Bootstrap, Foundation, or other Web design frameworks
  • Experience with CSS, SASS, SCSS, etc.
  • Experience with JQuery and Javascript in general
  • Experience with branding, identity and logo development
  • Skills in adapting print design assets and collateral for Web use
  • Prototyping, collaboration and project management tools such as Basecamp or Invision
  • Experience designing email newsletters
  • Familiarity with the ExpressionEngine and/or other database-driven backend content management systems

Don’t have absolutely everything on that list? That’s OK. We provide on-the-job training to fill out the list if you’ve got a strong majority.

What are the other requirements?

  • A rich design portfolio that showcases some of your best work
  • Self-starter with a creative streak
  • Ability to both take design direction accurately, and to come up with novel solutions that improve on what was asked for
  • Collection of T-shirts with artsy line drawings or pop-culture references
  • Good at hitting deadlines with aplomb
  • Excellent written communication skills
  • A long-term interest in keeping on top of technology trends and tools

Who can apply?

  • you must want a permanent position (i.e. not part-time or contract)
  • you must be able to start immediately (i.e. you can give 2 weeks notice now)
  • you should live, or be willing to live, in Vancouver, BC, Canada
  • you should be able to work in Canada

Who are we?

  • We’re a 12-year-old company with a stable staff, established history and plenty of growth potential.
  • We’re fun to work with (if we’re allowed to say that about ourselves [we are -ed.]), and our deep client roster are all excellent to work with as well; there are no waterfall death marches here.
  • We are located in the Gastown district of Vancouver, and we offer an open, collaborative work environment.
  • We pay a competitive wage tied to experience.
  • We are an equal opportunity employer that values diversity. We do not discriminate on the basis of race, religion, color, national origin, gender, sexual orientation, age, marital status, veteran status, or disability status. Or anything else.
  • We work hard, but also have lives outside of work.

To apply, send a cover letter, your resume, and links to Web sites you’ve built. Send them to .(JavaScript must be enabled to view this email address).

And don’t send your resume as a Word document. We mean it.


more posts from February 2016 More From February 2016

Web Design and ExpressionEngine Development Consulting - Vancouver (BC) Canada