Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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);
like image 805
Lauren Avatar asked Oct 23 '15 15:10

Lauren


People also ask

How do I add Pinterest to my browser?

Add the Pinterest browser button to Chrome, Firefox, or Microsoft Edge to save ideas from anywhere on the web. Go to our browser button install page. We'll suggest the right version for your browser. Click Get our browser button.

How do I fix Pinterest not working on my computer?

Log in to Pinterest in a regular browser window to use the browser button. Remove the extension and reinstall it. Clear your cache and cookiesto remove any temporary files that may be causing issues. Enable Javascriptin your browser. Update your browser. Disable other extensionsone-by-one to see if an extension is interfering.

How to pin on Pinterest on iOS?

1. Tap the button on Chrome. 2. Tap Share. 3. Select Pinterest. Done. How to Pin on iOS. Save ideas from around the web with one click.

How do I install Pinterest on safari?

Install with Safari. The Pinterest browser button is not currently available on Safari after version 11. We're working to bring it back, but in the meantime you can install our browser button on another browser. Use the browser button. Click the red at the top of your browser whenever you find something on the web you want to save.


1 Answers

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.

like image 122
wOxxOm Avatar answered Sep 18 '22 20:09

wOxxOm