Add a Pinterest Pin Button to Your Blog

Earlier today Pinterest posted about their new buttons. This included a bit of code to create a PinIt button that will initiate a pin for a specific image. That got me thinking.... how great would it be to have a button that I could put on my blog that would behave just like the bookmarklet and initiate a pin where the user can still pick what image they are interested in pinning? This would be great for encouraging others to pin your creations, and help spread the word about your blog.

Now, there may already be an easier way to do this. I am certainly no expert at Pinterest (or Blogger for that matter). But here is the little bit of code I used in Blogger to embed the happy little Pinterest button you an see in the lower right of this post. Fell free to swipe this, or to point out any existing official code from Pinterest itself to do this.

First, you need to be in "Edit HTML" mode to edit the HTML of your blog's template directly. I suggest backing up your template before making any changes. You may need to check "Expand Widget Templates" depending on where you put the button. 
Add this piece of Javascript right before the </head> tag:

<script type='text/javascript'>
function pinit() {
    var e= document.createElement(&#39;script&#39;);
    e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;);
    e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;);
    e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39;+Math.random()*99999999);
    document.body.appendChild(e);
};
</script>

Next, add this line where you want the button to appear on your blog. I added mine to the post footer.

<a class='goog-inline-block share-button pin_it_button' expr:onclick='&quot;pinit(); return false;&quot;' target='_blank'/>

Lastly, add this to the CSS to make your button pretty. You may also want to modify or add to this CSS to get the button positioned just how you like it where you decide to put it. UPDATE: This code goes at the end of the CSS section. If you're not sure what part that is, try searching for '/* Footer' without the quotes. Pasting it right after the block of code it is a part of should work fine. If you don't have a Footer section, try search for '/* Content' instead. The new code being added is in bold below.


/* Footer
----------------------------------------------- */

.pin_it_button {
    overflow: visible;
    width: 51px;
    height: 26px;
    margin-right: 1px;
    font: normal normal normal 11px/normal Arial, sans-serif;
    background-color: transparent !important;
    background-image: url("http://assets.pinterest.com/images/pinitbutton_sprite.png") !important;
    color: #CD1F1F !important;
    background-position: 0px 0px !important;
    background-repeat: no-repeat no-repeat !important;
    cursor: pointer;
}


.pin_it_button:hover {
    background-position: 0px -27px !important;
}

It's by no means perfect, and is just the result of me messing around for a little bit, but I hope that this is useful to someone.

UPDATE: I've had some inquiries on where to insert the button code to get it to look exactly like mine. I will try to give enough detail to mimic mine below, but all the code you need to have for the button to work is above. This is strictly to get your footer layout to mimic my own.


Just to be clear, I'm about to describe where to put the 2nd bit of code from above.


Do a search for '<!-- quickedit pencil -->' without the quotes. You should see a bit of code that looks like below:


  <!-- quickedit pencil -->
        <b:include data='post' name='postQuickEdit'/>
      </span> <div class='post-share-buttons goog-inline-block'>
        <b:if cond='data:post.sharePostUrl'>
          <b:include data='post' name='shareButtons'/>
        </b:if>
      </div> </div>


We are going to insert some code in between the second and third lines of this section. You should change the above block to look like this:


<!-- quickedit pencil -->
        <b:include data='post' name='postQuickEdit'/>
      </span>


      <span class='post-icons' style='float: right;'>
          <a class='goog-inline-block share-button pin_it_button' expr:onclick='&quot;pinit(); return false;&quot;' target='_blank'/>
      </span> 
      
      <div class='post-share-buttons'>
        <b:include data='post' name='shareButtons'/>
      </div> </div>

The new code is in bold, the rest of the difference is just spacing to make it easier to read.


I hope this helps. If you have any questions, don't hesitate to leave a comment - they're emailed straight to me. :)

** UPDATE 6/11/12 - Due to the high volume of traffic to this post, I can no longer help troubleshoot each person's individual issues attempting to add this button - each problem takes a long time to troubleshoot, and I just can't afford to take that much time away from my family any longer. It has worked for 100s of people - these instructions do work. If you are having issues, please double and triple check you followed each step precisely. One common gotchya is extra characters from people copy-and-pasting straight from my blog - so if it's not working you may also want to try typing in each section of code yourself. Also check for any typos.

<3 Kelsey

Short Wins

<3 Kelsey :)

I Need Your Help

So, this is me:

And this, for a full body view:

And I am in desperate need of a hair cut. I'm feeling a bit daring, and tired of the same haircut I've had for most of the last decade, and I think I'd like to go a bit shorter. I've made a Pinterest board of styles that I am considering, and I was wondering if you might take a moment to make sure I don't make a big mistake. I'm interested in knowing which ones you *don't* like as much as ones you do like.

Sorry to be bringing my personal decisions on here, but I figure crowd sourcing will at least keep me from massive regret once the braveness wears off.

At the very least, it'l always grow back. :)

<3 Kelsey

Pinterest

Have you heard of Pinterest yet? It's a website that allows you to create a virtual inspiration board for just about anything you find on the internet.  If you do any kind of design or creative work then this app is for you!

It differs from other bookmarking and favorite-ing tools because you browse your marked pages visually, with a picture you select fromt he page representing each item. Here is an example of a board I made of dresses:

dresses I love

I also use it to visually capture crafts and fabrics I want to create with myself some day.

Quilt and Quilt Blocks

Boy Quilt Fabric Selections

This makes it super easy to re-find that fabric bundle you saw the other day or the pillow that really inspired you without having to try a whole set of links. You also can browse other people's boards, which is great for finding inspiration. I really love this board:

where I want to be

It has so many amazing inspirational rooms.

Pinterest is still in private beta, so you need an invite to join.  You can sign up for the wait list to get an invite, or you can use an invite from a current user. If you need an invite, leave me a comment below!

<3 Kelsey

Naked Bed Challenge

In case you haven't seen it, head over to the last piece to read about the Naked Bed Challenge.  This oh so conveniently popped up just as I was in the planning stages for a quilt for a friend of ours who was getting married a short 3 weeks later. The wedding was actually a week and a half ago, but here I am finally posting pictures. :)

This quilt began with a littlelot bit of luck. I won this giveaway from Quilt Dad, and won a whole bundle of fat quarters from Art Gallery Fabrics. Check out this FQ goodness:

Here is the full view of the quilt. The quilt is designed to cover a full/double sized bed, but is so long we could only get a shot of it sideways without risking getting it all dirty. In typical Kelsey fashion, I finished it up about 30 minutes before the wedding started, so I don't have a lot of pictures. Just pretend it is lying on the bed with the pink end up by the pillows. :)

The final dimensions are 74" x 104". This is a little long for a full, but I always like to have a little extra length to tuck and still reach up over the sleeping pillows. 

This quilt came together unearthly fast. I put the whole top together in about 3 evenings, cutting and all. Plus it is fat quarter friendly - one fat quarter per row. I used 14 fat quarters in all, but if you wanted to shorten it a bit you could use 12 and still have a fine full sized quilt. I called this quilt "Behind the Closet Doors" because it reminds me of Japanese inspired closet doors (like this one) with colored frosted glass. It is my own design. 

Unfortunately my picture doesn't do justice to the fabrics. I suggest you check out Quilt Dad's giveaway post to get a better idea of what these prints look like. The effect in person is of a much more calming, modern, gradating rainbow.

I wanted the quilting to reinforce the simplicity of the closet door effect, so I did stitch in the ditch quilting for all of the long vertical seams, and quilted 1/4" to the top and bottom of each colored rectangle.

Maybe someday I can get y'all a picture of it in the wild. :)

<3 Kelsey

PS Linking up to Fabric Tuesday! :)

Flying Goslings? (do. Good Stitches, April 2011)

This months quilt is being led by the wonderful StitchedInColor. She gave us a very broad directive to create any sized blocks in any pattern as long as it used a saturated rainbow effect.  Here is the design inspiration she gave our group:

Click on the picture to go to Flickr to get the links for each individual picture.

I've been on a serious flying geese kick, and here is what I came up with:

This is my favorite of the two blocks. The smallest geese are a mere 3/8" tall (~1cm).  Ironically, it wasn't the tiny geese that were the problem, but rather the curved piecing to set the two strips of geese into the block! I used this blog post from Victoria @ Bumble Beans to discern the basic technique.

Here is a mosaic of the blocks submitted for this month so far:

Aren't they just lovely?

<3 Kelsey

P.S. Linking up to sew & tell, Lily's Quilts, and Fabric Tuesday.

do. Good Stitches March 2011

Part way through March I was accepted into the Faith circle of the do. Good stitches charity bee. Each month one of our quilters picks a quilt design and we all make 2 or so blocks and mail them to the quilter.  For March we used Kathy Doughty's "Stashbuster" pattern from "Material Obsession 2" in a "fresh" color palette. I used mostly Tula Pink with a smidgeon of FMF and Oval Elements from Art Gallery fabrics thrown in.  Here are my two blocks:

I really love the two faces in this one.

I had a little trouble at first because printing directly from my browser slightly changed the scale of the templates despite me checking the box for no scaling. But I was able to save them by printing them properly and tracing them on the back with a water soluble marker and following those lines instead of the standard 1/4 inch, resulting in slightly scant seams. Hopefully no one will be able to tell the difference once it is all together!

Here is the mosaic of all of our blocks together:

Click over to Flickr for the individual links to each photo.

<3 Kelsey