Want to embed PDFs and other documents in WordPress?
In today’s article, I will share how to professionally embed PDFs and other documents in WordPress.
We will use the Embed Any Document Plus plugin to solve this problem.
Contents
Introducing Embed Any Document Plus plugin
Embed Any Document Plus is the best WordPress plugin to embed PDF files and other document files in WordPress. This plugin is also a way to improve the experience of your website visitors.
They can read PDFs and other documents online without installing a browser plugin, and without downloading the file to their computer.
With this plugin, you can easily embed documents stored from Dropbox, Google Drive, and Box.com. The plugin’s functionality is probably similar to that of online document sharing sites like Scribd and SlideShare.
Supported file formats:
- Microsoft Word (docx, docm, dotm, dotx)
- Microsoft Excel (xlsx, xlsb, xls, xlsm)
- Microsoft PowerPoint (pptx, ppsx, ppt, pps, pptm, potm, ppam, potx, ppsm)
- Adobe Portable Document Format (pdf)
- Text files (txt)
- TIFF Images (tif, tiff)
- Adobe Illustrator (who)
- Scalable Vector Graphics (svg)
This plugin comes in 2 versions: a free version on WordPress.org with less functionality and a full version that sells on Codecanyon for $24.
How to Embed PDFs and Other Documents in WordPress
First you install and plugin Embed Any Document Plus. Once the plugin is activated, go to Settings -> Embed Any Document Plus to configure the plugin.
As in the image, you see 2 tabs General Settings and Cloud Settings.
On the General Settings tab , you see many options that allow you to change the size of the document display frame, whether to show the Download button or not, the text of the Download button, and whether or not the file size can be displayed.
These options you can change for each embedded document.
Switch to the Cloud Settings Tab. Here you will configure the plugin to connect to cloud storage services including Dropbox, Google Drive, and Box.com. Your task is to go to each service and generate an API key. Then you copy the generated API Key here. And click on Save Changes button when done
How to get the Droxbox API Key
You need to create App ‘ Drop-ins ‘ in Droxbox to get API key. Follow the steps below to get the API Key
First, you need to click on this link .
In the Choose an API section , select the Dropbox API option.
In the Choose the type of access you need section , select Full Drop box
Next, enter a name for the app
Click the checkbox to accept the terms of the Dropbox API and click the Create App button .
On the next screen, you need to add your site in the Chooser/Saver domains section .
Now you will copy the App Key and paste and the API key section in the plugin’s configuration screen.
Get Google Drive API
Getting the Google Drive API is the most complicated and confusing part. You need 2 pieces of information for the plugin to work with Google Drive including Client ID along with API key.
First, click on this link.
Next, you click on the ‘ Create Project ‘ button.
Enter the project name and click on the Create button
Click on the Credential link button on the left sidebar
Click on the OAuth consent tab , enter the product name and click the Save button . Other fields you leave blank.
Now you switch to the Credentials tab . Click on the Dropdown box ‘ Create Credentials ‘ button and select OAuth Client ID
Select Web Application as the application type, enter the address of your website in the Authorized Javascript origins section and click the Create button
You now have the Client ID generated. Next you need to generate an API key. Click on ‘ Create credentials ‘ button again and click on ‘API Key’.
A dialog box informs that the API key has been created, click on Restrict Key .
In the Key Restriction screen, select HTTP referrers (web site) and enter the website information in the format *.yourdomain.com/* . Click the Save button to save the configuration information.
Click the Library button in the left sidebar.
Search for Google Drive API and click on it and Enable it
Go back, search ” Google Picker API and Enable ” .
Now copy the Client ID and API key from Credentials and paste them into the Cloud Settings section of the plugin in WordPress Admin
Get Dropbox.com API key
How to get Drobox.com’s API key is relatively simple.
Click on this link.
Log in to your Box.com account
Enter the app name and click the ‘ Create Application ‘ button
On the next screen, you will see the API key.
How to embed documents
The plugin has integrated the function of embedding documents right in the post editor screen. Here you will see the Add Document button .
Click on that, you will see 5 ways you embed the document.
Upload Documents.
This option allows you to upload documents from your computer to the host. As soon as you upload you click the Insert button . The plugin will automatically generate the shortcode and insert it into the post.
Add from URL
Embedding this document is the same as embedding images from other websites into your article. You just need to paste in the URL of the document and click the Add URL button.
Add from Dropbox
If you want to embed the archive in Drobox, click Add from DropBox. Now you just need to find the document you want to insert.
Add from Drive
At the time of this article, although I have followed the instructions of the plugin correctly, but when I choose Add From Drive, I still get the error ‘ The API developer key is invalid.’ very annoyed. The temporary fix is to open the file ead.js (located in /wp-content/plugins/embed-any-document-plus/js ) and comment this line of code.
Currently , this author’s own Drivr Lite plugin , he also commented the above line of code. I don’t understand why the paid plugin doesn’t see anything active yet.
As soon as the above error is fixed, you will see a screen to select files from Google Drive to embed in the article. As you can see, you can upload the file directly to Google Drive and then embed it in the article. Or you can choose by file type. The interface supports a search function so you can easily find the document you need.
One point you should note:
Your document needs to be public to be viewable on your website. Otherwise you will see a 403 error.
Public documents in Google Drive
Open the document you need to make public. Click the Share button in the left corner.
A dialog box will pop up, click the Get shareable link button
Next, you choose More .
In the Link sharing section, click On – public on the web. And click the Save button to save your settings.
Add from Box.com
Like the above cloud services, if you have the document in Box.com, click Add from Box.com . Select the document you want. It’s done
Epilogue
EmbedAnyDocument is the best plugin to help you build a document sharing site. It creates a great user experience when you can directly view documents like pdf, excel right in your website.
The impressive point is that it supports many popular cloud storage services. So you do not need to consume host space to store documents. The plugin will connect documents on cloud services like Google Drive, Drobox and Drive and display a nice reading pane.
If you know any other plugin with similar functionality, please share in the comment section below.
