CODEWITHSUNDEEP
javascriptjquerygoogle-chromegoogle-chrome-extensionpinterest
Lauren
Lauren

Reputation: 83

Check to see if browser has Pinterest Pin it button

I have written a script to add a Pinterest button to most images on my site. The issue is that when someone has the Chrome Pin it extension enabled in their browser, the "pin it" button shows up twice for the user.

Is there anyway, in JavaScript, to check if the user has this extension enabled in their 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);

Upvotes: 5

Views: 2443

Answers (2)

woxxom
woxxom

Reputation: 73686

The new Pinterest extension (2017)

injects a <span> hover button directly under <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+PHBhdGggZD0iTTE0LjczMywxLjY4NiBDNy41MTYsMS42ODYgMS42NjUsNy40OTUgMS42NjUsMTQuNjYyIEMxLjY2NSwyMC4xNTkgNS4xMDksMjQuODU0IDkuOTcsMjYuNzQ0IEM5Ljg1NiwyNS43MTggOS43NTMsMjQuMTQzIDEwLjAxNiwyMy4wMjIgQzEwLjI1MywyMi4wMSAxMS41NDgsMTYuNTcyIDExLjU0OCwxNi41NzIgQzExLjU0OCwxNi41NzIgMTEuMTU3LDE1Ljc5NSAxMS4xNTcsMTQuNjQ2IEMxMS4xNTcsMTIuODQyIDEyLjIxMSwxMS40OTUgMTMuNTIyLDExLjQ5NSBDMTQuNjM3LDExLjQ5NSAxNS4xNzUsMTIuMzI2IDE1LjE3NSwxMy4zMjMgQzE1LjE3NSwxNC40MzYgMTQuNDYyLDE2LjEgMTQuMDkzLDE3LjY0MyBDMTMuNzg1LDE4LjkzNSAxNC43NDUsMTkuOTg4IDE2LjAyOCwxOS45ODggQzE4LjM1MSwxOS45ODggMjAuMTM2LDE3LjU1NiAyMC4xMzYsMTQuMDQ2IEMyMC4xMzYsMTAuOTM5IDE3Ljg4OCw4Ljc2NyAxNC42NzgsOC43NjcgQzEwLjk1OSw4Ljc2NyA4Ljc3NywxMS41MzYgOC43NzcsMTQuMzk4IEM4Ljc3NywxNS41MTMgOS4yMSwxNi43MDkgOS43NDksMTcuMzU5IEM5Ljg1NiwxNy40ODggOS44NzIsMTcuNiA5Ljg0LDE3LjczMSBDOS43NDEsMTguMTQxIDkuNTIsMTkuMDIzIDkuNDc3LDE5LjIwMyBDOS40MiwxOS40NCA5LjI4OCwxOS40OTEgOS4wNCwxOS4zNzYgQzcuNDA4LDE4LjYyMiA2LjM4NywxNi4yNTIgNi4zODcsMTQuMzQ5IEM2LjM4NywxMC4yNTYgOS4zODMsNi40OTcgMTUuMDIyLDYuNDk3IEMxOS41NTUsNi40OTcgMjMuMDc4LDkuNzA1IDIzLjA3OCwxMy45OTEgQzIzLjA3OCwxOC40NjMgMjAuMjM5LDIyLjA2MiAxNi4yOTcsMjIuMDYyIEMxNC45NzMsMjIuMDYyIDEzLjcyOCwyMS4zNzkgMTMuMzAyLDIwLjU3MiBDMTMuMzAyLDIwLjU3MiAxMi42NDcsMjMuMDUgMTIuNDg4LDIzLjY1NyBDMTIuMTkzLDI0Ljc4NCAxMS4zOTYsMjYuMTk2IDEwLjg2MywyNy4wNTggQzEyLjA4NiwyNy40MzQgMTMuMzg2LDI3LjYzNyAxNC43MzMsMjcuNjM3IEMyMS45NSwyNy42MzcgMjcuODAxLDIxLjgyOCAyNy44MDEsMTQuNjYyIEMyNy44MDEsNy40OTUgMjEuOTUsMS42ODYgMTQuNzMzLDEuNjg2IiBmaWxsPSIjYmQwODFjIj48L3BhdGg+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 would be:

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

Or you can check for the entire background base64 string which contains the P logo.

Old answer for the old PinIt extension:

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

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

It's easy to determine the presence of the attribute in js:

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

Note that the attribute is added after the page has been loaded so you can't check it right in DOMContentLoaded event handler; make a pause with setInterval or use MutationObserver:

  • Content script with "run_at": "document_end" or "document_idle" (the 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"]
});

  • Content 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"]
    });
});

P.S. Don't forget to test what happens if the Pin It extension's option to show its button on hover is disabled.

Upvotes: 10

Zack Argyle
Zack Argyle

Reputation: 8427

While detecting the presence of the extension or pinit.js on the page may be worthwhile, the easier solution is to simply add the data-pin-no-hover attribute to your images. This will tell the extension to ignore the images.

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

There really isn't any reason to care if it is installed or not if the data-pin attribute is set.

The other option is to not create your own hover buttons, but use pinit.js that creates the hover buttons for you. See the docs.

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

Upvotes: 2

Related Questions