Hi all,
I’ve created a Wordpress shortcode to easily embed notebooks/specific cells there, with dynamic resizing to parent containers. Feel free to jump in there and improve it!
Usage:
[observable-embed notebook='url to notebook.js' cell='optional cell name']
note: this shortcode may be used multiple times on a page/post. Specified cells share a common runtime/library so they can interact. Also implemented responsive width functionality so cells respond to resizing of their containers.
Ooh, nice!
I noticed the installation instructions say to only:
“Upload observable-embed.php to the /wp-content/plugins/ directory”
Do you need to also install the /includes and /admin and other folders?
In GitHub you’ll want to download the entire repository as a zip, then unzip it and upload the observable-embed entire folder into your Wordpress plugins folder. (or zip the observable-embed folder and install it through Wordpress admin interface)
Nice. It works for me, even with API keys and private notebooks.
Would be nice if you could specify multiple cells… 
Just call the shortcode multiple times and specify the cell you’d like each time. That’s why I created this because I needed to put some cells in different containers and have greater control over the layout of the page. Or skip the cell attribute altogether and the entire notebook will be displayed (only named cells will appear, I think)
Agreed, that gives you better layout possibilities (if you don’t have a layout already created in the notebook with a flex or grid layout). It does, however, load the notebook multiple times then, right?
No, it only loads it once. Once the page finishes loading it looks at every shortcode request and inserts the cell there. It shares the runtime/library between all shortcodes so they can interact with each other.
Sweet. Well done.
@andybrown I don’t have a WordPress site but would kind of like to see this in action. Do you have a publicly accessible example of a page living in a WordPress site with interactive content generated by embedding Observable cells into the WordPress site?
Hi @mcmcclur , I threw a quick example on a public-facing Wordpress site so you can see it in action: (forgive the cheesy band photo in the thumbnail below)
That does look pretty cool and useful for WordPress users - thanks!
@andybrown This is great! I’m using it on my blog. It’s much easier than the way I was embedding notebooks before. I forked your repo and made an addition to the css with the goal of fixing “2 titles” issues I was having with other methods of embedding entire notebooks in WordPress previously. Not sure what to do next, but I think I have this working well for me now.
examples (both in shortcode blocks in WordPress):
full notebook blog post: https://alex.kraieski.net/was-mick-schumacher-really-a-crash-prone-driver-at-haas-f1/
faceted Observable plot at the bottom of my homepage (single notebook cell): https://alex.kraieski.net/
I apologize in advance if I break any of those examples
Thanks @akraieski ! I’d love any development help with this plugin as anyone finds useful features. See you on GitHub!