インスタント記事の作成

このガイドでは、インスタント記事ドキュメントの基本的な構造を説明します。さらに、標準のウェブベースコンテンツのインスタント記事バージョンの作成方法についても説明します。インスタント記事マークアップの使用方法を示したサンプル記事も用意されています。

インスタント記事はHTMLドキュメントであり、モバイルで使用した場合のパフォーマンスの高速化、多彩なストーリーテリング機能、ブランドイメージで統一したデザイン、カスタマイズされたビジュアル表示に最適化されています。インスタント記事では標準化されたマークアップ言語を使用して、記事にスタイルと機能を適用します。このマークアップは自動処理が可能で、コンテンツフィード全体を大規模に自動公開できます。また、手動による適用も可能であり、ユニークなインスタント記事やリッチメディア要素を活用してカスタマイズした記事を作成できます。このガイドはインスタント記事マークアップの概要を説明するものですが、詳細なガイドについては、「インスタント記事のコードサンプル」をご覧ください。

このドキュメントに記載のインスタント記事ドキュメントの構造が理解できたら、「インスタント記事の公開」ガイドで、Facebook上に手動または自動的にインスタント記事を公開する方法をご確認ください。

要件

インスタント記事はFacebookページのフレームワーク内で管理されます。インスタント記事の公開を始めるには、次を用意しておく必要があります。

  • 既存のFacebookページ。
  • ページの管理者または編集者の役割。

ページをまだ作成していない場合は、新しいページを作成してください

インスタント記事はiPhoneとAndroidデバイスでご利用いただけます。必要なソフトウェアは、iPhone用Facebookバージョン30.0とiOS 7.0以降、またはAndroid用Facebookバージョン57とAndroid Jelly Bean以降です。

インスタント記事の書式設定方法

インスタント記事はHTMLを使用して作成されるため、標準のウェブ公開に似た方法でページ要素を指定します。ほとんどの場合、発行元は自分のウェブベース記事で作成したコードを再利用して、インスタント記事の機能を持つバージョンを生成できます。

スタイル設定にCSSを使用することはできません。スタイルの作成と修正方法について詳しくは、Facebookのデザインガイドをご覧ください。

1.必要な記事要素

各インスタント記事には、記事を閲覧者にどのように表示するかを指定するための基本情報が必要です。このメタデータはHTMLドキュメントの<head>に定義され、正規URL (インスタント記事とそれに該当するウェブベースのコンテンツをリンク)や、コンテンツに適用される特定のスタイルなどの情報が含まれます。

カノニカルリンクは各インスタント記事の<head>に、絶対URLで指定する必要があります。このURLがないと、FacebookにはRSSフィードの<item>に定義される正規リンクが表示されます。記事の<head>にもRSSフィードにもカノニカルリンクが指定されていない場合は、Facebookはその記事を無視します。

<head>
  <meta charset="utf-8">
  <meta property="op:markup_version" content="v1.0">

  <!-- The URL of the web version of your article --> 
  <link rel="canonical" href="http://example.com/article.html">
  
  <!-- The style to be used for this article --> 
  <meta property="fb:article_style" content="myarticlestyle">
</head>

インスタント記事の記事レベルの構成の詳しい設定方法については、「Instant Articles Format Reference (インスタント記事のフォーマットのリファレンス)」をご覧ください。

2. 記事ヘッダーの指定

閲覧者がインスタント記事を初めて開いたときには、本文コンテンツのビジュアル「カバー」の役割を持つ記事ヘッダーが表示されます。各インスタント記事のヘッダーは、<header>ブロックの<article>セクションの要素で指定します。このブロックはHTMLドキュメントの<body>内に記述します。これらの要素には次の項目が含まれます。

  • メディアタイプ:画像または動画
  • タイトル
  • サブタイトル
  • 作成者
  • キッカー
  • 公開日時
  • 修正日時

記事に表示する公開日時の要素(曜日、日、月、年、時間)は、スタイルエディターツールで選択できます。この機能について詳しくは、インスタント記事のデザインガイドの「スタイルの作成と修正」セクションをご覧ください。

<body>
  <article>
    <header>
      <!-- The cover image shown inside your article --> 
      <figure>
        <img src="http://mydomain.com/path/to/img.jpg" />
        <figcaption>This image is amazing</figcaption>
      </figure>
      
      <!-- The title and subtitle shown in your article -->
      <h1> Title </h1>
      <h2> Subtitle </h2>

      <!-- A kicker for your article -->
      <h3 class="op-kicker">
        This is a kicker
      </h3>

      <!-- The author of your article -->
      <address>
        <a rel="facebook" href="http://facebook.com/brandon.diamond">Brandon Diamond</a>
        Brandon is a avid zombie hunter.
      </address>

      <!-- The published and last modified time stamps -->
      <time class="op-published" dateTime="2014-12-11T04:44:16Z">December 11th, 4:44 PM</time>
      <time class="op-modified" dateTime="2014-12-11T04:44:16Z">December 11th, 4:44 PM</time>
    </header>
  </article>
</body>

インスタント記事のカバーの構成の詳しい設定方法については、「インスタント記事のコードサンプル」をご覧ください。

3. 本文コンテンツの書式設定

ウェブベース記事の要素を定義する標準のHTML要素によって、対応するインスタント記事バージョンの要素も定義されます。記事の本文テキストは<p>タグを使用して定義され、画像と動画コンテンツは<figure>要素を使用して定義されます。

<body>
  <article>
    <!-- Body text for your article -->
    <p> This is some Instant Article content. </p> 

    <!-- A video within your article -->
    <figure>
      <video>
        <source src="http://mydomain.com/path/to/video.mp4" type="video/mp4" />
      </video>
    </figure>

    <!-- An image within your article -->
    <figure>
      <img src="http://mydomain.com/path/to/img.jpg" />
      <figcaption>This image is amazing</figcaption>
    </figure>

  </article>
</body>

4. リッチメディア要素の作成

記事の本文テキスト以外にも、インスタント記事ではインタラクティブマップなどのリッチメディア要素も使用できます。これらの要素はシンプルなHTMLを使用して実装されます。インスタント記事にネイティブで実装することにより、閲覧者にわかりやすいサービスを提供できます。次のような特殊要素を使用できます。

  • スライドショー
  • インタラクティブマップ
  • 位置情報タグを付けたメディア
<body>
  <article>
    <!-- A slideshow within your article -->
    <figure class="op-slideshow">
      <figure>
        <img src="http://mydomain.com/path/to/img1.jpg" />
      </figure>
      <figure>
        <img src="http://mydomain.com/path/to/img2.jpg" />
      </figure>
      <figure>
        <img src="http://mydomain.com/path/to/img3.jpg" />
      </figure>
    </figure>
        

    <!-- A map within your article -->
    <figure class="op-map">
      <script type="application/json" class="op-geotag">  
        {
          "type": "Feature",
          "geometry": 
            {
              "type": "Point",
              "coordinates": [ [23.166667, 89.216667], [23.166667, 89.216667] ]    
            },    
          "properties": 
            {      
              "title": "Jessore, Bangladesh",      
              "radius": 750000,      
              "pivot": true,      
              "style": "satellite",
            }
        }  
      </script>
    </figure>

    <!-- A geotagged image -->
    <figure>
      <img src="http://mydomain.com/path/to/img.jpg" />
      <script type="application/json" class="op-geotag">  
        {
          "type": "Feature",    
          "geometry":
            {      
              "type": "Point",
              "coordinates": [ [23.166667, 89.216667], [23.166667, 89.216667] ] 
            },    
          "properties":
            {
              "title": "Jessore, Bangladesh",
              "radius": 750000,
              "pivot": true,
              "style": "satellite",
            }  
        } 
      </script>
    </figure>

    <!-- An image-->
    <figure>
      <img src="http://foo.com/1.jpg"/>
      <figcaption>Image caption</figcaption>
    </figure>

  </article>
</body>

5. 埋め込みメディアの追加

インスタント記事には外部メディアを直接埋め込むことができます。外部メディアには、ウェブサイトのインタラクティブ画像や、ソーシャルネットワークのコンテンツ、広告などを使用できます。埋め込みコンテンツは標準のHTML <figure>要素を使用して定義します。ここに挙げたようなさまざまなタイプのコンテンツに対して特定のクラスが提供されます。

<body>
  <article>
    <!-- An interactive graphic -->
    <figure class="op-interactive">
      <iframe class="no-margin" src="http://example.com/custom-interactive" height="60"></iframe>
    </figure>

    <!-- A post from Instagram -->
    <figure class="op-social">
      <iframe>
        <!-- Include Instagram embed code here -->
      </iframe>
    </figure>

    <!-- An advertisement -->
    <figure class="op-ad">
      <iframe src="https://www.adserver.com/ss;adtype=banner320x50" height="60" width="320"></iframe>
    </figure>

  </article>
</body>

6. ニュースフィードプレビューの構成

インスタント記事が閲覧者のFacebookのニュースフィードに表示される場合は、記事のプレビューとして表示されます。この方法は、ニュースフィードに表示される記事のウェブバージョンの記事プレビューと非常によく似ています。デフォルトでは、インスタント記事のニュースフィードプレビューは、記事のウェブベースバージョンと同じタイトル、説明、画像とともに表示されます。この情報は、記事のウェブバージョンの<head>内でOpen Graphメタタグを使用して定義します。

この情報は、記事のインスタント記事バージョンのマークアップで直接定義することはできません。記事のウェブバージョン内に設定する必要があります。

<head>
  <meta property="og:title" content="Article title">
  <meta property="og:description" content="Article description">
  <meta property="og:image" content="http://myserver.com/image.jpg">
</head>

記事の公開と編集

セキュアなRSSフィードを使用すれば、Facebookでのインスタント記事の公開を自動化できます。さらに、Facebookにはウェブベースの記事エディタが備わっています。このエディタにはFacebookページからアクセスできます。エディタツールを使用すれば、インスタント記事を手動で編集して公開できます。

インスタント記事を公開する方法について詳しくは、「Publishing Instant Articles guide (インスタント記事の公開ガイド)」をご覧ください。

サンプル記事

このサンプル記事では、典型的なインスタント記事の構造を示し、各コンポーネントの書式設定方法の概要を説明します。この記事は説明およびテスト目的でのみ提供されるものです。

自分のインスタント記事でこの記事のライブデモを表示するには、次のようにいくつか変更が必要です。

  • カノニカルURLのドメインを、自分のウェブ記事を公開するドメインに合わせて変更します。
  • 画像、動画、広告サンプルのダミーのソースURLを、自分のサイトのライブコンテンツを指すように変更します。
<!doctype html>
<html lang="en" prefix="op: http://media.facebook.com/op#">
  <head>
    <meta charset="utf-8">
    <!-- URL of the web version of this article -->
    <!-- TODO: Change the domain to match the domain of your website -->    
    <link rel="canonical" href="http://example.com/article.html">
    <meta property="op:markup_version" content="v1.0">
  </head>
  <body>
    <article>
      <header>
        <!-- The title and subtitle shown in your Instant Article -->
        <h1>Article Title</h1>
        <h2>Article Subtitle</h2>

        <!-- The date and time when your article was originally published -->
        <time class="op-published" datetime="2014-11-11T04:44:16Z">November 11th, 4:44 PM</time>

        <!-- The date and time when your article was last updated -->
        <time class="op-modified" dateTime="2014-12-11T04:44:16Z">December 11th, 4:44 PM</time>

        <!-- The authors of your article -->
        <address>
          <a rel="facebook" href="http://facebook.com/brandon.diamond">Brandon Diamond</a>
          Brandon is a avid zombie hunter.
        </address>
        <address>
          <a>TR Vishwanath</a>
          Vish is a scholar and a gentleman.
        </address>

        <!-- The cover image shown inside your article --> 
        <!-- TODO: Change the URL to a live image from your website -->    
        <figure>
          <img src="http://mydomain.com/path/to/img.jpg" />
          <figcaption>This image is amazing</figcaption>
        </figure>   

        <!-- A kicker for your article --> 
        <h3 class="op-kicker">
          This is a kicker
        </h3>        

      </header>

      <!-- Article body goes here -->

      <!-- Body text for your article -->
      <p> Article content </p> 

      <!-- A video within your article -->
      <!-- TODO: Change the URL to a live video from your website -->    
      <figure>
        <video>
          <source src="http://mydomain.com/path/to/video.mp4" type="video/mp4" />
        </video>
      </figure>

      <!-- An ad within your article -->
      <!-- TODO: Change the URL to a live ad from your website -->    
      <figure class="op-ad">
        <iframe src="https://www.adserver.com/ss;adtype=banner320x50" height="60" width="320"></iframe>
      </figure>

      <!-- Analytics code for your article -->
      <figure class="op-tracker">
          <iframe src="" hidden></iframe>
      </figure>

      <footer>
        <!-- Credits for your article -->
        <aside>Acknowledgements</aside>

        <!-- Copyright details for your article -->
        <small>Legal notes</small>
      </footer>
    </article>
  </body>
</html>