Hello all - I am working on a simple page for a client. I have a simple landing page where you sign up for their mailing list, and below it gives links to their 2 latest flyers (in PDF form). When you click on those links, the PDFs open just perfectly, on a desktop or phone. However the client wanted an image to show up when linking on social media (specifically linkedin and Facebook) and since the links just went directly to a PDF, when he linked the PDF URL on social media, he was disappointed that no image showed up. I didn't think I could add the open graph code to a PDF (if so please let me know how, I still haven't even gotten it right with the way I did it) - so instead I created a separate HTML page that simple had the PDF embedded on it as an object. He could then use THAT URL on social media and would show an image when he linked (its not showing the image I specified, but thats a whole other post/issue). My issue now is, on those extra pages with just the PDF embedded, it looks fine on desktop but on our phones its cropping the PDF in half and not showing the whole thing, nor giving us an option to scroll. Please help. I had some responsive CSS in the main page, but none of it was attached to the DIVs that contained the links to the PDFs so I can't figure out why it works there and not here. http://www.yoltrips.com (original site) http://www.yoltrips.com/YOLBaja2014.html (page in question) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>YOL | mind.body.service</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content="YOL"> <meta name="keywords" content="YOL"> <meta property="og:title" content="YOL. mind. body. service." /> <meta property="og:type" content="website" /> <meta property="og:url" content="http://www.yoltrips.com/YOLBrochure.html" /> <meta property="og:image" content="http://www.yoltrips.com/images/YOLservice.jpg" /> <meta property="og:type" content="image/jpeg"/> <meta property="og:image:width" content="150" /> <meta property="og:image:height" content="80" /> <style type="text/css"> <!-- #container { width: 100%; height: 100%; } body { margin: 0; padding: 0; height: 100%; } object { display: block; overflow:hidden; } --> </style> </head> <body> <div id="container"> <object data='http://www.yoltrips.com/PDF/YOL_Baja2014.pdf' type='application/pdf' width='100%' height='100%'> <p>It appears your Web browser is not configured to display PDF files. No worries, just <a href='http://www.yoltrips.com/PDF/YOL_Baja2014.pdf'>click here to download the PDF file.</a></p> </object> </div> </body> </html> Code (markup):
PDF's are NOT a web format, so there's no way to have social media sites pull up an image for them. Instead of the "your browser isn't supported" bit, I'd suggest putting a screencap of the PDF in there as a jpeg so there's something for UA's that don't support PDF to show.
Well currently social media is pulling an image, it's just the incorrect one. I added one in when we started the page and yesterday tried to change it to something else, but it still pulls the previous one even though the img isn't in the code anywhere anymore. Confusing. I'll do that with the screen cap - thanks.
You're probably not going to like the answer to that... don't use PDF. PDF was created for the delivery of PRINTABLE content -- it is NOT meant for content to be viewed on a screen in an accessible manner; it is designed for fixed size fixed design, and as such is completely the wrong tool for deploying content of value on websites, even more so if you care about users with differing screen sizes. Worse it's a proprietary format that not all devices will support, and not all users even use the same software to try and view. Same kinda goes for the screencaps since jpegs are fixed design at a fixed pixel size. You want an accessible document designed for multiple targets, that's HTML and CSS' job.