All geek questions in one place

Check if Pinterest browser has Pin it button

I wrote a script to add a Pinterest button to most of the images on my site. The problem is that when someone has the Chrome Pin it extension enabled in their browser, the pin it button is displayed twice for the user.

Does JavaScript have JavaScript to check if this extension is enabled in your browser?

(function($) { $(function() { $('.container img').each(function() { if ($(this).parent('a')) { var $permalink = $(this).parent('a').attr('href'); } else { var $permalink = $(location).attr('href'); } var $permalink = $(location).attr('href'), $title = $('h1.product_name').text() || $('h2.header'); var $linkhtml = $('<a/>', { 'class':'pin-it-button pinme', 'html': '<img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_20.png" />', 'count-layout': 'horizontal', 'style': 'cursor:pointer; position:absolute; bottom:30px; left:0; border:0 none; opacity: 0.4;', 'href': 'http://pinterest.com/pin/create/button/?url=' + $permalink + '&media=' + $(this).attr('src') + '&description=' + $title }); if ($(this).parent('a')) { $(this).addClass('pinme').parent('a').after($linkhtml); } else { $(this).addClass('pinme').after($linkhtml); } $('.pinme').hover( function() { if ($(this).hasClass('pin-it-button')) { console.log('hello'); $(this).css('opacity', '1'); } else { $(this).parent().siblings('.pin-it-button').css('opacity', '1'); } }, function() { if ($(this).hasClass('pin-it-button')) { $(this).css('opacity', '0.4'); } else { $(this).parent().siblings('.pin-it-button').css('opacity', '0.4'); } } ); }); }); })(jQuery);
+5
source share
2 answers

New Pinterest Extension (2017)

introduces the <span> hover button directly under the <body :

 <span style="border-radius: 3px; text-indent: 20px; width: auto; padding: 0px 4px 0px 0px; text-align: center; font-style: normal; font-variant: normal; font-weight: bold; font-stretch: normal; font-size: 11px; line-height: 20px; font-family: &quot;Helvetica Neue&quot;, Helvetica, sans-serif; color: rgb(255, 255, 255); background: url(&quot;data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMzBweCIgd2lkdGg9IjMwcHgiIHZpZXdCb3g9Ii0xIC0xIDMxIDMxIj48Zz48cGF0aCBkPSJNMjkuNDQ5LDE0LjY2MiBDMjkuNDQ5LDIyLjcyMiAyMi44NjgsMjkuMjU2IDE0Ljc1LDI5LjI1NiBDNi42MzIsMjkuMjU2IDAuMDUxLDIyLjcyMiAwLjA1MSwxNC42NjIgQzAuMDUxLDYuNjAxIDYuNjMyLDAuMDY3IDE0Ljc1LDAuMDY3IEMyMi44NjgsMC4wNjcgMjkuNDQ5LDYuNjAxIDI5LjQ0OSwxNC42NjIiIGZpbGw9IiNmZmYiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIxIj48L3BhdGg++PC9nPjwvc3ZnPg==&quot;) 3px 50% / 14px 14px no-repeat rgb(189, 8, 28); position: absolute; opacity: 1; z-index: 8675309; display: none; cursor: pointer; border: none; -webkit-font-smoothing: antialiased; top: 240px; left: 110px; ">Save</span> : image / svg + xml; base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMzBweCIgd2lkdGg9IjMwcHgiIHZpZXdCb3g9Ii0xIC0xIDMxIDMxIj48Zz48cGF0aCBkPSJNMjkuNDQ5LDE0LjY2MiBDMjkuNDQ5LDIyLjcyMiAyMi44NjgsMjkuMjU2IDE0Ljc1LDI5LjI1NiBDNi42MzIsMjkuMjU2IDAuMDUxLDIyLjcyMiAwLjA1MSwxNC42NjIgQzAuMDUxLDYuNjAxIDYuNjMyLDAuMDY3IDE0Ljc1LDAuMDY3IEMyMi44NjgsMC4wNjcgMjkuNDQ5LDYuNjAxIDI5LjQ0OSwxNC42NjIiIGZpbGw9IiNmZmYiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIxIj48L3BhdGg ++ PC9nPjwvc3ZnPg == & quot;) 3px <span style="border-radius: 3px; text-indent: 20px; width: auto; padding: 0px 4px 0px 0px; text-align: center; font-style: normal; font-variant: normal; font-weight: bold; font-stretch: normal; font-size: 11px; line-height: 20px; font-family: &quot;Helvetica Neue&quot;, Helvetica, sans-serif; color: rgb(255, 255, 255); background: url(&quot;data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMzBweCIgd2lkdGg9IjMwcHgiIHZpZXdCb3g9Ii0xIC0xIDMxIDMxIj48Zz48cGF0aCBkPSJNMjkuNDQ5LDE0LjY2MiBDMjkuNDQ5LDIyLjcyMiAyMi44NjgsMjkuMjU2IDE0Ljc1LDI5LjI1NiBDNi42MzIsMjkuMjU2IDAuMDUxLDIyLjcyMiAwLjA1MSwxNC42NjIgQzAuMDUxLDYuNjAxIDYuNjMyLDAuMDY3IDE0Ljc1LDAuMDY3IEMyMi44NjgsMC4wNjcgMjkuNDQ5LDYuNjAxIDI5LjQ0OSwxNC42NjIiIGZpbGw9IiNmZmYiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIxIj48L3BhdGg++PC9nPjwvc3ZnPg==&quot;) 3px 50% / 14px 14px no-repeat rgb(189, 8, 28); position: absolute; opacity: 1; z-index: 8675309; display: none; cursor: pointer; border: none; -webkit-font-smoothing: antialiased; top: 240px; left: 110px; ">Save</span> ( <span style="border-radius: 3px; text-indent: 20px; width: auto; padding: 0px 4px 0px 0px; text-align: center; font-style: normal; font-variant: normal; font-weight: bold; font-stretch: normal; font-size: 11px; line-height: 20px; font-family: &quot;Helvetica Neue&quot;, Helvetica, sans-serif; color: rgb(255, 255, 255); background: url(&quot;data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMzBweCIgd2lkdGg9IjMwcHgiIHZpZXdCb3g9Ii0xIC0xIDMxIDMxIj48Zz48cGF0aCBkPSJNMjkuNDQ5LDE0LjY2MiBDMjkuNDQ5LDIyLjcyMiAyMi44NjgsMjkuMjU2IDE0Ljc1LDI5LjI1NiBDNi42MzIsMjkuMjU2IDAuMDUxLDIyLjcyMiAwLjA1MSwxNC42NjIgQzAuMDUxLDYuNjAxIDYuNjMyLDAuMDY3IDE0Ljc1LDAuMDY3IEMyMi44NjgsMC4wNjcgMjkuNDQ5LDYuNjAxIDI5LjQ0OSwxNC42NjIiIGZpbGw9IiNmZmYiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIxIj48L3BhdGg++PC9nPjwvc3ZnPg==&quot;) 3px 50% / 14px 14px no-repeat rgb(189, 8, 28); position: absolute; opacity: 1; z-index: 8675309; display: none; cursor: pointer; border: none; -webkit-font-smoothing: antialiased; top: 240px; left: 110px; ">Save</span>

So a simple check:

 var pin = document.querySelector('body > span[style*="8675309"][style*="rgb(189, 8, 28)"]')

Or you can check the entire base64 background line containing the P logo.

Old answer for old PinIt extension:

Studying the page with the Pin It extension installed, we can see that it adds its own attribute to the <body> :

 <body data-pinterest-extension-installed="cr1.39.1">

It is easy to determine if an attribute exists in js:

 if (document.body.dataset.pinterestExtensionInstalled) { console.log("Pin It extension detected!"); }

Please note that the attribute is added after the page loads, so you cannot check it correctly in the DOMContentLoaded event DOMContentLoaded ; pause with setInterval or use MutationObserver :

  • The contents of the script with "run_at": "document_end" or "document_idle" (default mode):

     var PinItInstalled = undefined; new MutationObserver(function(mutations) { PinItInstalled = document.body.dataset.pinterestExtensionInstalled; this.disconnect(); }).observe(document.body, { attributes: true, attributeFilter: ["data-pinterest-extension-installed"] });

  • The contents of the script with "run_at": "document_start" :

     var PinItInstalled = undefined; document.addEventListener("DOMContentLoaded", function() { new MutationObserver(function(mutations) { PinItInstalled = document.body.dataset.pinterestExtensionInstalled; this.disconnect(); }).observe(document.body, { attributes: true, attributeFilter: ["data-pinterest-extension-installed"] }); });

PS Remember to check what happens if the Pin It extension option to show its button on hover is disabled.

+10
source

If you find the presence of the extension or pinit.js on the page, it may be appropriate, the easiest way is to simply add the data-pin-no-hover attribute to your images. This will mean that the extension ignores images.

 <img src="whatevz" data-pin-no-hover="true" />

There is really no reason to worry about whether it is set or not if the data-pin attribute is set.

Another option is not to create your own hover buttons, but use pinit.js, which creates hover buttons for you. See documents .

 <script type="text/javascript" async defer data-pin-hover="true" src="//assets.pinterest.com/js/pinit.js" ></script>
+2
source

Source: https://habr.com/ru/post/1234382/

More articles:


All Articles