Pinterest Pin It Button 101 (plus a guided pinning tour)

Preface: By adding a Pinterest Pin It button to your blog post(s), you are essentially telling your readers that you are "pin-friendly." In other words, if you don't want your images to be pinned, don't tease people with a button. In fact, you can prohibit pins to your site by following these simple instructions (on Pinterest).

***

Four score and seven years Several weeks ago I promised to share how I added the Pinterest Pin It button down at the bottom of each of my posts (where the other social sharing buttons are).

Note: Pinterest provides - on their Goodies page - some code for adding a similar Pin It button; however, their code must be added to each individual post, as it is being composed, and will appear in the post itself. In other words, if you want your button to automatically display in the footer of each of your blog posts, like mine, the code that Pinterest provides will not work.

So that you can see the difference in the two buttons, I added Pinterest's Pin It button (using code I got right off the Goodies page) below the following image. 

Image Source

Now, GO AHEAD AND CLICK THE BUTTON to see what happens.
(Note: If you don't have a Pinterest account, you'll be taken to a log-in screen.)

Did you see? Good, I'll come back to this in a minute.

Add a Pin It Button to Your Post Footer

Okay, so I don't know about you, but I don't have the time, patience or memory to go over to Pinterest and get the code to add to each post (or even each image) that I publish. So I scoured the web and found some good instructions for getting the button to display in my post footer, near my other sharing buttons.

Interestingly, it was at this exact time that I decided I needed to get my own Pinterest account, and here's why:

I wanted to bookmark those instructions so I could *come back later* and add the button to my blog.

So I did (join Pinterest and bookmark/pin those instructions).

And if you'd like to get them (the instructions), you'll need to go straight to my COOL BLOG STUFF Pinterest board - where they're waiting for the taking. ;)

(Note: You do not need to be a member of Pinterest to look at my board and simply access the instructions.)

Okay, so if you haven't already, GO TO my Cool Blog Stuff board.

Hint: The instructions I followed to add *my* Pin It button are here. However, since then, I came across another set of instructions (for Blogger and WordPress users), which seem to be simpler and more intuitive. (Just know that I have not tested them.)

So What's the Difference in the Two Pin It Buttons?

Remember what happened when you clicked on the Pin It button (below the above image) earlier? Good.

Now scroll to the bottom of this post and CLICK THE PIN IT BUTTON IN MY FOOTER.

Did you see?

So here's the difference: If you use Pinterest's code, you can link the button to a specific image/URL and you can even pre-fill a description of the image (so the pinner doesn't have to).

The footer version of the Pin It button, however, is more generic (although the page URL will always get pinned along with the image selected by the pinner).

I'm not sure I'm a fan of all this pinning business. I don't like needles.

So there you have it! All of this is simple, right?

:)

P.S. If you look at all my boards, you'll notice that I don't have a whole lot of pins in Pinterest, other than "cool blog stuff." That's because I like it that way. My point is, Pinterest has lots of great uses, and doesn't need to be terribly time consuming. 

How to Add a Row of Social Media Icons in Blogger (and possibly other platforms)

Last week I promised I'd share how I added those coffee (or hot beverage for the non-coffee drinkers) cup social icons to my sidebar. No one should have to spend the amount of time I did (searching for directions and subsequently screwing them up a hundred times) to do this on her own blog. It sucked.

So anyway, before I get started, I need to let you know some basic things I'm assuming:

• You aren't terrified of HTML. You don't have to know how to write code, but if you need a muscle relaxer and a brown paper bag to breathe into just looking at code, you should probably avoid this like the plague take a pass.
• You've found and downloaded to your computer the social icons that you'll be using. If you haven't, I'd start by googling "social media icons". There are hundreds of free ones out there, in every shape, size and design. They're simply image files that you'll later be adding links to. I got my coffee cups here.
• You know the URLs of the social media accounts you'll be linking to. (Hover over my coffee cups and you'll see example URLs.) If you don't have an RSS URL for your blog feed, you'll need to go to feedburner.com and create (burn) one.
• You know how to add a gadget to your blog.
• You have room on your blog to add a row of social icons. Hint: My coffee cups would be too large in a more narrow sidebar.

Before you start, open (in two separate windows):

Note: This procedure is written for Blogger; however, the basic mechanics might be adaptable to other blogging platforms.

• A new post in Blogger (the screen where you type your post). Open the Compose (not HTML) editor. 
• The Layout editor in Blogger (the screen where you can add gadgets and move things around). (Design > Layout)

In a nutshell: You will be creating a "dummy" post in Blogger, in which you'll insert your icon images and then link them to their corresponding URLs. Once that's done, you'll copy and paste all the HTML into a blog gadget, and then you'll have social icons on your blog. Yay! 

Unfortunately, it took me several hours to get my images to line up correctly. Don't be like me. 

From the New Post editor:

1. Insert your first icon image (original size, left justified*, make sure the "open link in new window" box is checked).
   Note: Use left if you're adding icons to a right sidebar (like mine). Use right if your sidebar is on the left.
2. Highlight the image and add a link. (You might need to click the Link button twice to trigger the add link pop-up box.)
3. Add the URL that matches the icon. (Ex: If the icon is for Facebook, add your Facebook URL.)
4. Without spacing, insert your next icon image.
5. Repeat Steps 2-3.
6. Repeat Steps 4-5 for each additional icon you are adding in the same row.
   Result: You should see all your icons (however, they will most likely not be lined up correctly - don't worry about this yet!).
7. Switch to the HTML editor. (You will need to move/delete some code to get the icons to line up in a flush horizontal line.)
   
   You need to get your code to look like this (click to enlarge):
   
   
   
   
   There should only be one set of justification tags (the code circled in blue) around all three images. Your top and bottom tags should look exactly like my example here. (To make the code easier to see, I inserted white space around the three different image examples.)
   Reminder: In the top tag, "left" can be changed to "right" or "center," depending on how you want the row justified.
   
   DELETE ALL THE EXTRA JUSTIFICATION TAGS (in between individual image code). Hint: Use Ctrl + F keys to search for the extra code. (Copy the code below when searching, if needed.)
   
   <div class="separator" style="clear: both; text-align: left;">
   
   YOUR IMAGE CODE GOES HERE
   
   </div>
   
   The only code (hyperlink tags) that should enclose each of your images is highlighted in yellow in the screen shot above. 
8. Switch out of the HTML editor (back to Compose) to check your image spacing.
   Result: Your icons should be flush horizontally, like this.
   
   
   
   
   If they are not, go back to Step 7 and recheck your code against my example.
9. Switch back to the HTML editor and copy all of the code.
10. Paste the code into a new HTML/JavaScript gadget window (click Add a Gadget from the Layout screen).
    Note: You can add a title if you like.
    
    
    
    
    Click SAVE.
    Click Preview, and hopefully, your new icons will show up beautifully on your blog!
    Drag your gadget to where you want it (hopefully, at the top of the sidebar).
    Click Save arrangement and you're all done!

~~~~~

This process really isn't complicated, but until you've had practice getting images to line up in a row using an HTML editor, the trial and error can make you want to pull your hair out!

For those who've stuck around to the end, I hope this helps! And if you wind up adding icons to your own blog once you leave here, please come back and say so in the comments so I can go look!

~~~~~

Coming soon (because this post is quite long enough): How to add a Pin it button to individual posts in Blogger and why I decided to join Pinterest!

Happiness is...getting asked to dance!

Especially when treats are involved.

Except when cats walking by are involved.

(at about the 25 second mark)

By the way, Dewi "dances" whenever he hears the video. Poor little dude. :)

~~~~~

In other news:

This week, I've been busy adding snazzy new (coffee cup) social networking icons and Pinterest "Pin it" buttons to the blog. And when I say busy, I mean (because I am less than technically inclined AND I use sometimes-challenging Blogger) it took me hours to get it straight (piecing together information from several different websites and blogs). (The processes are not exactly intuitive.) Anyway, other than because I'd love for you to use my new blog buttons, I'm telling you this because soon (next week), I'm going to share how I did both - or at least point you to the step-by-step instructions - so you can put snazzy social icons and Pin it buttons on your own Blogger blog (if you have one). :)

So look forward to that. And me telling you about how I joined Pinterest on a whim (and can totally see how people get addicted). But not me; I will not get addicted.

Bye bye!