Two Minute Tutorial: Formatting Popplets in a Grid Layout

So, you’ve had a few ideas and your screen is starting to look a little bit cluttered. Like your thoughts, it’s time to get your popples in order. Maybe you are seeking fresh perspective, just cleaning house or perhaps you feel that your creation is approaching completion: whatever the reason, Popplet’s Organize Menu contains the tools to bring unruly popples into line.

Popplet’s Organize Menu is found by clicking on the cog menu, then organize as shown below. A list containing all the organizing tools appears:

Menu-Tutorial1(s)

Continue reading

5 Ways To Use The New Public Popplets Feature

Popplet users (Poppleteers?) have been quick to start using our new public popplets feature. As we detailed in our tutorial previously, this feature lets you share your Popplet creations with the world.

Now you can control three levels of access to your popplets:

  • Private – this level of access is for your eyes only. All popplets start as private creations
  • Shared with collaborators – you can make a popplet public, which means anyone with the URL can see the popplet, and you can give permission to your friends and colleagues to edit or add to the popplet as collaborators
  • Public – this will add your Popplet to our public popplets board and let anyone see your Popplet (they cannot edit it however). Your public popplets can be ranked by popularity so you can see how often others are checking out your creations!

So now that you can add your Popplets to a public library, how can you make use of this? Here are 5 initial ways you can use the new Public Popplets feature: Continue reading

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:

HTML embed code standard

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:

HTML embed code for Popplet

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?):

HTML embed code example 2 for Popplet

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!