fb-instant-articles icon indicating copy to clipboard operation
fb-instant-articles copied to clipboard

Instant Article Shows Only the Image

Open alaa-alsalehi opened this issue 7 years ago • 2 comments

my users tell me this instant article shows only the image this is an example for that https://www.facebook.com/zakibookcom/posts/2161479423922401 when I check the instant article on my page there is no error or even warning on the article and the content of the article is full there also when I check my wordpress article Instant Articles for WP shows every thing fine

any idea why is that happened? BTW this is my original wordpress article -source markup-

<p>&nbsp;</p>
<article>
<section>
<h1 style="text-align: center; color: #ff00ff;">كب كيك غ شكل قوس قزح للاطفال ( اوردر اليوم )</h1>
</section>
<section><img class="aligncenter wp-image-107667 size-large" src="http://www.zakibook.com/wp-content/uploads/2018/09/pp-696-1024x768.jpeg" alt="كب كيك غ شكل قوس قزح للاطفال ( اوردر اليوم )" width="840" height="630" srcset="https://www.zakibook.com/wp-content/uploads/2018/09/pp-696-1024x768.jpeg 1024w, https://www.zakibook.com/wp-content/uploads/2018/09/pp-696-300x225.jpeg 300w, https://www.zakibook.com/wp-content/uploads/2018/09/pp-696-768x576.jpeg 768w" sizes="(max-width: 840px) 100vw, 840px" /></section>
<h2 style="color: #800080;">كب كيك غ شكل قوس قزح للاطفال ( اوردر اليوم )</h2>
<section>كب كيك غ شكل قوس قزح للاطفال ( اوردر اليوم ), معكم صديقة زاكي الشيف الموهوبة ,<strong><span style="color: #ff6600;">Ameena qadan</span></strong></section>
<section>
<h3 style="color: #00ff00;">المقادير</h3>
<ul style="padding: 0px;">
<li>مقدار اي نوع كيك</li>
<li>كريمة دريم ويب</li>
<li>كاندي ع شكل قوس قزح</li>
<li>صبغة زرقاء</li>
</ul>
</section>
<section>
<h3 style="color: #00ff00;">الخطوات</h3>
<p>بعمل الكيك بالطريقة المعتادة وبشويها بقوالب الكب كيك ولما يستوي ويبرد بدهن الكب كيك بكريمة بكون حاطة عليها صبغة زرقا وجزء من الكريمة بخليها ابيض وبعدين بثبت الكاندي بالكيك وبعدين بحط،عند الكاندي كريمة بيضا ع اساس تبين متل الغيوم</p>
<p>متل ماهو مبين بالصور</p>
<p>وصحتين وعافية</p>
<p><img class="aligncenter wp-image-107668 size-large" src="http://www.zakibook.com/wp-content/uploads/2018/09/pp-697-1024x768.jpeg" alt="" width="840" height="630" srcset="https://www.zakibook.com/wp-content/uploads/2018/09/pp-697-1024x768.jpeg 1024w, https://www.zakibook.com/wp-content/uploads/2018/09/pp-697-300x225.jpeg 300w, https://www.zakibook.com/wp-content/uploads/2018/09/pp-697-768x576.jpeg 768w" sizes="(max-width: 840px) 100vw, 840px" /></p>
<p><img class="aligncenter wp-image-107669 size-large" src="http://www.zakibook.com/wp-content/uploads/2018/09/pp-698-768x1024.jpeg" alt="" width="768" height="1024" srcset="https://www.zakibook.com/wp-content/uploads/2018/09/pp-698-768x1024.jpeg 768w, https://www.zakibook.com/wp-content/uploads/2018/09/pp-698-225x300.jpeg 225w" sizes="(max-width: 768px) 100vw, 768px" /></p>
</section>
</article>

and this is the transformed markup

<html dir="rtl">
  <head>
    <link rel="canonical" href="http://www.zakibook.com/post/107670/%d9%83%d8%a8-%d9%83%d9%8a%d9%83-%d8%ba-%d8%b4%d9%83%d9%84-%d9%82%d9%88%d8%b3-%d9%82%d8%b2%d8%ad-%d9%84%d9%84%d8%a7%d8%b7%d9%81%d8%a7%d9%84-%d8%a7%d9%88%d8%b1%d8%af%d8%b1-%d8%a7%d9%84%d9%8a%d9%88/"/>
    <meta charset="utf-8"/>
    <meta property="op:generator" content="facebook-instant-articles-sdk-php"/>
    <meta property="op:generator:version" content="1.9.2"/>
    <meta property="op:generator:application" content="facebook-instant-articles-wp"/>
    <meta property="op:generator:application:version" content="4.1.1"/>
    <meta property="op:generator:transformer" content="facebook-instant-articles-sdk-php"/>
    <meta property="op:generator:transformer:version" content="1.9.2"/>
    <meta property="op:markup_version" content="v1.0"/>
    <meta property="fb:use_automatic_ad_placement" content="enable=true ad_density=default"/>
    <meta property="fb:article_style" content="default"/>
  </head>
  <body>
    <article>
      <header>
        <figure>
          <img src="http://www.zakibook.com/wp-content/uploads/2018/09/pp-696.jpeg"/>
          <figcaption>كب كيك غ شكل قوس قزح للاطفال ( اوردر اليوم )</figcaption>
        </figure>
        <h1>كب كيك غ شكل قوس قزح للاطفال ( اوردر اليوم )</h1>
        <time class="op-published" datetime="2018-09-10T18:00:42+03:00">September 10th, 6:00pm</time>
        <time class="op-modified" datetime="2018-10-03T10:39:57+03:00">October 3rd, 10:39am</time>
        <address><a href="http://dj5WtZrUVuM:APA91bEzq1cGzrIc16k2IRpvWPEJ1buog-vYLSAZuu0xxb2RAmr1nwbb79iyk-vWsAQGPJaT3sCLaNxtzGhC_viN7_ZmoqciCD_EL361UVIijX2j0Sd1sQnk2vk06kjwBc4I78_talaFyGRRAFao4OEEQBupZF-Y9Q.441181c868059abb.zakibook.com">Ameena qadan</a></address>
        <figure class="op-ad">
          <iframe src="https://www.facebook.com/adnw_request?placement=159174351424205_159174381424202&adtype=banner300x250" width="300" height="250"></iframe>
        </figure>
      </header>
      <p> </p>
      <h1>كب كيك غ شكل قوس قزح للاطفال ( اوردر اليوم )</h1>
      <figure data-feedback="fb:likes">
        <img src="http://www.zakibook.com/wp-content/uploads/2018/09/pp-696-1024x768.jpeg"/>
      </figure>
      <h2>كب كيك غ شكل قوس قزح للاطفال ( اوردر اليوم )</h2>
      <p>كب كيك غ شكل قوس قزح للاطفال ( اوردر اليوم ), معكم صديقة زاكي الشيف الموهوبة ,<b>Ameena qadan</b></p>
      <h2>المقادير</h2>
      <ul>
        <li>مقدار اي نوع كيك</li>
        <li>كريمة دريم ويب</li>
        <li>كاندي ع شكل قوس قزح</li>
        <li>صبغة زرقاء</li>
      </ul>
      <h2>الخطوات</h2>
      <p>بعمل الكيك بالطريقة المعتادة وبشويها بقوالب الكب كيك ولما يستوي ويبرد بدهن الكب كيك بكريمة بكون حاطة عليها صبغة زرقا وجزء من الكريمة بخليها ابيض وبعدين بثبت الكاندي بالكيك وبعدين بحط،عند الكاندي كريمة بيضا ع اساس تبين متل الغيوم</p>
      <p>متل ماهو مبين بالصور</p>
      <p>وصحتين وعافية</p>
      <figure data-feedback="fb:likes">
        <img src="http://www.zakibook.com/wp-content/uploads/2018/09/pp-697-1024x768.jpeg"/>
      </figure>
      <figure data-feedback="fb:likes">
        <img src="http://www.zakibook.com/wp-content/uploads/2018/09/pp-698-768x1024.jpeg"/>
      </figure>
      <footer>
        <small>زاكي 2014-2018</small>
      </footer>
    </article>
  </body>
</html>

and this is what we have on instant article on our page

<!doctype html><html dir="rtl">
<head>
<link rel="canonical" href="https://www.zakibook.com/post/107670/%d9%83%d8%a8-%d9%83%d9%8a%d9%83-%d8%ba-%d8%b4%d9%83%d9%84-%d9%82%d9%88%d8%b3-%d9%82%d8%b2%d8%ad-%d9%84%d9%84%d8%a7%d8%b7%d9%81%d8%a7%d9%84-%d8%a7%d9%88%d8%b1%d8%af%d8%b1-%d8%a7%d9%84%d9%8a%d9%88/" />
<meta charset="utf-8" />
<meta property="op:generator" content="facebook-instant-articles-sdk-php" />
<meta property="op:generator:version" content="1.9.2" />
<meta property="op:generator:application" content="facebook-instant-articles-wp" />
<meta property="op:generator:application:version" content="4.1.1" />
<meta property="op:generator:transformer" content="facebook-instant-articles-sdk-php" />
<meta property="op:generator:transformer:version" content="1.9.2" />
<meta property="op:markup_version" content="v1.0" />
<meta property="fb:use_automatic_ad_placement" content="enable=true ad_density=default" />
<meta property="fb:article_style" content="default" />
</head>
<body>
<article>
<header>
<figure>
<img src="https://www.zakibook.com/wp-content/uploads/2018/09/pp-696.jpeg" />
<figcaption>كب كيك غ شكل قوس قزح للاطفال ( اوردر اليوم )</figcaption>
</figure>
<h1>كب كيك غ شكل قوس قزح للاطفال ( اوردر اليوم )</h1>
<time class="op-published" datetime="2018-09-10T18:00:42+03:00">September 10th, 6:00pm</time>
<time class="op-modified" datetime="2018-10-03T10:39:57+03:00">October 3rd, 10:39am</time>
<address><a href="http://dj5WtZrUVuM:APA91bEzq1cGzrIc16k2IRpvWPEJ1buog-vYLSAZuu0xxb2RAmr1nwbb79iyk-vWsAQGPJaT3sCLaNxtzGhC_viN7_ZmoqciCD_EL361UVIijX2j0Sd1sQnk2vk06kjwBc4I78_talaFyGRRAFao4OEEQBupZF-Y9Q.441181c868059abb.zakibook.com">Ameena qadan</a></address>
<h3 class="op-kicker">كيكات</h3>
<figure class="op-ad">
<iframe src="https://www.facebook.com/adnw_request?placement=159174351424205_159174381424202&adtype=banner300x250" width="300" height="250"></iframe>
</figure>
</header>
<p> </p>
<h1>كب كيك غ شكل قوس قزح للاطفال ( اوردر اليوم )</h1>
<figure data-feedback="fb:likes">
<img src="http://www.zakibook.com/wp-content/uploads/2018/09/pp-696-1024x768.jpeg" />
</figure>
<h2>كب كيك غ شكل قوس قزح للاطفال ( اوردر اليوم )</h2>
<p>كب كيك غ شكل قوس قزح للاطفال ( اوردر اليوم ), معكم صديقة زاكي الشيف الموهوبة ,<b>Ameena qadan</b></p>
<h2>المقادير</h2>
<ul>
<li>مقدار اي نوع كيك</li>
<li>كريمة دريم ويب</li>
<li>كاندي ع شكل قوس قزح</li>
<li>صبغة زرقاء</li>
</ul>
<h2>الخطوات</h2>
<p>بعمل الكيك بالطريقة المعتادة وبشويها بقوالب الكب كيك ولما يستوي ويبرد بدهن الكب كيك بكريمة بكون حاطة عليها صبغة زرقا وجزء من الكريمة بخليها ابيض وبعدين بثبت الكاندي بالكيك وبعدين بحط،عند الكاندي كريمة بيضا ع اساس تبين متل الغيوم</p>
<p>متل ماهو مبين بالصور</p>
<p>وصحتين وعافية</p>
<figure data-feedback="fb:likes">
<img src="http://www.zakibook.com/wp-content/uploads/2018/09/pp-697-1024x768.jpeg" />
</figure>
<figure data-feedback="fb:likes">
<img src="http://www.zakibook.com/wp-content/uploads/2018/09/pp-698-768x1024.jpeg" />
</figure>
<footer>
<small>زاكي 2014-2018</small>
</footer>
</article>
</body>
</html>

I use wordpress 4.9.6 and Instant Articles for WP 4.1.1

alaa-alsalehi avatar Oct 05 '18 18:10 alaa-alsalehi

Could be this? https://developers.facebook.com/support/bugs/250253175687554/

kkszysiu avatar Oct 11 '18 20:10 kkszysiu

@kkszysiu but my instant articles doe not contains any video

anyway this how it looks on some of my articles 44057782_306731393487902_3962850037779660800_n

BTW I use those Custom transformer rules { "rules": [{ "class": "TextNodeRule" }, { "class": "PassThroughRule", "selector": "html" }, { "class": "PassThroughRule", "selector": "div" },{ "class": "PassThroughRule", "selector": "article" }, { "class": "ParagraphRule", "selector": "section:nth-of-type(3)" }, { "class": "ParagraphRule", "selector": "section>p" },{ "class": "PassThroughRule", "selector": "section:not(:nth-of-type(3))" }, { "class": "PassThroughRule", "selector": "head" }, { "class": "PassThroughRule", "selector": "body" }, { "class": "PassThroughRule", "selector" : "code" },{ "class": "PassThroughRule", "selector" : "del" },{ "class": "PassThroughRule", "selector" : "mark" }, { "class": "PassThroughRule", "selector" : "span" }, { "class": "PassThroughRule", "selector": "g" }, { "class": "ParagraphRule", "selector": "p" }, { "class": "FooterSmallRule", "selector": "small" }, { "class": "LineBreakRule", "selector": "br" }, { "class": "AnchorRule", "selector": "a", "properties": { "anchor.href": { "type": "string", "selector": "a", "attribute": "href" }, "anchor.rel": { "type": "string", "selector": "a", "attribute": "rel" } } }, { "class": "BoldRule", "selector": "b" }, { "class": "BoldRule", "selector": "strong" }, { "class": "ItalicRule", "selector": "i" }, { "class": "ItalicRule", "selector": "em" }, { "class": "BlockquoteRule", "selector": "blockquote" }, { "class": "PassThroughRule", "selector": "blockquote p" }, { "class": "ItalicRule", "selector": "cite" }, { "class": "ImageRule", "selector": "img", "properties": { "image.url": { "type": "string", "selector": "img", "attribute": "src" } } }, { "class": "ImageRule", "selector": "//a[img and not(*[not(self::img)])]", "properties": { "image.url": { "type": "string", "selector": "img", "attribute": "src" } } }, { "class": "ListItemRule", "selector" : "li" }, { "class": "ListElementRule", "selector" : "ul" }, { "class": "ListElementRule", "selector" : "ol" }, { "class": "BlockquoteRule", "selector" : "blockquote" }, { "class": "H1Rule", "selector" : "h1", "properties" : { "h1.class" : { "type" : "string", "selector" : "link", "attribute": "class" } } }, { "class": "H1Rule", "selector" : "title" }, { "class": "H2Rule", "selector" : "h2", "properties" : { "h2.class" : { "type" : "string", "selector" : "link", "attribute": "class" } } }, { "class": "H2Rule", "selector" : "h3,h4,h5,h6" }, { "class": "InteractiveRule", "selector" : "blockquote.instagram-media", "properties" : { "interactive.iframe" : { "type" : "multiple", "children": [ { "type": "element", "selector": "blockquote" }, { "type": "next-sibling-element-of", "selector": "blockquote" } ] } } }, { "class": "InteractiveRule", "selector" : "blockquote.twitter-tweet", "properties" : { "interactive.iframe" : { "type" : "multiple", "children": [ { "type": "element", "selector": "blockquote" }, { "type": "next-sibling-element-of", "selector": "blockquote" } ] } } }, { "class": "IgnoreRule", "selector" : "script" }, { "class": "InteractiveRule", "selector" : "iframe", "properties" : { "interactive.url" : { "type" : "string", "selector" : "iframe", "attribute": "src" }, "interactive.width" : { "type" : "int", "selector" : "iframe", "attribute": "width" }, "interactive.height" : { "type" : "int", "selector" : "iframe", "attribute": "height" }, "interactive.iframe" : { "type" : "children", "selector" : "iframe" } } }, { "class": "InteractiveRule", "selector" : "div.embed", "properties" : { "interactive.iframe" : { "type" : "children", "selector" : "div.embed" }, "interactive.height" : { "type" : "int", "selector" : "iframe", "attribute": "height" }, "interactive.width" : { "type" : "int", "selector" : "iframe", "attribute": "width" } } }, { "class": "InteractiveRule", "selector" : "div.interactive", "properties" : { "interactive.iframe" : { "type" : "children", "selector" : "div.interactive" }, "interactive.height" : { "type" : "int", "selector" : "iframe", "attribute": "height" }, "interactive.width" : { "type" : "int", "selector" : "iframe", "attribute": "width" } } }, { "class": "InteractiveRule", "selector" : "//div[@class='embed' and iframe]", "properties" : { "interactive.url" : { "type" : "string", "selector" : "iframe", "attribute": "src" }, "interactive.iframe" : { "type" : "children", "selector" : "iframe", "attribute": "src" }, "interactive.width" : { "type" : "int", "selector" : "iframe", "attribute": "width" }, "interactive.height" : { "type" : "int", "selector" : "iframe", "attribute": "height" } } }, { "class": "InteractiveRule", "selector" : "//div[@class='interactive' and iframe]", "properties" : { "interactive.url" : { "type" : "string", "selector" : "iframe", "attribute": "src" }, "interactive.iframe" : { "type" : "children", "selector" : "iframe" }, "interactive.height" : { "type" : "int", "selector" : "iframe", "attribute": "height" }, "interactive.width" : { "type" : "int", "selector" : "iframe", "attribute": "width" } } }, { "class": "InteractiveRule", "selector" : "table", "properties" : { "interactive.iframe" : { "type" : "element", "selector" : "table" }, "interactive.height" : { "type" : "int", "selector" : "table", "attribute": "height" }, "interactive.width" : { "type" : "int", "selector" : "iframe", "attribute": "width" } } }, { "class": "SlideshowImageRule", "selector" : "figure", "properties" : { "image.url" : { "type" : "string", "selector" : "img", "attribute": "src" }, "caption.title" : { "type" : "string", "selector" : "figcaption" } } }, { "class": "SlideshowRule", "selector" : "div.gallery" }, { "class": "CaptionRule", "selector" : "figcaption" }, { "class": "CaptionRule", "selector" : "p.wp-caption-text" }, { "class": "ImageRule", "selector" : "figure", "properties" : { "image.url" : { "type" : "string", "selector" : "img", "attribute": "src" } } }, { "class": "VideoRule", "selector" : "div.wp-video", "containsChild": "video", "properties" : { "video.url" : { "type" : "string", "selector" : "source", "attribute": "src" }, "video.type" : { "type" : "string", "selector" : "source", "attribute": "type" } } }, { "class" : "PassThroughRule", "selector" : "div.vce-gallery-big" }, { "class" : "PassThroughRule", "selector" : "div.vce-gallery-small" }, { "class" : "IgnoreRule", "selector" : "div.vce-gallery-slider" }, { "class": "SlideshowImageRule", "selector" : "div.big-gallery-item", "properties" : { "image.url" : { "type" : "string", "selector" : "img", "attribute": "src" }, "caption.title" : { "type" : "string", "selector" : "figcaption.wp-caption-text" } } } ] }

alaa-alsalehi avatar Oct 13 '18 10:10 alaa-alsalehi

This issue has been marked stale because it has been open for 30 days with no activity. If there is no activity within 7 days, it will be closed. This is an automation to keep issues manageable and actionable and is not a comment on the quality of this issue nor on the work done so far. Closed issues are still valuable to the project and are available to be searched.

github-actions[bot] avatar Oct 26 '22 00:10 github-actions[bot]