Optimize your content for flipboard

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

— 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

— 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

— will use the element as an image flipboard-title — will use as title

— will use as title flipboard-subtitle — will use subtitle

— will use subtitle flipboard-author — use as author

— use as author flipboard-copyright – set copyright

– set copyright flipboard-date — set the date of the article

— set the date of the article flipboard-caption — set as caption for an image; must be immediately after the image

— 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"></div>

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