Header Ads

  • Breaking News

    How to Add Pinterest Pin-it Button

     

    The Pin It button

    Overview

    One of the easiest and most important things any website can do to help people to discover their stuff on Pinterest is to install the Pin It button. The Pin It button makes it super simple for people to save and share things they find on your site. These Pins link back to your website and increase the spread of your content across Pinterest.

    The Pin It button is easy to integrate. You just copy and paste a few lines of HTML and JavaScript into your pages, and you're ready to go. 

     

    <a href="http://www.pinterest.com/pin/create/button/
            ?url=http%3A%2F%2Fwww.flickr.com%2Fphotos%2Fkentbrew%2F6851755809%2F
            &media=http%3A%2F%2Ffarm8.staticflickr.com%2F7027%2F6851755809_df5b2051c9_z.jpg
            &description=Next%20stop%3A%20Pinterest"
            data-pin-do="buttonPin"
            data-pin-config="above">
            <img src="//assets.pinterest.com/images/pidgets/pin_it_button.png" />
        </a>

     

    You'll also need to include some JavaScript in your HTML document. To immediately load our JavaScript, include this line just above your closing </body> tag: 

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

     

    If you'd like to load the JavaScript asynchronously, you can do so by copying and pasting this snippet anywhere on your page: 

    <script type="text/javascript">
    (function(d){
        var f = d.getElementsByTagName('SCRIPT')[0], p = d.createElement('SCRIPT');
        p.type = 'text/javascript';
        p.async = true;
        p.src = '//assets.pinterest.com/js/pinit.js';
        f.parentNode.insertBefore(p, f);
    }(document));
    </script>
    

    You only need to load this script once per page, no matter how many buttons or widgets you use. 


    Tips for best results

    Misconfiguring the Pin It button can lead to issues. Here are some important tips to make sure you're delivering a great experience to Pinners.

    Include both the page and media URL you want to share

    The Pin It button is a link that opens our Create a Pin form, pre-filled with the URL, image and description of the Pin.
    To make the form work, we need a page and media URL. If you click your Pin It button and the bookmarklet pops up (showing all the images on your page in a grid) instead of the form, it's because we didn't receive both URLs. It could also happen if one or both of the URLs didn't start with http or https.

    Be sure to encode the page and media URLs

    Sometimes you have the page and media URLs, but they're encoded incorrectly. That can happen when the first URL includes an extra question mark.
    Visual signs that this is the case: you click the button and the bookmarklet appears with the grid of images, the Create a Pin form appears with a broken image or you click Pin It from the Create a Pin form and then there's a problem on our end.
    To fix this, we need to percent-encode our URL parameters. How can you tell if you're percent-encoding correctly? Check your URL against the one that our Widget Builder creates.

    Use images at least 750 pixels wide

    It's always a letdown for people when they see an image they love in the preview form, but it comes out as a tiny thumbnail on Pinterest. For best results, Pins should come from source images that are at least 750 pixels wide. The images don't have to appear that big on your page. They just need to appear at that size in the media URL.

    Write a great, one sentence description

    People love it when the default description for a Pin makes sense so they can refer back to it later. Who better to write this than you? We could write an entire blog post on this topic alone (and we might!), but for now, just remember to create a short, punchy description of the object with at least one complete sentence.

    Pop the right form

    When you pop open the Create a Pin form, use this base URL:
        http://www.pinterest.com/pin/create/button/
    
    ...and not the one that appears when you use the bookmarklet. They're different, and using the wrong one can affect analytics reporting.

    Update your JavaScript

    Some companies aren't allowed to use third-party JavaScript. If you're working somewhere where you need to host a copy of our JavaScript, star this GitHub repository:
        https://github.com/pinterest/widgets
    
    ...and update your hosted copy whenever we push. We read all comments and pull requests, so don't hesitate to get in touch there.

    Place our JavaScript in the right spot

    If you're hotlinking our SCRIPT tag (use the single-line method listed as "Easy" in the widget builder), you'll want to put it as close to the end of your BODY tag as possible. Sites run into trouble when our SCRIPT tag goes:
    • in the document's HEAD
    • in a repeating template
    • just above an important, visible part of the page in the middle of the BODY
    • in a long, hard-to-render TABLE tag
    Any SCRIPT tag can block rendering of the rest of the page if the network pauses. Always put our JavaScript at the end of the BODY tag, and never load it more than once. For best results, use our asynchronous loader, available on the Widget Builder when you click Advanced.
    Important to Note: Try not to include our SCRIPT tag on pages that don't have Pinterest buttons or widgets. It's convenient to stick the tag into your global footer template, but you don't want to stick our tag on pages with sensitive material.

    Avoid using inline JavaScript

    Lots of site operators put custom JavaScript in the link instead of running Pinterest's JavaScript. Don't use inline JavaScript like this:
        onClick="window.open(this.href,'_blank', 'width=700, height=300');"
    
    ...to pop up the Create a Pin form. Mixing JavaScript into HTML can be harmful and difficult to keep up, so we'd avoid it altogether.

    Double-check your page for anything broken or missing

    The Pin It button should pop up the Create a Pin form in a small window. If it doesn't pop up, you'll see fewer Pins. That's because people expect Pinterest to look and act a certain way. If your JavaScript is broken or missing, your Pin It button will still work, but it won't be as useful or pretty! You won't get Pin counts and the Create a Pin form will appear full screen, which means people will have to press the Back button to keep browsing on your page.

    Stick to our Pin It button image wherever possible

    Pinners are sensitive to details. If you're using a different image for your button, it's not going to receive as many clicks because it's not as recognizable. Instead, you can use our button straight from our server:
        <img src="//assets.pinterest.com/images/pidgets/pin_it_button.png" />
    





    No comments

    Post Top Ad

    Post Bottom Ad