CleverClogs

Experiments in writing, by Marjolein Hoekstra @OneNoteC

Embedding a full OneNote notebook from OneDrive for Business

without comments

Are you ready for the next logical step after embedding a view-only OneNote page and embedding a live-updated, publicly editable OneNote page?

I’d like to show you how you can embed a complete OneNote notebook from OneDrive for Business. The full notebook is embedded, including the hamburger menu that lets you access the notebook sections and section groups. The instructions here only apply to OneDrive for Business (Office 365), not to OneDrive for Consumers (onedrive.com).

For demonstration purposes, I picked the Japan Introduction notebook – a demo OneNote notebook that is part of a gorgeous series created a few years ago by renowned travel journalism publishers Roads and Kingdoms in close collaboration with the Microsoft OneNote and Sway teams. Check out the full series on Japan food and travel at Roads and Kingdoms Japan on Docs.com.

First: the notebook. Continue reading below if you want to replicate the steps I took to obtain this result.

The main TL;DR steps are:

  1. Obtain the link to the notebook (Copy Link in OneDrive for Business)
  2. Modify the link to the notebook (replace guestaccess.aspx by WopiFrame.aspx)
  3. Generate the iFrame HTML snippet and embed it on your self-hosted WordPress blog or other website CMS that supports iFrame embeds.

Obtain the link to the notebook

  1. Sign in to your Office 365 Portal
  2. Through the waffle menu, open OneDrive for Business
  3. Navigate to the folder with your OneNote notebook
  4. Mark the notebook to select it
  5. Select the command Copy Link from the ribbon or from the notebook context menu
  6. The default access permission is Full Access, including edit rights. Change the access permissions to your preferences
  7. Copy the resulting link to the clipboard

 

Modify the link to the notebook

  1. Paste the link into a new OneNote note page or into a text editor document
  2. Initially, your link will look something like this:
    https://cleverclogsmvp-my.sharepoint.com/personal/marjolein_cleverclogs_org/
    _layouts/15/guestaccess.aspx
    ?folderid=098152ddab8ef44619fb9ef7f6a1ac3f5
    &authkey=AUgjFpcICzr10UBMJFqXhM0spx
  3. Now, carefully edit the link so that the word guestaccess is replaced by WopiFrame. The full link now reads something like this:
  4. https://cleverclogsmvp-my.sharepoint.com/personal/marjolein_cleverclogs_org/
    _layouts/15/WopiFrame.aspx
    ?folderid=098152ddab8ef44619fb9ef7f6a1ac3f5
    &authkey=AUgjFpcICzr10UBMJFqXhM0
  5. Copy the link back to the clipboard

Generate the iFrame HTML snippet

<iframe src="YOUR NOTEBOOK URL
&action=embedview&wdbipreview=true"
width="700" height="800"></iframe>

Your iFrame snippet is now ready to paste into your self-hosted WordPress blog or other CMS that supports iFrame embedding.

 

Reference

How to Embed Onenote Files into a Website – Microsoft Community reply by Microsoft moderator Tina Chen (Jun 2, 2017)

Written by CleverClogs

August 6th, 2017 at 10:31 pm

Posted in OneNote

Leave a Reply