Sunday, July 14, 2013

how to: create custom pinterest "pin-it" button on images

i've had a lot of requests for this tutorial so hopefully this will help all of those who have asked! if you guys are new, then i'll just quickly note that this tutorial is for a hovering effect over pictures with the custom pin button for pinterest attached.  i will help you to not only install your pin button but also show you how to place it on your piccy. at the end, i included some pre-made 'pin' buttons for you to use, too, if you're interested!

 so let's get started. 


first, find yourself a super classy picture like this.
haha just kidding.

1. create 'pin it' button URL link: 
like always, i use photoshop to do my work but there are free alternatives you can use like gimp or picmonkey to create your own pin button. you can also google 'pin' images and pick one or use some of the options i have made below. once you have decided on an image, upload it onto photobucket. there will be a share button that you click on and then you'll see the direct link option to copy from. keep it ready for the next step.


2. install code:
go to template>> edit html
locate the < / body > tag near the bottom of the template and copy the code below and insert it right above that tag.


to use your own button, replace the URL in line three with the direct link URL to the image (from step one). make sure when pasting, to stay in the quotes of the code or else the coding won't work. 
to reposition the button replace center in line four with one of these positions: 
topleft
topright
bottomleft
bottomright 
save your work, and then you're done! 
oh, and here are some pins for you with the direct link URL already attached: 

 

hope this helped! 
as always, comment below for any questions. 
 photo siggyy_zps70e45f8d.jpg

41 comments:

  1. I was looking everywhere for this tip! thanks! xx

    Martyna | NEON MIZZLE

    ReplyDelete
  2. mmkay hi. you saved me with this tutorial. i've been trying to figure this out for ages! thanks mamas!! xx
    jess

    ReplyDelete
  3. yessss besides your awesome tutorials, just had to say that you are beyond awesome because you are eating chick-fil-a on your wedding day.
    i ate mc donalds but you know, i'd say they're pretty much on the same level of class.

    ReplyDelete
  4. Hi, Rylee! First off, really love your blog tutorial posts {and your blog in general!}... for once, written in language I can understand! I'm having a slight issue with the Pinterest button... I have the button working right now. However I want all my pictures to automatically resize. I did this through CSS and HTML and it worked great... Using:

    .post-body img, .post-body .tr-caption-container {width: 600px; height: auto;text-align:center;margin-left: 0em; margin-right: 0em;}

    BUT this made the pinterest button ENORMOUS as well. Like I said, I did it through CSS and the template HTML and just couldn't get it to work so I took it down for now.

    Long story short: if you know what might be causing this issue and how to fix it, I'd be super grateful! I've been troubleshooting for the past 3 hours!!! Thankssss so much!!! xxxx

    ReplyDelete
    Replies
    1. Did you ever figure out how to fix this?! I'm having the same problem right now :(

      Delete
  5. I don't know what I'm doing. This one never works with meee!... But, I cherish your tutorials dear. And thats comin straight from the soul. haha! :)

    ReplyDelete
  6. Thanks Rylee, this worked perfectly for me.

    ReplyDelete
  7. I cant get this to work :( maybe i dont know what i am doing! haha, where does the photobucket step come into this? Please help me out!!! thank you!!!

    ReplyDelete
  8. yay finally got it to work on typepad. i'm a bit clueless when it comes to this stuff.


    featherandstones.typepad.com

    ReplyDelete
  9. OMG! You're awesome. Thank you so much. I was searching for something exactly like this!

    ReplyDelete
  10. Thank you so much for this! But how can we prevent it from pinning our signatures?

    ReplyDelete
  11. Omg...thank you for sharing this awesome tutorial! This is what I need!

    ReplyDelete
  12. thank you so much for the useful tutorial and the cute buttons!

    janinkanin.blogspot.com

    ReplyDelete
  13. BEST tutorial/coding for this. THANK YOU! You're simply wonderful.

    ReplyDelete
  14. Pinterest has introduced Pinterest Pin It button, Follow button, Pin widget, Pinterest Profile widget and Board widget for websites and blogs to help drawing more and more online traffic.You have shared helpful post about pinterest pin it button.
    website design

    ReplyDelete
  15. Thanks so much! Made my blog so much cuter!

    http://imjustadaughter.blogspot.com

    ReplyDelete
  16. Thank you for this helpful instruction! Is there a way I can disable the button though for some images? Hope you can help me out!

    ReplyDelete
  17. Thank you so much for this helpful instruction!

    ReplyDelete
  18. Thank you for the lovely icons and tutorial. This is exactly the sort of thing I was after, many thanks.

    P.s. the last two image urls though are mixed up, but it wasn't a problem, i realised what had happened, but thought I should let you know! :D

    ReplyDelete
  19. Your tutorials are so incredibly helpful. Thank you so much for sharing!

    xo, Kylie Rae

    ReplyDelete
  20. This was just what I was looking for! Thanks so much for the tip!

    ReplyDelete
  21. Thank you so much! this is great tip! I´ve looked this everywhere!

    ReplyDelete
  22. Super easy tutorial and adorable graphics--THANK YOU!!

    -Emily

    ReplyDelete
  23. awesome tut, thanks for sharing this!!

    ReplyDelete
  24. Hi Rylee, great tutorial - thanks!
    How did you manage to get your Pin buttons to have a transparent background? I edited mine in photoshop before uploading to imgur and photobucket, but they have a white square around them :( I gave them a transparent background in adobe, so don't know what I've done wrong!
    Thanks!

    ReplyDelete
    Replies
    1. This comment has been removed by the author.

      Delete
    2. Save your button as a png instead of jpeg and then upload it. :) jpeg doesn't support transparent backgrounds :)

      Delete
  25. Oh my goodness, I love this! I have tried various tutorials (some very complicated and I have not been able to make it work until now! Thank you so much for this and the cute buttons too!

    ReplyDelete
  26. Thanks so much for this tutorial! I have a pretty 'pin it' up and running on my blog now: http://www.swoodsonsays.com

    ReplyDelete
  27. thank you, thank you, thank you!

    ReplyDelete
  28. Thanks lady love! You are the best!!!!!!!

    ReplyDelete
  29. THanks = http://prasadbrao.blogspot.in/

    ReplyDelete
  30. You are amazing. I have been looking high and low on a user friendly way to do this. You made it so user friendly even for a beginner blogger such as myself.

    ReplyDelete
  31. Hi. When I was researching for my blog post “6 ways to improve your Pinterest” on my blog (http://sofiacblogs.wordpress.com/2014/08/11/6-ways-to-improve-your-pinterest) I came across this tutorial and decided to share it as a resource. Thank you for sharing this tutorial :)

    ReplyDelete
  32. Hi Rylee! My pin it button works just fine, but whenever I hover over any of my pictures, the entire photo shifts to the side. Visit my blog and hover over a picture to see what I mean. Do you have any idea why this would be happening? It stays still if I don't have the pin it button.

    Sue//Chevron and Lace
    susanstange.com

    ReplyDelete
  33. It worked. Thank you for sharing the codes. :)

    ReplyDelete
  34. This comment has been removed by the author.

    ReplyDelete
  35. Thank you so much for the cute pins!

    -xoxo
    withlovejean.com

    ReplyDelete