How To Embed Pinterest Boards And Pins On Your Blog

How to Embed Pinterest Boards and Pins on your Blog | Edublogs | CampusPress

Pinterest is a social networking site that has become increasingly popular with educators in recent years.

Many teachers now realize the advantage of being able to share and curate collaboratively to enhance their own professional learning and the education of their students. Pinterest is one way to do this.

Educators can use Pinterest in a variety of ways, such as for:

  • sharing and finding lesson plans and learning activities
  • finding inspiration for organizing and decorating the classroom
  • creating collaborative boards to exchange resources with other educators
  • curating learning materials for students
  • creating boards with resources for parents like school information or ideas to help children learn at home.

Students can also use Pinterest for research, curation and collaboration. Note that users are required to be 13+ to register (the terms of service state that any use by under 13s is prohibited). Like many social networking sites, there is some inappropriate content.

Pinterest And Blogs

If you have a resource or collection of resources that you’d like to share with educators or students on your blog, you can either:

1) Add a link to your content. Eg. Click here to view the Edublogs Pinterest Board.

or

2) Embed the board or pin into your post or page.


The second option can be more visually appealing and user friendly.

This post explains how to embed either pins or boards into your Edublogs, CampusPress or WordPress blog in just a few steps.

First we will cover the options for embedding a single pin or board into a sidebar widget. Then we will cover embedding a single pin or board into a blog post or page.

Embedding A Pin Or Board Into A Sidebar Widget

This is a simple process but there are a few key tips to take note of as you go along.

1) Copy Pin or Board URL

The first step for either scenario is to copy the URL of the pin or board you want to display or embed.

Find the pin or board on Pinterest and click on it. Then highlight the URL and copy it.

Select URL of Pinterest Pin

2) Use Pinterest’s Widget Builder

The next step is to go to Pinterest’s Widget Builder.

https://developers.pinterest.com/tools/widget-builder/

Tip: You may want to bookmark the Widget Builder URL (or you can easily find it in future by googling ‘Pinterest widget builder’).

Once you are on the Widget Builder page, click the Pin button and paste the URL of the pin you want to embed into the Pin URL field.

Select Pin and the paste in URL

Alternatively, you can click on Board and enter the Board URL.

Click on board and then insert your board URL

You will then be able to select the size of your pin or board.

If you are embedding a single pin, your size choices are small, medium and large. Small is usually best for a sidebar widget. You can also choose whether you want the pin description to show up underneath the pin image by ticking the box.

Choose the size of your pin to embed and select whether you want to show the description

 

If you are embedding a board, your size choices are square, sidebar, header or create your own.

Select your pinterest board sizes

You can check out the preview as you make your selections.

Underneath your preview you will be provided with some embed codes that you will need to copy.

Embed code Pinterest Widget builderImportant: There Are Two Codes

You will notice you are given two lines of code as above.

When embedding a pin or board, you need to copy and paste the first line of code THEN copy the second code and paste it right underneath the first code, on a new line.

It will look like this when you put the two codes together.

Two codes from Pinterest togetherExceptions: When You Don’t Need The Second Code

  • If you have already placed a pin/board in a widget on the sidebar of your blog, you won’t need to use that second line of code ever again when embedding pins or boards on your blog (sidebar, posts or pages).
  • If you are embedding multiple pins or boards into a post or page, you only need to add the second code the first time you embed your Pinterest code.

3) Embed Your Pin/Board Into A Sidebar Widget

Once you copy the code (or two codes) for your pin or board, you can paste it into a Text Widget.

To do that, go to Appearance > Widgets in your blog dashboard.

Next, add a Text widget by dragging it to your to your sidebar or other active widget area. Paste the embed code(s) into the widget. Make sure you paste it in Text tab (not in the Visual editor). Then press Save and Close.

Drag a text widget to the sidebar and add embed code

Embedding A Pin Or Board Into A Post Or Page

You can also embed your pin or board directly in a post or page.

There are two ways you can this:

  1. Simply embed using the URL
  2. Use Pinterest’s widget builder to generate a code as described above

1) Embed Via The Pin Or Board URL

You can easily embed a Pinterest profile, board or individual pins by pasting their URL into posts and pages.

You embed from Pinterest as follows:

Copy the URL of the pin or board you want to embed from your web browser’s address bar.

Go to Posts > Add New or Pages > Add New.

Paste the URL on a line by itself in your post/page editor.

Add URL

Below is what it looks like embedded when you view your post:

Profile:

Board:

Pin:

Troubleshooting

The link must be on its own line without any characters or whitespaces before or after the URL and must not be hyperlinked otherwise it won’t embed.

You can tell if a URL is hyperlinked by clicking on the link. If the hyperlink button in the toolbar highlights and a link box with the option to edit appears, like the screenshot below, it means your link is hyperlinked.

Click on Remove Link icon to remove the hyperlink.

Click on Remove Link

It also won’t embed if your Pinterest URL is https or includes your geographical location in the URL.

URL

2) Embed A Pin Or Board Into A Page Or Post Using The Widget Builder

This process is very similar to the one described above to embed into the sidebar of your blog.

  1. Create a new post or page, or open an existing post/page to edit it.
  2. Go to Pinterest and click on the pin or board you want to embed. Copy the URL for that pin or board.
  3. Go to the Pinterest Widget Builder
  4. Click on the box that says Pin, add the pin URL and choose your preferred size OR click on the box that says Board, add the board URL and choose your preferred size.
  5. You will be given two lines of code as described above. If you don’t already have the second line of code somewhere in that post/page OR in a widget on your sidebar, you will need to use both codes. Paste the second code directly underneath the first one.
  6. Go to Text mode of your blog post/page and place your cursor where you want to embed the pin. Paste your code/(s). Publish or preview your post but do not go back to Visual mode or you will lose your code and you won’t be able to see your pin/board.

When you preview or publish your post the pin will show up like this:

Important: Don’t Lose Your Code

Frustratingly, if you go back to Visual mode after pasting your pin/board embed code in Text mode, you will probably lose your Pinterest embed code. This means when you publish or preview your post/page, your pin/board will not be there.

The best solution is probably to finish writing your post/page and then embed the Pinterest pins/boards as the last step before you publish.

Final Thoughts

Have you used Pinterest in your classroom or for your professional practice? Have you tried embedding pins or board on your blog?

We’d love to hear from you! Leave a comment and let us know how you are using Pinterest.

43 thoughts on “How To Embed Pinterest Boards And Pins On Your Blog

  1. I have 2 blogs, both different. I have a number of Pinterest boards relating to these different blogs. How can I show just the boards relevant to each blog without viewers needing to see, or access, the boards for the other blog? Is this possible? Thanks for any help

  2. Hi I use Simplesite to post my pins as like a fashion blog. How can I add the METATAG/data to my site. I guess I want everytime someone clicking on a pin to have the simplesite link to refer them. Sorry if question isn’t more thorough. Been having trouble with this. Still new to all this. Thanks.

  3. One question! How do you turn it to text editor vs visual? Is text mode the same as coding? (I am on Bluehost for wordpress). I have tried embedding the URL and the widget codes everywhere I can find, nothing is working. Otherwise amazing instructions! I’m sure I’m just missing one easy thing.

    1. Hi Hannah,
      Yes, the text mode is the section where you will see your HTML code. You can toggle between text and visual at the top of your blog post editor.
      Also, remember not to go back to visual mode when you’ve put the code in otherwise you will lose it.
      Good luck!
      Kathleen

  4. Thank you so much for this! I still cannot make it work using the Embed Widget from Pinterest, but I was able to do it straight on my page. This was so helpful!!

  5. Oh my goodness! I am so thankful that you wrote this post. I had been trying for hours to embed a board on my post and not understanding where the code kept going every time I switched back to visual! You saved my sanity!

  6. Thanks for the tutorial! I was able to embed these pins thanks to your tips, especially the one about switching back to visual mode before publishing erases the pin code. That was very helpful information, thank you!

  7. Wow, thank you for this great post – this is the only tutorial that has worked for me for embedding a board in a blog post. I really appreciate your clear directions!

  8. This doesn’t seem to be working for me. When I use the widget builder and paste into wordpress, on preview mode it just shows a link for the second URL and doesn’t show my pin at all. I can directly copy the pin URL and it works fine but I want to use widget builder to change the format. Can anyone help? 🙁

    1. Hi Antonia,
      Not sure if this helps but I find I have to do it all in the text editor. If I got back to visual editor after inserting the code, it disappears (or if I edit the post again in the future). I wonder if this is the issue for you? If not, I hope others might have more ideas! 🙂

      1. @Antonia

        That disappear thing was also happening with me, however I found solution that we just need to put in newline by that way whether you go in visual editor or text editor your markup will saw as it is. Below is the example code:


        Let me know if it works for you and others.

  9. Thanks for the help Kathleen! Pinning my first post now! 🙂

    A question though, when I have done the above there appears to be a link to my pinterest profile below the pin. Is that normal to the new update? I would really like the pin to only show the graphic I made.

    1. Hi Marianne,
      I just tried this out myself and you’re right about the profile. It must be a new change. It looks kind of obtrusive, doesn’t it? What a shame! I haven’t come across a solution yet but please let me know if you find one 🙂
      Thanks!
      Kathleen

  10. I am trying to have my recent pins from pinterest appear in the sidebar on my blog page. It used to and then suddely it stopped. I followed the instructions above but nothing is showing up. Any suggestions as to what might be happening?

    1. Hi Eve,
      I’m not totally sure but whenever I change something in a post, the Pinterest code disappears and I have to reinsert it. Maybe this has happened on your sidebar? You could try deleting the widget on your sidebar and re-doing it if you haven’t already. Also, check that that second line of code is still there. Failing that, maybe try asking Pinterest for advice? https://help.pinterest.com/en/login-request
      Please let me know if you find out the answer!
      Kathleen

  11. This is a new discovery of mine. I’m wanting to use the Pinterest widget for gift ideas in my blog post. I have made custom sized widgets to put in the post and they work fine, but not all of my pins are showing up. They cut off at 50 pins. Do you know of any way to override this? Thanks!

  12. This is amazing!
    I had no idea about this. I have a pinterest account with boards but have only pinned things to them & not used them for my blog posts. Thanks, Kathleen!

    1. Hi Julia,

      I’m with you! I only recently discovered the potential of using Pinterest boards in blog posts too. For example, on a recent post about digital citizenship, I embedded some boards with videos, activities, games etc on the topic. Such a handy way to share resources!

      Glad the post was helpful. 🙂

      Kathleen

Leave a Reply

Your email address will not be published. Required fields are marked *