trpzgrl
Level 1 (0 points)

Q: How do I get the Pin it button to work on my website?

I am having trouble getting the Pin it button to work. I have contacted Pinterest and they have helped all they could but say it's something with iWeb. When I paste the code into the widget, that looks find, but when I go to my website and click the pin it button I get an oops message.

Any help would be greatly appreciated

thanks

MacBook

Posted on Dec 4, 2014 11:01 AM

Close
trpzgrl

Q: How do I get the Pin it button to work on my website?

  • All replies
  • Helpful answers

  • by Old Toad,

    Old Toad Old Toad Dec 4, 2014 1:34 PM in response to trpzgrl
    Level 10 (141,773 points)
    Photos for Mac
    Dec 4, 2014 1:34 PM in response to trpzgrl

    What is the script/code you're using the the HTML snippet?

    SantaToad.png

  • by trpzgrl,

    trpzgrl trpzgrl Dec 6, 2014 7:31 AM in response to Old Toad
    Level 1 (0 points)
    Dec 6, 2014 7:31 AM in response to Old Toad

    This is the code I am using the Any Image option.

    <a href="//www.pinterest.com/pin/create/button/" data-pin-do="buttonBookmark"  data-pin-color="white"><img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_white_20.png" /></a>

    <!-- Please call pinit.js only once per page -->

    <script type="text/javascript" async defer src="//assets.pinterest.com/js/pinit.js"></script>

    It just gives me a small box that says Pinterest or cancel, but no place to choose a board or add a description

     

    I was using the One Image option, but that was giving me an error message and then I tried the Image Hover option and also received and error message.

    thanks for your help

  • by Old Toad,

    Old Toad Old Toad Dec 6, 2014 1:43 PM in response to trpzgrl
    Level 10 (141,773 points)
    Photos for Mac
    Dec 6, 2014 1:43 PM in response to trpzgrl

    Is this exactly how the code appears in your HTML Snippet box?  After hitting the Apply button resize the box to be larger and then publish the changes without hitting the Apply button again. 

     

    I'm not able to get anything out of the code with an HTML snippet except for the missing image file icon.

  • by Wyodor,

    Wyodor Wyodor Dec 6, 2014 2:33 PM in response to Old Toad
    Level 6 (19,753 points)
    Dec 6, 2014 2:33 PM in response to Old Toad

    The pinterest code is correct. And it works as intended.

     

    When you click the pin button, it will display all the images of the webpage.

     

    But since a HTML Snippet has no images you'll get the alert.

     

    The code has to be pasted in the published pages at the location where the pin button should be displayed.

     

    Then it's part of the webpage and it will display the images on the page when you click the pin button.

     

    Like this non-iWeb page :

     

    http://responsive.2kool4u.net/tech/grid/

  • by trpzgrl,

    trpzgrl trpzgrl Dec 6, 2014 3:16 PM in response to Old Toad
    Level 1 (0 points)
    Dec 6, 2014 3:16 PM in response to Old Toad

    This is the code I got from Pinterest to paste into my HTML snippet box.

    I tried to resize the snippet box, this just showed me a purple box with my website name in it, not any of the photos on the page. I am looking to Pin each photo on each pf my pages on my website, and nothing seems to work as far s the codes from Pinterest.

    thank you

  • by Wyodor,

    Wyodor Wyodor Dec 6, 2014 3:51 PM in response to trpzgrl
    Level 6 (19,753 points)
    Dec 6, 2014 3:51 PM in response to trpzgrl

    Read the text I posted earlier that explains that nothing is wrong with the code and why it does not work.

  • by Old Toad,

    Old Toad Old Toad Dec 6, 2014 4:54 PM in response to Wyodor
    Level 10 (141,773 points)
    Photos for Mac
    Dec 6, 2014 4:54 PM in response to Wyodor

    Have you tried clearing your browser's cache (Command+Option+E for Safari) and reloading the webpage with the code?

  • by trpzgrl,

    trpzgrl trpzgrl Dec 6, 2014 7:48 PM in response to Wyodor
    Level 1 (0 points)
    Dec 6, 2014 7:48 PM in response to Wyodor

    Hi,

    I don't know what you mean when you write :The code has to be pasted in the published pages at the location where the pin button should be displayed."

    I copied the html code from the Pinterest website to the HTML snippet in iWeb. I put the HTML snippet on top of the photo I want to be Pinned.  But it doesn't work. The link you gave me is a website that looks similar to Pinterest, with a pin it button on the top right of the page, but this is not what I am looking to do. I need help getting the Pin it button to work with each photo on my iWeb website. Can you help with this?
    thank you

  • by Ethmoid,

    Ethmoid Ethmoid Dec 7, 2014 12:42 AM in response to trpzgrl
    Level 6 (11,282 points)
    Dec 7, 2014 12:42 AM in response to trpzgrl

    Don't know how that does not make sense or could be clearer - adding code to your published website means just what it says - you need to publish your site to a local folder from iWeb and then add the interest code manually to your published site with a text editor of some description, such as TextWrangler.

     

    When you add code to an html snippet, it will display it, but rather than putting code directly into your site, it displays it as an iframe, which will not give you the effect that you want.

     

    You need to publish your site to a local folder and then open the html pages or pages that you want to put the code in with TextWrangler and then manually place that code where you want it.

  • by Wyodor,

    Wyodor Wyodor Dec 7, 2014 1:49 AM in response to trpzgrl
    Level 6 (19,753 points)
    Dec 7, 2014 1:49 AM in response to trpzgrl

    Here's the solution :

     

    http://wyodor.byethost8.com/Pinterest/widget_markup_file.txt

     

    Copy everything you see and paste it in a HTML Snippet.

     

    Result is this :

     

    http://wyodor.byethost8.com/Pinterest/Welcome.html

     

    Pinterest does not work on Photo pages. Only the small images are used, not the large Photos.