如何实现facebook新页面链接ui视图？答案

【问题标题】：How to achieve facebook new page link ui view?如何实现facebook新页面链接ui视图？
【发布时间】：2017-10-01 10:04:30
【问题描述】：

我有我的“.com”网页和一个“Facebook 页面”。当从我的“facebook 页面”分享链接并且有人在手机中打开链接时，它会打开 chrome bwoser 并显示内容。

但是，我注意到来自其他 Facebook 页面的某些链接在打开时仅从右向左滑动并显示内容。

我试图查看它，但是关于如何为我的页面实现同样的效果，但我什么也没找到。

有人可以为我指出正确的方向吗？教程、文档或任何相关信息。 Image description

【问题讨论】：

标签： facebook hyperlink android-viewpager

【解决方案1】：

以下示例说明了即阅文的高级结构。有关每个元素的更多详细信息，请参阅本文档“元素”部分中的具体详细信息。

<!doctype html>
<html lang="en" prefix="op: http://media.facebook.com/op#">
  <head>
    <meta charset="utf-8">
    <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 an avid zombie hunter.
        </address>
        <address>
          <a>TR Vishwanath</a>
          Vish is a scholar and a gentleman.
        </address>

        <!-- The cover image shown inside your article --> 
        <figure>
          <img src="http://example.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 -->
      <figure>
        <video>
          <source src="http://example.com/path/to/video.mp4" type="video/mp4" />
        </video>
      </figure>

      <!-- An ad within your article -->
      <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>

另外，你可以看看这个教程 - https://developers.facebook.com/docs/instant-articles/faq/

【讨论】：