For Glo.com, a site where all content is loaded dynamically within the stack of the “magazine”, not being able to also dynamically load Pinterest Buttons is a problem. Especially when the content is so darn pinnable!
Pinterest acknowledge the pickle we’re in:
Is there a callback option? How about a way to dynamically create Pin It buttons when we need them?
Not yet. We know you want more advanced options like these; we are figuring out what to do about them now!
Not deterred by the official word on dynamic Pinterest buttons, Luke came up with a nice way to load Pinterest “Pin It” buttons dynamically.
1. Parse the chunk of DOM containing your Pinterest tag
On the initialization of your content, say a gallery slide, isolate and handle the regular Pinterest Tags within the slide via JS. No need to load the external Pinterest script here.
2. Load a corresponding iframe into each tag
Passing the Pinterest data from the tag into the iframe as URL params.
3. Serve a bare bones page within the iframe
Bare bones so that it is highly cacheable. All the logic is tied up in the JS which is the only asset on the page at serve time. The JS reads the Pinterest data from the URL params, builds and places a corresponding Pinterest Tag on the page, and loads the external Pinterest script which parses the page, interprets the tag and renders the button.
Dynamic Pinterest Button iFrame HTML
Simple JS for building a DOM tag containing the Pinterest data from the URL and loading the external Pinterest script to parse it.