• Resolved andhel

    (@andhel)


    I have problems with several posts where part of the content is not included in the instant article (IA). Also, the like-button is not displayed on the right hand side of the page. Plugin version is 2.8.
    This is my feed: http://www.anderstips.se/feed/instant-articles/

    1. For this post http://www.anderstips.se/basta-sajten-for-att-salja-bil-privat/
    It seems as text between <div> and </div> is NOT included in the IA. In once instance it’s one on level of div and in other position in the post there are overlapping <div><div><div> etc.

    Source markup:

    <div>
    <div>
    <div><a href="http://www.anderstips.se/wp-content/uploads/2016/01/ferrari-car-silverstone.jpg"><img class="alignnone size-full wp-image-1210" src="http://www.anderstips.se/wp-content/uploads/2016/01/ferrari-car-silverstone.jpg" alt="ferrari-car-silverstone" width="640" height="426" srcset="http://www.anderstips.se/wp-content/uploads/2016/01/ferrari-car-silverstone.jpg 640w, http://www.anderstips.se/wp-content/uploads/2016/01/ferrari-car-silverstone-300x200.jpg 300w, http://www.anderstips.se/wp-content/uploads/2016/01/ferrari-car-silverstone-624x415.jpg 624w" sizes="(max-width: 640px) 100vw, 640px" /></a>Är blocket.se den bästa sajten för att sälja sin bil som privatperson? Det kostar 125 kr för en bilannons på blocket och den ligger uppe i två månader. I priset ingår bara en bild tyvärr. Vill du ha fler bilder, upp till 6 st totalt, så kostar det 40 kr extra. Alla tips kring att sälja bil online pekar på att <a href="http://www.automotorsport.se/artiklar/nyheter/20150401/10-saker-du-maste-veta-om-annonsbilder-nar-du-saljer-din-bil" target="_blank">många och bra bilder</a> gör det lättare att sälja. Extra bilder rekommenderas alltså!</div>
    </div>
    <p>Vill du lägga upp en gratis bilannons, så kan du testa bilgaraget.se. 6 bilder går att lägga upp och funktionerna är närmast likvärdiga med blocket. Ett exempel är en annons för en <a href="http://www.bilgaraget.se/audi/a4-1-8t-quattro-190hk/1972983">begagnad Audi A4 1.8T Quattro i Göteborg</a>.</p>
    <p>Blocket.se har säkert fler besökare än bilgaraget.se, vilket är det man betalar för. Dock tycker jag Blocket ligger relativt dåligt till i sökresultatet på Google, när man googlar efter bilmodeller.</p>
    </div>
    <p>Av den anledningen tycker jag definitivt man ska lägga sin bil på bilgaraget.se också.</p>
    <div>Bilweb.se är ytterligare en sajt med begagnade bilar. Tyvärr är tjänsten stängd för privatpersoner i nuläget.</p>
    </div>
    <h2>Länkar till sajter med begagnade bilar</h2>
    <ul>
    <li><a href="http://www.blocket.se" target="_blank">blocket.se</a></li>
    <li><a href="http://bilgaraget.se" target="_blank">bilgaraget.se</a></li>
    <li><a href="http://bilweb.se/" target="_blank">bilweb.se</a></li>
    </ul>

    Transformed markup:

    <html>
      <head>
        <link rel="canonical" href="http://www.anderstips.se/basta-sajten-for-att-salja-bil-privat/"/>
        <meta charset="utf-8"/>
        <meta property="op:generator" content="facebook-instant-articles-sdk-php"/>
        <meta property="op:generator:version" content="1.0.5"/>
        <meta property="op:transformer" content="facebook-instant-articles-sdk-php"/>
        <meta property="op:transformer:version" content="1.0.5"/>
        <meta property="op:markup_version" content="v1.0"/>
        <meta property="fb:use_automatic_ad_placement" content="true"/>
        <meta property="fb:article_style" content="default"/>
      </head>
      <body>
        <article>
          <header>
            <figure>
              <img src="http://www.anderstips.se/wp-content/uploads/2016/01/ferrari-car-silverstone.jpg"/>
            </figure>
            <h1>Bästa sajten för att sälja bil privat?</h1>
            <time class="op-published" datetime="2016-01-19T16:42:37+01:00">January 19th, 4:42pm</time>
            <time class="op-modified" datetime="2016-01-19T16:42:37+01:00">January 19th, 4:42pm</time>
            <address><a>Anders</a>Har ett stort intresse för webbutveckling och marknadsföring på Internet. Driver flera olika sajter och bloggar inom olika områden.</address>
            <figure class="op-ad">
              <iframe src="https://www.facebook.com/adnw_request?placement=223200661376260_223206254709034&adtype=banner300x250" width="300" height="250"></iframe>
            </figure>
          </header>
          <p>Av den anledningen tycker jag definitivt man ska lägga sin bil på bilgaraget.se också.</p>
          <h2>Länkar till sajter med begagnade bilar</h2>
          <ul>
            <li>
              <a href="http://www.blocket.se">blocket.se</a>
            </li>
            <li>
              <a href="http://bilgaraget.se">bilgaraget.se</a>
            </li>
            <li>
              <a href="http://bilweb.se/">bilweb.se</a>
            </li>
          </ul>
          <figure class="op-tracker">
            <iframe><!-- This site uses the Google Analytics by MonsterInsights plugin v5.4.9 - Universal enabled - https://www.monsterinsights.com/ -->
    <script type="text/javascript">
    	(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    		(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    		m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    	})(window,document,'script','//www.google-analytics.com/analytics.js','__gaTracker');
    
    	__gaTracker('create', 'UA-1897641-37', 'auto');
    	__gaTracker('set', 'forceSSL', true);
    	__gaTracker('send','pageview');
    
    </script>
    <!-- / Google Analytics by MonsterInsights -->
    </iframe>
          </figure>
        </article>
      </body>
    </html>

    2. For this post there are two problems. http://www.anderstips.se/46-smarta-tips-for-dig-som-har-iphone-eller-ipad/
    Problem 2.1The first paragraph text is NOT included in the IA, it should start with “Använder du iPhone eller iPad så kan du göra vardagen…”.
    Problem 2.2 The same image is shown in both header and content in the IA (tried in fb pages app). There is this alert, but no warning:
    “Repeating Cover Image and First Image: The cover image and the image ‘http://www.anderstips.se/wp-content/uploads/2015/07/macbook-iphone-kvinna-300×199.jpg&#8217; seem to be the same or almost the same image. Please consider removing or replacing one of the images.”

    Source markup:

    <p><a href="http://www.anderstips.se/wp-content/uploads/2015/07/macbook-iphone-kvinna.jpg"><img class="alignright size-medium wp-image-1084" src="http://www.anderstips.se/wp-content/uploads/2015/07/macbook-iphone-kvinna-300x199.jpg" alt="macbook iphone kvinna" width="300" height="199" srcset="http://www.anderstips.se/wp-content/uploads/2015/07/macbook-iphone-kvinna-300x199.jpg 300w, http://www.anderstips.se/wp-content/uploads/2015/07/macbook-iphone-kvinna-624x414.jpg 624w, http://www.anderstips.se/wp-content/uploads/2015/07/macbook-iphone-kvinna.jpg 640w" sizes="(max-width: 300px) 100vw, 300px" /></a>Använder du iPhone eller iPad så kan du göra vardagen lättare genom att lära dig drygt <a href="http://www.omteknik.se/iphone-tips-och-trix-som-du-inte-kande-till/" target="_blank">40 smarta tips för iPhone</a>. Här följer fyra tips:</p>
    <ul>
    <li><strong>Trycker du på mellanslag 2 gånger, så blir resultatet punkt och mellanslag.</strong></li>
    <li><strong>När du ska skriva en mailadress, håll nere . (punkt), så dyker .se .com o.s.v. upp.</strong></li>
    <li>Skriv EN stor bokstav. Dra från shift-tangenten till önskad bokstav.</li>
    <li><strong>Tysta ringsignalen vid inkommande samtal: Tryck på sleep eller valfri volymknapp. (du kan fortfarande svara på samtalet)</strong></li>
    </ul>
    <p>Har du fler tips hur man använder sin iPhone eller iPad på ett smartare sätt?</p>

    Transformed markup:

    <html>
      <head>
        <link rel="canonical" href="http://www.anderstips.se/46-smarta-tips-for-dig-som-har-iphone-eller-ipad/"/>
        <meta charset="utf-8"/>
        <meta property="op:generator" content="facebook-instant-articles-sdk-php"/>
        <meta property="op:generator:version" content="1.0.5"/>
        <meta property="op:transformer" content="facebook-instant-articles-sdk-php"/>
        <meta property="op:transformer:version" content="1.0.5"/>
        <meta property="op:markup_version" content="v1.0"/>
        <meta property="fb:use_automatic_ad_placement" content="true"/>
        <meta property="fb:article_style" content="default"/>
      </head>
      <body>
        <article>
          <header>
            <figure>
              <img src="http://www.anderstips.se/wp-content/uploads/2015/07/macbook-iphone-kvinna.jpg"/>
            </figure>
            <h1>46 smarta tips för dig som har iPhone eller iPad</h1>
            <time class="op-published" datetime="2015-10-12T01:29:34+02:00">October 12th, 1:29am</time>
            <time class="op-modified" datetime="2015-10-12T01:29:34+02:00">October 12th, 1:29am</time>
            <address><a>Anders</a>Har ett stort intresse för webbutveckling och marknadsföring på Internet. Driver flera olika sajter och bloggar inom olika områden.</address>
            <figure class="op-ad">
              <iframe src="https://www.facebook.com/adnw_request?placement=223200661376260_223206254709034&adtype=banner300x250" width="300" height="250"></iframe>
            </figure>
          </header>
          <figure>
            <img src="http://www.anderstips.se/wp-content/uploads/2015/07/macbook-iphone-kvinna-300x199.jpg"/>
          </figure>
          <ul>
            <li>
              <b>Trycker du på mellanslag 2 gånger, så blir resultatet punkt och mellanslag.</b>
            </li>
            <li>
              <b>När du ska skriva en mailadress, håll nere . (punkt), så dyker .se .com o.s.v. upp.</b>
            </li>
            <li>Skriv EN stor bokstav. Dra från shift-tangenten till önskad bokstav.</li>
            <li>
              <b>Tysta ringsignalen vid inkommande samtal: Tryck på sleep eller valfri volymknapp. (du kan fortfarande svara på samtalet)</b>
            </li>
          </ul>
          <p>Har du fler tips hur man använder sin iPhone eller iPad på ett smartare sätt?</p>
          <figure class="op-tracker">
            <iframe><!-- This site uses the Google Analytics by MonsterInsights plugin v5.4.9 - Universal enabled - https://www.monsterinsights.com/ -->
    <script type="text/javascript">
    	(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    		(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    		m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    	})(window,document,'script','//www.google-analytics.com/analytics.js','__gaTracker');
    
    	__gaTracker('create', 'UA-1897641-37', 'auto');
    	__gaTracker('set', 'forceSSL', true);
    	__gaTracker('send','pageview');
    
    </script>
    <!-- / Google Analytics by MonsterInsights -->
    </iframe>
          </figure>
        </article>
      </body>
    </html>

    3. Like button on the right hand side of the IA is not displayed.

    https://wordpress.org/plugins/fb-instant-articles/

Viewing 6 replies - 1 through 6 (of 6 total)
  • Paulo

    (@demoive)

    Hi @andhel.

    Thanks for the reporting this with clear reproduction steps and details!

    We’ll attempt to reproduce the issue and will get back in touch for some more information if we aren’t able to reproduce on our end.

    3. Regarding the Like button not appearing: it’s a common misconception that this “Like” is associated with the article when in fact, it relates to your Facebook page. More likely than not, you already “like” your own page 🙂 and its behaviour is to not appear when you’ve already “like” it.

    Thanks again!

    I have a similar issue where the first paragraph of some of my posts is missing. Any fix for this?

    Hi @andhel.

    I will respond to item #2 in a subsequent comment.

    1. Regarding item #1, I think your assessment of the root cause is that the text within the div tags don’t properly get transformed into paragraphs within the Instant Article and to fix, will require adding Custom Transformer Rules.

    Understanding how Transformer Rules work and how to configure them is complex, so we’ve extended our documentation with a section dedicated to giving clarity on the matter and supported by examples.

    First and foremost, the main description of this plugin contains a high-level overview of the concept behind Transformer Rules. Additionally, supporting information has been added as FAQs and screenshots.

    To go deeper, our main documentation contains examples and reference material for configuring your own Transformer Rules.

    I think this will be sufficient to get you started in defining the rules necessary to make the transformation of your article in an Instant Article.

    Hello again @andhel.

    2.2 There is an existing on-going thread regarding this same issue here: https://wordpress.org/support/topic/general-warningrepeating-cover-image-and-first-image?replies=4

    2.1 I noticed a similar case has been identified as an issue on GitHub. To avoid duplication, I’m marking this thread as “Resolved” for now. Please follow the progress of the resolution on this issue here:

    https://github.com/facebook/facebook-instant-articles-sdk-php/issues/91

    @nickfoti, see #2.1 in my previous comment.

    Plugin Author evertonrosario

    (@evertonrosario)

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Content within div missing in instant article and other content missing’ is closed to new replies.