In order to help publishers convert their articles more easily to Instant Articles,Facebook had launched the Instant Articles Builder. This new tool is an open source desktop app that enables publishers to generate Instant Articles from their existing mobile site without the need to write any code. This will make it easier for publishers without engineering resources or with limited technical expertise to on-board onto Instant Articles.
With the Instant Articles Builder, you are able to specify the template for your Instant Articles simply by pointing and clicking on the visual elements of your mobile web articles. This template is used to map the content in your mobile web articles to Instant Articles, which will then be rendered to your readers within Facebook’s mobile apps.
Once you’re finished defining your template, then add a meta tag on your site that links to the configuration file in order to have your articles automatically ingested as Instant Articles when they are shared on Facebook. To learn more about how to get started visit: http://facebook.github.io/instant-articles-builder.
Installation
Download the package for Mac and Windows or build the package on your environment from the source.
Once installed, start the Instant Articles Builder application. You should see a screen like this:
UI Components
The Instant Articles Builder resembles a web browser with few more specific features.
- Address bar: where you type the URL for the article used to generate the rules.
- Web browser: where you see the article rendered just like in any regular web browser.
- Rules management area: Where you save, edit and open rule sets; and configure each single rule.
- Preview: Where you can see the Instant Article markup generated with your rules, or the preview of the rendered Instant Article.
1. Address bar
The address bar works exactly as in your web browser, where you can type the exact article URL you want or type the website home page and then navigate to a sample article. To load the page you should hit ENTER or the “Go!” button.
2. Web browser
This portion of the tool will render the web page just like any regular browser and can be used to navigate to other articles by clicking on any link.
3. Template configuration area
The template configuration area is where you connect your template to your mobile website.
File toolbar
The main project management toolbar holds 3 actions:
- New: Resets and starts from scratch a new template. Recommended to be used every time you change domains or navigate to a new website that holds a different HTML structure.
- Open: Loads a previously saved template. You will need to pick the file from your file system. The files typically have the .json extension.
- Save: Saves the template to a file.
Elements
Each template element will match to a component of your site. The elements are matched from bottom up, so if you want a element to be matched before some others, you must ensure that element is on the bottom. To perform the reordering you can drag-and-drop the elements by clicking and holding on the element name.
Currently, the tool only supports CSS Selectors. While the Instant Articles SDK also supports XPath selectors, these are not yet supported by the Instant Articles Builder.
Comments
comments