Cargo home Twitter Devlog

Adding a Pinterest widget

Last Updated: May 14, 2014 11:18AM PDT
If you'd like to embed a Pinterest widget or button, you can do so with a script in your Custom HTML which integrates Pinterest's "Pin It" with your content.

Start by generating the button or widget of your choice through their Button and Widget Builder . Copy the code from the "Insert the link" text field and place it anywhere in your website.

Instead of copying the code from the "Load the Javascript" section inside the Widget Builder page, add the script below into your Custom HTML:
<script type="text/javascript" data-pin-hover="true">
    function reRenderPin() {
        for (var n in window) {
            if ( n.indexOf('PIN_') == 0 && $("a[data-pin-do]").length > 0)  {
                $("a[data-pin-do]").attr("id", "pinbutton");
                var element = document.getElementById('pinbutton');
                window[n].f.init();
            }
        }
    }
    
    $(document).ready(function(){    
        reRenderPin();
    });
    
    if(typeof Cargo.Event == "object") {
        Cargo.Event.on("project_load_complete", function( pid ) { 
            reRenderPin();
        });
    } else {
        $(document).bind("projectLoadComplete", function(e, pid) {
            reRenderPin();
        });
    }
    
</script>
<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>





You can also turn the Pinterest bookmarklet into a button that allows viewers to Pin any image on the page. Wherever you want to add this button, add this code:

<a href="javascript:void((function(){var e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)})());" title="Pin It" id="BigPinItButton" style="display:inline-block; height:25px; width:49px; background:url(http://passets-cdn.pinterest.com/images/pinit_preview_none.png)!important; text-decoration:none; border:none;"></a>
tickets@cargocollective.com
http://assets1.desk.com/
desk
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
Invalid characters found
/customer/en/portal/articles/autocomplete