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?
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.