Question

我有“.com”网页和“facebook页面”。当从我的“Facebook页面”共享链接并且有人在移动设备中打开链接时，它会打开chrome bwoser并显示内容。

但是，我注意到其他facebook页面的一些链接在打开时只从右到左滑动并显示内容。

我试过看看但是如何为我的页面实现同样的效果，但我什么都没发现。

有人能指出我如何做到这一点的正确方向吗？教程，文档或有关它的任何信息。 Image description

Answer 1

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

<!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/

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

1 个答案: