$blog++

Optimize your content for flipboard

Oct/14/2013 2 min read by Marco Monteiro

Ever since I stopped using normal RSS clients I started using apps like Flipboard to read my content. Since then, I notice that some content coming from some sources would look amazing, and some would look awful. So I've done some research and noticed that you can improve how your content looks on flipboard.

Here's a list of classes that you can add to your markup to make it happen.

  • flipboard-remove — will ignore any element with this class
  • flipboard-keep — will use this element in the article e.g tagging a paragraph with this will insure it remains part of the excerpt
  • flipboard-image — will use the element as an image
  • flipboard-title — will use as title
  • flipboard-subtitle — will use subtitle
  • flipboard-author — use as author
  • flipboard-copyright – set copyright
  • flipboard-date — set the date of the article
  • flipboard-caption — set as caption for an image; must be immediately after the image
  • flipboard-startArticle and flipboard-endArticle — only consider the markup between flipboard-startArticle and flipboard-endArticle

Simple example for date using wardrobe:

<div class="date flipboard-date">{{ date("M/d/Y", strtotime($post->publish_date)) }}</div>

This way you can control a bit more on what content should be displayed on Flipboard.

x

Like it? Tweet it.

"Optimize your content for flipboard" via @marcogmonteiro