How to embed an Indesign document into my Wordpress site using online publishing in Indesign?

[nilleg57851248]

Is it only in website made by Adobe applications that you can embed Indesign dokuments?

[BobLevine]

You're going to have be more detailed. You cannot embed an InDesign document but you can add a PDF or even an iframe version of Publish Online document.

[Derek Cross]

You can have a link on your website to a Publish Online document, which would be hosted on Adobe Servers. You can include a facility in your Publish Online document that allows users to download a PDF version. Obviously if you have things like animations in your Publish Online document they won't be included in the PDF version.

[AnneMarie Concepcion]

1. Open your InDesign layout in InDesign
2. Click the Publish Online button upper right in the menu bar. This requires InDesign CC 2015 or later, by the way.
3. Follow the prompts and click View Online so Publish Online does its thing and you're viewing your file in a browser window. Be sure to leave the option to Hide the Embed icon unchecked.
4. In the browser window, at the bottom of that window, click the embed icon, which looks like this: </>  It may be in a dropdown menu lower right, under an ellipse - "more" - button (...).
5. A pop-up window appears where you can select embed options (size and so on). When you're done choosing options, click in the Embed Code section at the bottom and copy the code there. It starts with "<iframe style="
6. Paste that code into your website, wherever you edit the pages ... where the other markup appears. For a Wordpress site you'd paste it into the Text view (not Layout view) of an Edit Post or Edit Page screen.

Hope that helps!

-AM

[nilleg57851248]

This is fantastic 🙂

But,

now I have added the iFrame code and a title, but when you enter the site, only the code is showing up. Is it not possible that the post itself can be displayed?

[nilleg57851248]

[rob day]

You are adding HTML code to the page, so in the WordPress backend post page make sure you are pasting the iframe code in the text tab and not the visual tab.

Can you post the URL link to your Publish Online document

[rob day]

This wouldn't work because I'm in Visual mode:

But this does:

[nilleg57851248]

I have added the link in the text mode.

But what i see now is tha the link do not start with <iframe....

shouldent it do that?

Mine looks like this

https://indd.adobe.com/view/5c04ba52-9f0e-4619-b72b-5ed9aca549c9

[nilleg57851248]

- even I added this :<iframe style="border: 1px solid #777;" src="https://indd.adobe.com/embed/2c9dbf13-a83a-4cc7-b337-6b2ee63fe615?startpage=1&allowFullscreen=true" width="525px" height="371px" frameborder="0" allowfullscreen=""></iframe>

[nilleg57851248]

https://wordpress.com/post/nillegraphic.wordpress.com/744

[rob day]

nilleg57851248  wrote

- even I added this :<iframe style="border: 1px solid #777;" src="https://indd.adobe.com/embed/2c9dbf13-a83a-4cc7-b337-6b2ee63fe615?startpage=1&allowFullscr een=true" width="525px" height="371px" frameborder="0" allowfullscreen=""></iframe>

You have to be in the HTML or Text tab (not the Visual tab). For an iFrame to work all of the code has to be included, not just the URL.

Try selecting all and pasting this into the HTML tab

<iframe style="border: 1px solid #777;" src="https://indd.adobe.com/embed/5c04ba52-9f0e-4619-b72b-5ed9aca549c9?startpage=1&allowFullscreen=true" width="100%" height="700px" frameborder="0" allowfullscreen=""></iframe>

[nilleg57851248]

this is wierd 😮

now I copy your and pasted it into the wp site at text tab, but it keeps showing up wrong

[nilleg57851248]

When I add the <iframe... in the text tap it stays. Then I took a look at the visual tab (before updating) and my Indesign shows perfect,- with read...

It is when I update the code changes to http/...

[rob day]

You need the iFrame tags. Try pasting the iFrame code in the Text tab and don't switch to Visual before you publish the post

[nilleg57851248]

Bit I think that is what I have done all the time? :

This is the code for embedding:

<iframe style="border: 1px solid #777;" src="https://indd.adobe.com/embed/fd3ea38b-db6b-417e-ae00-e3c664cb6d05?startpage=1&allowFullscreen=true" width="525px" height="371px" frameborder="0" allowfullscreen=""></iframe>

This is how the code looks in the text tab after publishing:

<a href="https://indd.adobe.com/embed/fd3ea38b-db6b-417e-ae00-e3c664cb6d05?startpage=1&allowFullscreen=true">https://indd.adobe.com/embed/fd3ea38b-db6b-417e-ae00-e3c664cb6d05?startpage=1&allowFullscreen=true</a>

I wonder if this mysterium have something to do with the smal coding tags in the meny bar?

I would really like to sort this out. The function (when it works) will be brilliant and very timesaving!

I'm very grateful for this forum and for all you help 🙂

[rob day]

Is your Wordpress site self hosted or with Wordpress? Do you have the latest version installed 4.8.1?

[nilleg57851248]

It it hosted with WP and is the latest version.

My teacher suggested tha the theme I use do not support iframes. - I used Twentyfifteen.

So now I try to find a theme that does ....

[rob day · Accepted solution]

Try searching for something like "wordpress editor changes html code". There are plugins out there that deal with the Visual editor problem.

Preserved HTML Editor Markup Plus — WordPress Plugins

[AnneMarie Concepcion]

Wow that's frustrating. Hrm. I don't know the answer. Might be a limitation of your theme, that you can't do iframes?

I know for sure it works in Wordpress, I have a number of clients who use it. Here's an example of one in a post on InDesignSecrets (scroll down) which is a Wordpress site: https://indesignsecrets.com/publish-online-supports-embedding-indesign-documents.php