[SOLVED] Instant Article Builder - How to select two areas/elements with content for the article?

Instant Article Builder - How to select two areas/elements with content for the article?

My page has the article summary and content in separate elements, I would need to show both in the instant article, but without changing the HTML structure of the page.

https://developers.facebook.com/docs/instant-articles/builder

<div class="summary-news">
    <div class="summary-content">
        <h3>Summary</h3>
        <ul>  
            <li> Item 1</li> 
            <li> Item 2</li>
            <li> ... </li>
        </ul>
    </div>
</div>

<div>
    <!-- Other content -->
</div>

<div class="text">
    <!-- Main content -->
</div>

Solution

You can change the GlobalRule into your settings to be specific to any wrapper tag of this full page.

Lets say that you have a <body> tag around your structure:

<body>

<div class="summary-news">
<div class="summary-content">
    <h3>Summary</h3>
    <ul>  
        <li> Item 1</li> 
        <li> Item 2</li>
        <li> ... </li>
    </ul>
</div>
</div>

<div>
<!-- Other content -->
</div>

<div class="text">
<!-- Main content -->
</div>

</body>

Then you just need to change your article.body property from your GlobalRule settings to get this wrapper container:

{
            "class":"GlobalRule",
            "selector":"html",
            "properties":{
                "article.title":{...},
                "author.url":{...},
                "author.name":{...},
                "author.role_contribution" : {...},
                "author.description" : {...},
                "article.canonical": {...},
                "article.publish": {...},
                "article.body":{
                    "selector":"body",   // Or whatever selector that grabs your container
                    "type":"element"
                },
                "image.url":{...}
            }
        }

This should do the trick for your need.