How to Make Content Portable: Pinterest

While most industry folk spent several days last week (jealously) pondering Instagram’s $1 billion purchase (more of less) by Facebook, I immediately viewed it as a pretty strong statement that the future of social media is visual. We’ve always loved sharing pictures and this is why Instagram became the largest mobile-only social network in only 15 months. It didn’t have any revenue, but it had 40 million Instagrammers and this was what Facebook paid for.

It’s the same reason that Pinterest has had its stratospheric growth. If social media is going visual, you want to make sure all of your visual content — graphics, diagrams, charts and others — is portable. I’ve seen many sites add “Pin It” buttons to the set of sharing options on blogs and Web pages, alongside the Twitter, Facebook, Google+ and LinkedIn buttons. Much is this has been enabled by WordPress plug-ins like Digg Digg that add Pinterest to its options.

But I haven’t seen too many people take advantage of one of Pinterest’s other “goodies”, the free-standing Pin It button for web sites. This tutorial shows you how to use it to make graphical content assets travel like this, and is the second part of my content portability series.

Source: blog.hubspot.com via Ted on Pinterest

How To Embed Pinterest Images

1. Start pinning!

The image above was one that I pinned to one of my Pinterest boards, “Feeding pro knowledge”. It’s my collection of graphics that I come across in my reading that I want to collect and share with others on Pinterest as well as use blog posts such as these. I pinned it from HubSpot’s post on closed loop reporting.

I’ve installed the “Pinmarklet”, which is a Javascript-based bookmarklet that you can add to your browser’s bookmark bar. This is available on Pinterest’s Goodies page. You should bookmark this page as well, as you’ll use another one for the next step.

2. Create “Pin It” button

Go to the Pinterest Goodies page and scroll to the “Pin It Button For Web Sites” one. (WARNING: This step is a little convoluted and I hope that Pinterest will simplify it).

There are two URL’s to grab here. The first is for the page where the image is pinned, which you’ll get from clicking on the image (and ends with a string of numbers). The second is the exact page where the image is located. This typically is URL generated when an image is uploaded to the media library of whatever CMS your web site uses. It will typically end with a .jpg or .png extension. The description field is optional, but I recommend filling it in because that will pre-populate that field when someone wants to pin it to their boards, a time saver they’ll appreciate.

You’ll see the field with the embed code update as you add to the fields above. Once you’ve filled in these three fields, copy the embed code to your clipboard.

3. Add embed code on your web page

As the screen says to the above, you’ll paste this where you want the button to appear. What I did above was center justified the button, along with the image, which I’ll cover in the next step.

4. Add the image itself to your web page

Click on the pinned image again, then click on the Embed button to the right of it. You can resize the image before copying the embed code. Paste the embed code to your web page right after the embed code for the button, which is where it will be placed on the page.

You’ll see from each of these images, which I embedded using the steps above, that there is a source attribution that automatically appears below the image. This is part of the embed code, and has a few benefits. The first is that it saves you the step of having to manually add this below the image. The second is that it very subtly promotes your own Pinterest presence and boards.

While I’ve used my personal boards for these images, this is a major reason that any company, B2B ones included, should have a branded Pinterest page.  Just as SlideShare is a great way make presentation-based content portable, Pinterest should be the default service for making all those diagrams, charts, graphics and illustrations portable, just as HubSpot has done. B2B companies have TONS of these content assets trapped on corporate web sites, in white papers, product brochures and presentations, and internal file servers. You may not think of these as social content assets, but they are.

What’s next?

I hope that Pinterest will add to its goodies, in particularly by combining the Pin It button with the image itself so you don’t have to cobble the two together as I’ve done here. I’m sure it will come.

Have you used some of these goodies? Do you know of any shortcuts? What are your ideas?