Advanced Skills with Our HTML Embed Code

Popplet offers an HTML embed code feature so you can include your popplet creations on your webpages and in your blog.

We have already talked about how our embed code can help your website create meaningful infographics to complement your written content.

For example, you could create a popplet visualizing the concept that you are talking about in a blog post. This will give readers another way to engage with your message. Sometimes, seeing the connections between your ideas can help readers to better understand the key point you are making.

Including popplets in your webpages also provides your readers with a more interactive experience. When you include your popplets as an image, your readers can view your work. But when you include your popplets with an HTML embed code, your viewers can click and scroll around your popplet without leaving your website.

Platforms like WordPress and Tumblr make it easy to use Popplet’s embed code feature. Blogger has also more recently allowed coding to be used, but we have noticed that broader Google Sites don’t allow any HTML embed codes – from any source – at this stage.

Whatever platform you use, your layout may have a specific width size. Your popplet creations may also have their own size. Is your popplet long and narrow, more of a square, or wide like a timeline? Follow our advanced skills tutorial to embed the right-sized popplet into your webpage or blog post!

Here’s how:

1. Follow our embed code tutorial instructions from A to D.

2. In HTML editing mode on your webpage or blog platform, have a look at the code you have pasted:

Notice how it gives the width and height twice? (We have highlighted these parts.) The first time it sets the popplet size with the width followed by the height, the second time with the height and then the width given.

Our popplet HTML embed code feature always suggests a square of 460 pixels wide and high.

3. You can resize your soon-to-be embedded popplet to any size you like.

Example One: Kevin Bacon

Here’s a simple popplet showing the degrees of separation between several actors and Kevin Bacon. There is an old entertainment game where players win points by showing the movie links between any random actor or Hollywood celebrity and Kevin Bacon. (If you now search for celebrity names in Google with the term ‘Bacon number’, it will show you how that celebrity is linked through various movies to Kevin Bacon.)

Our Kevin Bacon popplet uses a simple pinwheel design, so it would suit being resized as a slightly smaller square. We will change the placement size to 320 wide and high.

In the first line of the HTML embed code, we changed both width and height to 320, and then edited the second size mention to 320 as well. This is what the final code looked like:

And this is how the Popplet would look embedded on a blog page (we have centered it):

Example Two: Civil Rights Timeline

However, for a popplet timeline, you may want to allow a greater width and less height. Educator Sean Junkins from South Carolina’s civil rights timeline is a popular Popplet shared on Twitter. Timeline-designed popplets would suit having a smaller height and a longer width when embedded onto a webpage. Here we have recreated Mr Junkins‘ work and resized it so it is 320 high and 740 wide.

This is what the edited code looks like (can you see how the first mention of size has width first of 740, then the height of 320, and the second time it is the other way around – height first of 320 and width second of 740?):

4. With your new, advanced HTML embed code skills, you can now play around with the sizes to best suit adding your popplets to your webpage. Here are some common size formats:

• 150w x 150h (thumbnail size)
• 460w x 600h (portrait size)
• 740w x 320h (average full page width for WordPress sites)
• 1024w x 840 (an immersive experience!)

How schools can use this technique: Primary/Elementary school teacher Mrs Wideen uses Popplet in class to help students research new subject topics. Older students could embed their study popplets into a class blog and resize them to best present their final work as part of an assignment. (Thanks Jenni Van Rees for the inspiration for this blog tutorial!)

Have you used Popplet to make your website and blog posts come alive? Share examples of how you have used our HTML embed code on our Facebook page!