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

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:

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:

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:

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:

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":

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:

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:

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:

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

[MP]

It might just be the browser/PC I am using but the embedded images aren't showing up.

I keep a Pinterest board just for my blog just another way to share updates with people who may not be following on Twitter or Facebook.

[Melanie]

Heya! Are you embedding in a post or on your sidebar? Pin or widget? Just wanted to check and make sure before we hash out the issue.

[MP]

I was trying to add a pin to a post.

[Melanie]

That's definitely a little weird! Let me have a look around your account to see if something's conflicting with the script installed on your Sidebar. I'll report back!

[MP]

Again it might just be the computer I am on currently. I was gonna try again when I get home and see how it looks on Mac/Safari.

[Melanie]

Okay, got it! When I check in your account at Design > Content, it actually looks like you have the Embed code at the bottom of the sidebar as opposed to the Javascript. If you switch out the code in your "Pinterest Widget" module for the script under "Load the Javascript" and save that, then put the embed code (the "Insert the Link" code) in your post, that should fix it! Let me know if it doesn't though!

[liza cowan]

I don't have a "share" button on my pinterest page. I can click embed but it's just a code. Does this have to be for business accounts??

thanks. Liza
seesaw

[Melanie]

Hi Liza! It's possible that Pinterest hasn't switched everyone over. Does using the link that goes right to the Button and Widget Builder allow you to get to the page where you can build your widget? You'd just have to add the link to your pin directly: http://business.pinterest.com/widget-builder

Honestly if you still have the block of HTML that's quite a bit easier. No need to use the Javascript - you can just add that block of code wherever you want the pin to appear.

[MP]

Ah ha!!!! =D That worked! Thank you!!!!

[Sam F]

Awesome tips, can't wait to try this!

[www.facebook.com/profile.php?id=700467084]

While my blog is on eblogger I found your instructions very helpful. Thank you.