Typepad 101: How to embed pins and add Pinterest widgets on your blog

April 24, 2013

Welcome to Typepad 101! Whether you want to add some new features to your blog's design, or simply make your blog more functional, Typepad 101 has you covered. This tip is suitable for bloggers at all levels - no special tricks or upgrades needed!

Pinterest has become one of the most popular ways to curate your passions and share them with your blog readers. We're big fans of how Pinterest works with Typepad blogs, and over time we've shared various tricks with you, from adding a hovering pin-it image to verifying your blog, and lots more.

It's been almost a year since we showed you how to embed a Pinterest pin in a blog post. Recently, Pinterest has made some changes to how embedding pins works, so we're going to go over that today, and as a bonus, we'll also teach you how to add a Pinterest Profile Widget to your blog's sidebar!

Let's get started.

First, let's decide which pin we'd like to add to our post. Go to the pin page, then click the Share button in the upper right hand corner, and choose "Embed". This one looks good:

Pinterest_step_one

You'll be taken to the Pinterest Button and Widget Builder, where you can get everything set up for embedding pins now and in the future. Make sure "Pin Widget" is selected, and click the Build It button:

Pinterest_step_two

Next, you'll want to scroll down the screen, where you'll see two fields with code, labeled "Insert the Link" and "Load the JavaScript". We're going to start with "Load the JavaScript," so highlight and copy the code that you see there:

Pinterest_step_three

Next, log in to your Typepad account, and from your Dashboard, click to Design > Content. Choose an Embed your own HTML module, and click to add it via the button on the right. In the pop up box, add a label that will help you identify what's in there, and paste the Javascript into the box below:

Pinterest_step_five

Click OK, then drag the module to the bottom of your blog's right sidebar to make sure that the code is as close to the bottom of your blog as possible (if your blog doesn't have a right sidebar, you can add the code to the Advanced section of the Blog Footer at Design > Content). You'll only have to do this once, so leave it in place and next time you embed a pin, you can skip that step!

Next, go back and copy the code under "Insert the Link":

Pinterest_step_four

In your Typepad account, click to compose a new post, and when you're ready to add your pin, switch to the Edit HTML tab and paste the code there (Pro Tip for Rich Text lovers: Compose your entire post, then switch to Edit HTML and add your pin embed last, leaving the Compose editor on the HTML tab when you click Publish instead of switching back to Rich Text for this post - this will ensure a perfect embed). Publish your post, and your pin will appear, just like this:

Pin_embed

You're done!

If you'd like to add a Profile Widget, Board Widget, or Follow Button to your blog's sidebar, this next step is for you. Go back to the Button and Widget Builder (or click here) and select which item you want to add to your sidebar. Today, we're going to add a Profile Widget, which will display your recent pins on your blog's sidebar.

Choose your item, add your Pinterest URL, and click Build It:

Pinterest_step_one_profile

If you've already added the Javascript from our "Load the JavaScript" step above, then you won't need to do that again - adding the script once will work for all of Pinterest's widgets across your blog. If you haven't, then scroll back up and complete that step.

Next, you can either choose to set an image width and a board width and height by clicking "Show Advanced Options," or you can simply go with the classic default option. Click "Build It" and scroll down again, then copy the code under "Insert the Link".

In your Typepad account, click to Design > Content, and once again choose an Embed your own HTML module and add it. There, add a descriptive title, and into the box, paste the provided code. Click OK, and drag the module wherever you'd like your Profile Widget to appear. Save your changes, and you're all set. Your Profile widget looks like this:

Profile_widget

Whew! That was fun, wasn't it? Now your blog is just a bit more fancy and equipped with new ways to share and promote your Pinterest content on your blog, and vice versa.

So how do you use Pinterest to engage your readers? Leave us a note in the comments or share your ideas in our community forum - you just might inspire other bloggers!

comments powered by Disqus

Welcome

Need help?

Follow us!

Typepad on FacebookTypepad on TwitterTypepad on Google+Typepad on PinterestSubscribe to Everything Typepad

Like us!

Typepad Newsletter

Still having trouble? Contact Support.