How to add a Pinterest graphic to your blog (and why you should)

0
182
Fuzzy Ink Stationery How to add a Pinterest graphic to your blog feature

Hands up if you have a genealogy blog or website, or are thinking of starting one? If the answer is yes then lets have a chat about Pinterest. About why you need to start including a pinnable Pinterest graphic with your posts. And yes, even if you aren’t a user yourself.

Pinterest is a useful genealogy toolbox asset for many family historians and storytellers. It’s a great way to gather tips, resources and articles that you can come back to later. And because it’s a search engine then those pins get shared* which will help your audience grow. As a result you are helping even more people.
*This does not include items pinned onto secret boards or on private accounts.

So what if you don’t use Pinterest? Ah, but your audience might. So you need to make it easy for them to shout from the rooftops how great your content is. It’s going to be easier to show you what I mean.

The No Pinnable Pinterest Graphic Option

When you are scrolling through the millions of images, what jumps out at you? That’s right, the vertical images with a great photo and big, easy-to-read text. You might save the Pin for later, or click through to the website to see what it’s all about. Or both. But what about all the squares with text and no photos? Do you click on those to see if it is of interest or do you scroll right past?

Examples of a browser generated Pinterest graphic

A cooper's tale no Pinterest graphic Time travelling through my ancestry no Pinterest graphic Fuzzy Ink Stationery no Pinterest graphichic

Okay, these aren’t terrible but they don’t tell you much about what to expect if you click. So you probably won’t. Unless there is only one or two in your smart feed, you are likely to ignore them. And if you have a board full of these little coloured squares then they tend to blend together. Which means that a lot of people are missing out on content that would be of value to them.

First of all, let’s look at the difference between two sites. One has a pinnable Pinterest graphic and the other doesn’t. The only way to tell is to install the ‘PinIt’ button for your browser.

Fuzzy Ink Design Studio no Pinterest Graphic
Website example with no Pinterest graphic
Fuzzy Ink Stationery with Pinterest Graphic
Website example showing a pinnable Pinterest graphic

The two examples are quite similar, but the second one includes a pinnable graphic. It has a logo, as well as a summary of the site and a URL. It’s a great idea to include your website address so then your audience know where to find you. I can pin that and know that it has enough information for others to decide whether it’s useful to them.

If your blog or website has a home page, then I recommend including a generic pin like this one. If not, then you can still add one in a blog post, as well as an article specific Pinterest graphic.

The best part is, if you use Blogger or WordPress then you can hide the image. Then it’s only visible when someone clicks the ‘PinIt’ button and it doesn’t mess with your article.

A Pinterest graphic in action

As I already mentioned, vertical images with large text and photos work best on Pinterest. Take a look at these great examples from some genealogy bloggers to see what I mean.

Amy Johnson-Crow

Pinterest graphic – Should you take Ancestry's Suggestions?
Should You Take Ancestry’s Suggestions? Published by Amy Johnson-Crow
Do you have a defective ancestor Amy Johnson-Crow pinnable Pinterest graphic
Do you have a defective ancestor? Published by Amy Johnson-Crow
4 Things to Do When Using a Genealogy Database Amy Johnson-Crow pinnable Pinterest graphic
4 Things to Do When Using a Genealogy Database. Published by Amy Johnson-Crow

Family History Daily

How to view thousands of free records on Ancestry without a subscription Family History Daily pinnable Pinterest graphic
How to view thousands of free records on Ancestry without a subscription. Published by Family History Daily
These old passport applications may hold the genealogy info you're missing Family History Daily pinnable Pinterest graphic
These old passport applications may hold the genealogy info you’re missing. Published by Family History Daily
50 free genealogy sites to search today Family History Daily pinnable Pinterest graphic
50 free genealogy sites to search today. Published by Family History Daily

The Occasional Genealogist

Be Prepared, To Research. A System to Help Occasional Genealogists. The Occasional Genealogist pinnable Pinterest graphic
Be Prepared, To Research. A System to Help Occasional Genealogists. Published by the Occasional Genealogist
Intermediate Genealogy Evaluating Books The Occasional Genealogist pinnable Pinterest graphic
Intermediate Genealogy Evaluating Books. Published by the Occasional Genealogist
Why You Need a Genealogy To-do List The Occasional Genealogist pinnable Pinterest graphic
Why You Need a Genealogy To-do List. Published by the Occasional Genealogist

And here are some of mine to show you what I do.

Fuzzy Ink Stationery 5 planning tips for writing your family history plus free writing planner pinnable Pinterest graphic Fuzzy Ink Stationery create a custom card using Canva pinnable Pinterest graphic Fuzzy Ink Stationery All-in-one genealogy worksheet free download pinnable Pinterest graphic

The pins don’t need to be identical, in fact it is better if they are not. Each pin is a little different but these bloggers use a set style for their Pinterest graphics. So their pins stand out and are recognisable in the smart feed. Colours, photos and sometimes even the fonts change but it’s still clear where a click will take you.

They all include images, easy to read text and the url of the website. Which is great, so if the link doesn’t work then you still know which site the article came from. The title tells you what the article is about so you know before you click.

While I’ve spent a lot of time talking about it, the process is actually simple. Once you decide on your style then it’s quick and easy to create a new pin for every blog post.

Creating a Pinterest Graphic

The Process

  1. create the Pinterest graphic
  2. export as a JPG or PNG
  3. upload the image to WordPress or Blogger
  4. insert into the post
  5. edit the HTML code to hide the image so it won’t show when you hit publish
  6. publish the post, hit the browser PinIt button and see your Pinterest graphic ready to pin

And it’s even easier than it sounds because you can create a Pinterest graphic in many software programmes. As long as you can resize the page and export as a JPG or PNG. I recommend Canva, PowerPoint or Photoshop.

Step 1. Create the Pinterest Graphic

Experiment with colours and fonts, but when you find a format you like, stick with it. Then use that as a template to create all your pins. People will get to know your pins, and associate that design with your great content.

Canva.com have a selection of Pinterest templates (both free and paid). Or try one of the layouts from my pinnable Pinterest graphic PowerPoint template. There are eight unique layouts to choose from so you can experiment to find one perfect for your blog.

Fuzzy Ink Stationery pinnable Pinterest graphic template AFuzzy Ink Stationery pinnable Pinterest graphic template BFuzzy Ink Stationery pinnable Pinterest graphic template CFuzzy Ink Stationery pinnable Pinterest graphic template D Fuzzy Ink Stationery pinnable Pinterest graphic template FFuzzy Ink Stationery pinnable Pinterest graphic template EFuzzy Ink Stationery pinnable Pinterest graphic template GFuzzy Ink Stationery pinnable Pinterest graphic template H

 

Step 2. Export the Pinterest Graphic

Follow the prompts of your software program to “Save As” or “Export” the artwork as a JPG or PNG. Use web resolution (72 or 96dpi) to keep the file size manageable.

Step 3. Upload the Pinterest Graphic

Follow your normal process to upload and the insert the image to your blog.

Step 4. Insert the Pinterest Graphic into the post

Use the same steps you normally follow to an image into your blog post. Because you’ll need to edit the code I recommend adding these at the end of the post.

Step 5. Hide the Pinterest Graphic

Now the magic happens! Edit the HTML code to hide the image so it won’t show when you hit publish. I’ve included the steps below for both WordPress.com and Blogger sites.

WordPress.com
  • Click the HTML tab to edit the code
  • Look for the code for the Pinterest graphic you added. It will look something like:
    <img src=”https://yourblog.files.wordpress.com/2017/12/thefilename.jpg” alt=”Change or add an alt tag” width=”1875″ height=”2813″ class=”alignnone size-full wp-image-22″/>
  • Add <div style=”display: none;”> in front of the <img> tag.
  • Add </div> at the end of the <img> tag
  • You should then have something that looks like
    <div style=”display: none;”> <img src=”https://yourblog.files.wordpress.com/2017/12/thefilename.jpg” alt=”Change or add an alt tag” width=”1875″ height=”2813″ class=”alignnone size-full wp-image-22″/></div>
  • Click the Visual tab
Blogger
  • Click the HTML tab to edit the code
  • Look for the code for the Pinterest graphic you added. It will look something like:
    <div class=”separator” none=”” style=”clear: both; text-align: center;”>
    <a href=”https://3.bp.blogspot.com/-vMxOYufx9jk/Wj8JmdpQ-CI/AAAAAAAAAj4/a4m8K-y2zKkKypP0TZ4ou8Pq42LfdOUaACEwYBhgL/s1600/Fuzzy-Ink-Stationery-Pinterest-Graphic-1.JPG” imageanchor=”1″ style=”margin-left: 1em; margin-right: 1em;”><img border=”0″ data-original-height=”1600″ data-original-width=”1067″ src=”https://3.bp.blogspot.com/-vMxOYufx9jk/Wj8JmdpQ-CI/AAAAAAAAAj4/a4m8K-y2zKkKypP0TZ4ou8Pq42LfdOUaACEwYBhgL/s1600/Fuzzy-Ink-Stationery-Pinterest-Graphic-1.JPG” /></a></div>
  • In the <div> tag, add display: none; after text-align: center; before the the quotation marks.
  • You should then have something that looks like
    <div class=”separator” none=”” style=”clear: both; text-align: center; display: none;“>
    <a href=”https://3.bp.blogspot.com/-vMxOYufx9jk/Wj8JmdpQ-CI/AAAAAAAAAj4/a4m8K-y2zKkKypP0TZ4ou8Pq42LfdOUaACEwYBhgL/s1600/Fuzzy-Ink-Stationery-Pinterest-Graphic-1.JPG” imageanchor=”1″ style=”margin-left: 1em; margin-right: 1em;”><img border=”0″ data-original-height=”1600″ data-original-width=”1067″ src=”https://3.bp.blogspot.com/-vMxOYufx9jk/Wj8JmdpQ-CI/AAAAAAAAAj4/a4m8K-y2zKkKypP0TZ4ou8Pq42LfdOUaACEwYBhgL/s1600/Fuzzy-Ink-Stationery-Pinterest-Graphic-1.JPG” /></a></div>
  • Click the Compose tab

Step 6: Publish the post

Finally, when you are ready, click Publish or Update (if editing an existing article) to publish the post. Then click the browser PinIt button to see your pin.

Don’t forget to add the PinIt button to your browser

Click the following link and follow the prompts to install as an add on, extension or to your bookmark bar. The options available will depend on your web browser of choice. Click here to add the Pinterest PinIt button to your browser.

Pinning to Pinterest

  1. Click the ‘PinIt’ button
  2. Select the image you want
  3. Add it to your board of choice.

Grab you copy of the pinnable Pinterest graphic bundle

Finally, grab a copy of the pinnable Pinterest graphic bundle to get you started.

  • Pinterest graphic PowerPoint template with 8 unique layouts as well as Quick Tips to step you through the process.
  • Cheat sheet for using Canva
  • WordPress.com step-by-step guide
  • Blogger step-by-step guide

You’ll find the Pinnable Pinterest Graphic bundle in the resource library. Already a member? Check the most recent newsletter for the link and password. Not a member? Add your details below and check your inbox.

Leave a comment below

So, have you tried adding pinnable Pinterest graphics to your blog? Or do you plan too? Maybe you have a tip to share from your own experience? Leave a comment below or send me an email and let me know.

Fuzzy Ink Stationery how to add a Pinterest graphic to your blog
Fuzzy Ink Stationery how to add a Pinterest graphic to your blog
Fuzzy Ink Stationery how to add a Pinterest graphic to your blog

LEAVE A REPLY

Please enter your comment!
Please enter your name here