facebookrssfacebook-instant-articles

FB Instant Articles: Can i display a PDF file inside an instant article?


I'm new to facebook instant articles. I have a website that depends on PDF files to represent political researches, each article (page) on the website contains a PDF file inside. Is there a way to display a PDF file inside the instant article?


Solution

  • Instant Articles does not support PDF's as a format. You can see all the supported formats here BUT you should still be able to display a pdf as an op-interactive(Embed). See the documentation here: https://developers.facebook.com/docs/instant-articles/reference/embeds

    It's basically just an iframe to which you can either add the js script inline or point to a hosted page that uses something like pdf.js, for example.

    Here are some examples assuming pdf.js:

    Embedded op-interactive (untested, grabbed from their github docs):

    <figure class="op-interactive">
        <iframe>
            <script>
                var url = './helloworld.pdf';
                PDFJS.workerSrc = 'http://yourdomain.com/build/pdf.worker.js';
                PDFJS.getDocument(url).then(function getPdfHelloWorld(pdf) {
                    pdf.getPage(1).then(function getPageHelloWorld(page) {
                        var scale = 1.5;
                        var viewport = page.getViewport(scale);
                        var canvas = document.getElementById('the-canvas');
                        var context = canvas.getContext('2d');
                        canvas.height = viewport.height;
                        canvas.width = viewport.width;
                        var renderContext = {
                            canvasContext: context,
                            viewport: viewport
                        };
                        page.render(renderContext);
                    });
                });
            </script>
        </iframe>
    </figure>
    

    URL based op-interactive:

    <figure class="op-interactive">
      <iframe src="https://yourdomain.com/pdfembed.html" width="600" height="600"></iframe>
    </figure>
    

    There really wouldn't be any other way to do it at this time.