Pinterest profile widget is not working all the time

StackOverflow https://stackoverflow.com/questions/20360340

Pergunta

I added a Pinterest profile widget to my website the way I usually do it when building a website. Normally it works fine but for some strange reason this time sometimes it shows and sometimes it doesn't... This is the website I'm talking about: http://bav.kadushimarketing.com/index4.php

This is the code I added: <a data-pin-do="embedUser" href="http://www.pinterest.com/bonaireartvilla/" data-pin-scale-width="65" data-pin-board-width="230">Bonaire Art Villas's profile on Pinterest</a>

And this is the script I added: 

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

I have a lot of other scripts on this website. Is it possible that these scripts conflict with each other? Is there a way to check?

Foi útil?

Solução 3

I included a very simple "show element on click" jQuery script that conflicted with the Pinterest script.

Outras dicas

In my case the Pinterest widget didn't load itself if I had a "display:none" style on a parent div-element during the pinit.js initialisation. When I removed that style from the parent, the widget finally replaced the a-tag with a bunch of spans, containing the widget data.

Very strange behaviour, but there's a solution...

Add this line for the widget

     <a data-pin-do="embedUser" data-pin-board-width="400" data-pin-scale-height="240" data-pin-scale-width="80" href="https://www.pinterest.co.uk/jojomamanbebe/"></a>

Add these two lines before the closing Body tag

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

You must put the tag of Pinterest at the end of site code, just above the closing BODY tag.

Add these two js file in head section

<script type="text/javascript" async defer src="js/pinit.js"></script>
<script type="text/javascript" async defer src="js/pinit_main.js"></script>

Save files from here: http://assets.pinterest.com/js/pinit.js

http://assets.pinterest.com/js/pinit_main.js

This will work 101%

Add this code just before your closing </body> tag:

<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>

I add to the widget link style="display: block !important"

and is all working now

This rarely works for me, and I'm not doing anything other than what's spelled out by the Pinterest widget page. In the past I've had to resort to some extremely hacky approaches, like using jQuery's .one() binding function to attach the pinit.js code to the page when a particular element is clicked.

UPDATE: Ugh, my bad. (:P) I was trying to reference a profile for inclusion within the board widget -- unworkable. Switching to the profile widget helped tremendously. I still had a little trouble getting the widget to show up on certain devices, but I did get it going.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top