Make a colourful button for your Pinterest!

I wanted to place a link on my blog to Pinterest.  Then I came across some instructions on the blog by Bebehblog on how to make a 'Stuffed Pin.'

However, I'm on a Mac with no Adobe Photoshop....so I decided to make my button using Pages which is a word processing programme found in iWork package. 

These are the steps I used.  I opened up a new document in Pages.  You could do the same in Office, but I just like Pages because it's so easy to drag and drop images and text boxes.  

Use 'Shapes,' to create the shape for the button you want to make, then fill with the colour you want.

What should the size of your button be? Well, I just drew the size I thought looked fine.  On the Bebehblog site she suggests 175x175 pixels, some sidebars are smaller so 150x150 might be better or some sidebars can handle a bigger button 200x200 pixels. I just used my trusty eye.

I wanted a black button, so I made my text white. I put the name of my blog at the top... Whiteboard Witch.  I then went and whacked off the Pinterest sign on the Pinterest site. Click on the Pinterest sign and drag this to your desktop. Drag this into pages and place under your blog name.

Make sure you untick 'Object causes wrap,'  and your images are 'floating.'

This is what my button looked like after I've placed my text box and Pinterest on my black background.

I then went into my Pinterest and took a snapshots from some of my boards.  I dragged each snapshot from my desktop into Pages.

My snapshots before I placed them on my button.

I then placed my snapshots under the Pinterest logo.

This my finished button.  After I aligned my photos I took a snapshot of my finished button.   Make sure you click off any photos or text box...before you take your snapshot.  Otherwise you'll get dots in your snapshot.

Preparing your button:

Before you upload your photo to a photo sharing site it needs to be a 'jpg' format.  Once my button was finished I opened up iPhoto.  I dragged my snapshot into 'Photos.'  This imported my button into iPhoto.  I then clicked on my button in iPhoto and went to 'File,' then 'Export.'  I exported my button as a jpg to my desktop. I then uploaded my image 'jpg' to Photobucket.

Once I uploaded my button, I clicked 'share.' This is where you will get the code for your button.  You need the direct code to the image...and this starts with "http://"

A snapshot from Photobucket...next to where it says 'Direct Link,' this is where you copy the code that you will need so you have an image for your button.

This is the code for my button:

<center><a href="http://pinterest.com/whiteboardwitch/"><img src="http://i1165.photobucket.com/albums/q592/Whiteboardwitch/pinwitch.jpg" />

</a></center>

Blue: replace with your Pinterest address.  To get this I went to Pinterest, made sure I was logged in. I went to 'Add' and the 'Pin it Button.'  I scrolled down to 'Follow button to websites.'  Look at Follow me on Pinterest and you'll get your address. Copy http://....../ and place this in the blue part.   The <"img scr="..."> is the the hyperlink code, so when your button is clicked on your blog your visitors are taken to your Pinterest site.  This is the part I got a bit stuck on, as it has to be correct...otherwise our button won't work.

Yellow: replace this with your code for your photo.  See the snapshot above from Photobucket.  Remember you need the Direct Link to your photo and it must start with 'http.....and end with jpg'  The <"img scr="..."> is the 'image source.'  This is the location of your image.

At the start of my code I put <center>....and at the end </center> because I wanted my button to sit in the center of my sidebar.  You can remove this.  But remember your code must end with </a>.  This is how you close the code.

How to get your button onto your blog: 
Got to Design, Layout.  Click on Add Gadget, then HTML/Javascript.  Copy and paste your code into the box and save all changes.  Then view your blog.