0

I have some social buttons for sharing on my website (addthis) and I've added some text just above the buttons with an arrow pointing to them simply saying "Share this!"

Some people use adblock and have a setting that hides the social buttons. These people won't see the buttons but will still see the text "Share this!".

How can I make the "Share this!" text disappear for those who can't see the social buttons? Is there a way to check if the buttons exist for the user, and to then show/hide the other elements based on that? (other than checking for display:none, unless that is what adblock uses to hide the elements??? I don't know.)

I made a simple fiddle so you can see what I mean. I just pulled some of the code from the social plugin to display the Facebook icon.

https://jsfiddle.net/bsuup9vf/6/

<div class="addthis_responsive_sharing"> <!-- This line initiates the plugin to generate the rest of the code -->
  <div id="share-this"> <!-- I want to hide this div only if the plugin is blocked or if it's elements aren't visible on the screen for some other reason --> 
    <div class="share-text">Share this!</div> 
    <span class="share-arrow right-arrow" style="font-size:24px;">&#10553;</span>
  </div>
  <!-- This is the parent div for the actual social buttons-->
  <div id="atrsb" class="at-resp-share-element addthis_32x32_style at-mobile addthis-smartlayers addthis-animated at4-show">
    <!-- Facebook - I pulled this from the live code just to display the FB icon -->
    <span class="at-icon-wrapper" style="background-color: rgb(59, 89, 152);">
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" title="Facebook" alt="Facebook" class="at-icon at-icon-facebook" style="fill: rgb(255, 255, 255);">
        <g>
          <path d="M22 5.16c-.406-.054-1.806-.16-3.43-.16-3.4 0-5.733 1.825-5.733 5.17v2.882H9v3.913h3.837V27h4.604V16.965h3.823l.587-3.913h-4.41v-2.5c0-1.123.347-1.903 2.198-1.903H22V5.16z" fill-rule="evenodd">
          </path>
        </g>
      </svg>
    </span> <!-- /.Facebook -->

  </div> <!-- /.atrsb -->
</div> <!-- /.addthis_responsive_sharing>

Sorry if a similar question like this has been asked before.

Thank you everyone for the answers!

Bugs
  • 4,491
  • 9
  • 32
  • 41
Quaren
  • 83
  • 1
  • 7
  • Possible duplicate of [How to detect Adblock on my website?](http://stackoverflow.com/questions/4869154/how-to-detect-adblock-on-my-website) – Arnav Borborah Aug 05 '16 at 13:42
  • Well have you checked how addblock hides the icon? Does it just not load it, or does it load it then hide it (display:none)? – David H. Aug 05 '16 at 13:42
  • Have you tried anything? Where's your work? Are you looking for a copy-n-paste answer? – hungerstar Aug 05 '16 at 13:43
  • I haven't tried simply because I don't know how. I know jQuery would have to be used, but as I said below I'm not very familiar with it so wouldn't really know where to start, and I'm not sure how adblock hides the elements. I was hoping you guys could help me. – Quaren Aug 05 '16 at 13:51

3 Answers3

2

If the adblocker is actually removing those items from your code, you can check with JQuery if they exist, and if they dont, you can hide the elements you want :)

Edit: Since we already know that adblocker makes the elements completely disappear from the page you could try this code:

var elements = $('#atrsb');
if (elements.length === 0) {
    $('#share-this').hide();
}
Evgeni Atanasov
  • 482
  • 1
  • 5
  • 13
  • Yeah I assumed jQuery would have to be used. I'm not very familiar with it though so wouldn't know where to start D: – Quaren Aug 05 '16 at 13:46
  • Ok, I will edit my answer now, trying to assist you, but I really don't know how adblocker is behaving. – Evgeni Atanasov Aug 05 '16 at 13:50
  • Could you please check if it is deleting the elements, or it is just hiding them? – Evgeni Atanasov Aug 05 '16 at 13:50
  • Adblock completely removes the elements. It is not hiding them. So the div with ID 'atrsb' and everything inside it gets deleted from the page. – Quaren Aug 05 '16 at 13:56
1

You can use jQuery to find the element, and check if the DOM element even exist AND does not have it display value set to `none``

var obj = $('.at-icon-wrapper); // Edit to the class or ID that will be hidden/not removed by adblocker
if(obj.length <= 0 || obj.css('display') != "none") // It's not there!
     $('#share-this').css('display', 'none')
Nicolai Krüger
  • 416
  • 4
  • 17
0

You can check to see if the share elements exist on your page, and hide the share-text if none are found. This will work if adblock actually removes the elements.

var shareEle = document.getElementsByClassName('at-resp-share-element');

if(shareEle.length === 0){
  var shareText = document.getElementsByClassName('share-text');
  for(var i = 0; i < shareText.length; i++){
    shareText[i].style.display = 'none';
  }
}
IrkenInvader
  • 4,030
  • 1
  • 12
  • 23