AddThis plugin can not exclude services in mobile tool box

Question

I have implemented the addThis share box following their instructions. I would like to only include the following services in the share tool box which works fine on the desktop browser but is simply ignored on mobile, which means that every service is shown on the mobile version of the share box.

Anyone else encountered this issue? What can be done to fix it?

<script src="https://s7.addthis.com/js/300/addthis_widget.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="share_btn">Press me to test sharing!!!!</div>
<script>
var addthis_config = { 
    services_expanded: 'facebook,twitter,email,tumblr,link,sinaweibo,whatsapp'
}

$(".share_btn").on("click", function () {
    addthis.update('share', 'url', 'http://google.com');
    addthis_sendto('more');
});
</script>

JSFiddle - Test link

Snelling

Please can you provide full code that will allow us to reproduce your issue (HTML, CSS and JavaScript), preferably as a Stack Snippet. – Sudorific

would this be user agent related? – Garek

any possible code that I can try? thanks – Snelling

Answer 1

This is a bug

You are correctly applying the config the problem is that this is a bug that has been around for a couple of years now:

A user asked back in June 2013:

We have an addthis control that properly displays only the sharing services that we specify when viewed using a desktop browser. When it is viewed from a mobile device (iphone in this case) it switches to the mobile view i na new tab (which is good), but then it displays every possible service instead of just the specific ones that we want to show. Is there some additional configuration we need to do up front in addition to what we are already doing?

To which a member of the AddThis team responded:

I tested this on a local environment and experienced the same result. I have put in a ticket with our development team for a fix in a future release. Thank you for reporting this to us.

AddThis Support (Addthis mobile not respecting 'services_compact' or 'services_expanded')

This was still outstanding when another user asked if it had been fixed a year later.

What can you do?

It seems that the only option you have is to use services_exclude instead which does appear to work on mobile devices. This will lead to a lot longer list and a bit more of a configuration headache but it should allow you to almost get the list you are after on the mobile menu.

<script src="https://s7.addthis.com/js/300/addthis_widget.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="share_btn">Press me to test sharing!!!!</div>
<script>
  var addthis_config = {
    services_exclude: 'dashboard,menu,compact,email,facebook_like,foursquare,google_plusone,pinterest,100zakladok,a97abi,addressbar,adfty,adifni,advqr,amazonwishlist,amenme,aim,aolmail,apsense,arto,baang,baidu,balatarin,balltribe,beat100,biggerpockets,bitly,bizsugar,bland,blogger,blogkeen,blogmarks,blurpalicious,bobrdobr,bonzobox,socialbookmarkingnet,bookmarkycz,bookmerkende,box,brainify,bryderi,buddymarks,buffer,camyoo,care2,foodlve,chiq,citeulike,classicalplace,google_classroom,cleanprint,cleansave,cndig,colivia,technerd,link,cosmiq,cssbased,delicious,diary_ru,digaculturanet,digg,diggita,digo,diigo,domelhor,douban,draugiem,dzone,edcast,efactor,mailto,embarkons,evernote,stylishhome,fabulously40,informazione,thefancy,fashiolista,favable,faves,favlogde,favoritende,favorites,favoritus,financialjuice,flipboard,folkd,thefreedictionary,fresqui,funp,gg,gmail,govn,goodnoows,google,googleplus,googletranslate,google_plusone_share,hackernews,hatena,gluvsnap,hedgehogs,historious,hootsuite,hotmail,w3validator,identica,ihavegot,indexor,instapaper,iorbix,irepeater,jamespot,jappy,jolly,kaevur,kaixin,kakao,ketnooi,kik,kindleit,kledy,latafaneracat,librerio,lidar,lineme,linkedin,linkuj,livejournal,mymailru,margarin,markme,meinvz,memonic,memori,mendeley,meneame,mixi,moemesto,moikrug,mrcnetworkit,myspace,myvidster,n4g,naszaklasa,netlog,netvibes,netvouz,newsmeback,newsvine,nujij,nurses_lounge,odnoklassniki_ru,oknotizie,openthedoor,oyyla,packg,pafnetde,pdfonline,pdfmyurl,phonefavs,pinboard,pinterest_share,planypus,plaxo,plurk,pocket,posteezy,print,printfriendly,pusha,qrsrc,quantcast,qzone,reddit,rediff,redkum,renren,researchgate,safelinking,scoopat,scoopit,sekoman,select2gether,shaveh,shetoldme,skype,skyrock,slack,smiru,sodahead,sonico,spinsnap,yiid,startaid,startlap,studivz,stuffpit,stumbleupon,stumpedia,sulia,sunlize,supbro,surfingbird,svejo,symbaloo,taringa,telegram,tencentweibo,thewebblend,thisnext,tuenti,tulinq,twitthis,typepad,urlaubswerkde,viadeo,viber,virb,visitezmonsite,vk,vkrugudruzei,voxopolis,vybralisme,wanelo,internetarchive,sharer,webnews,domaintoolswhois,windows,wirefan,wishmindr,wordpress,raiseyourvoice,wykop,xanga,xing,yahoomail,yammer,yardbarker,yigg,yookos,yoolink,yorumcuyum,youmob,yummly,yuuby,zakladoknet,ziczac,zingme'
  }

  $(".share_btn").on("click", function() {
    addthis.update('share', 'url', 'http://google.com');
    addthis_sendto('more');
  });
</script>

The Stack Snippet doesn't appear to work so to see this in action please see this JSFiddle.

Unfortunately, using this method highlights another bug which leads to the duplication of the Facebook, Twitter and Tumbler buttons (as seen above). There does not appear to be a way to configure AddThis to stop this duplication, however, this can be tackled from a different angle.

The mobile menu gets given unique classes (to differentiate it from the desktop menu) and the duplicates always appear to be the first three items. This means we can use CSS to hide the first three list items and by extention remove the duplicates from view.

.at4m-listitem:nth-child(-n+3) {
  display: none;
}

<script src="https://s7.addthis.com/js/300/addthis_widget.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="share_btn">Press me to test sharing!!!!</div>
<script>
  var addthis_config = {
    services_exclude: 'dashboard,menu,compact,email,facebook_like,foursquare,google_plusone,pinterest,100zakladok,a97abi,addressbar,adfty,adifni,advqr,amazonwishlist,amenme,aim,aolmail,apsense,arto,baang,baidu,balatarin,balltribe,beat100,biggerpockets,bitly,bizsugar,bland,blogger,blogkeen,blogmarks,blurpalicious,bobrdobr,bonzobox,socialbookmarkingnet,bookmarkycz,bookmerkende,box,brainify,bryderi,buddymarks,buffer,camyoo,care2,foodlve,chiq,citeulike,classicalplace,google_classroom,cleanprint,cleansave,cndig,colivia,technerd,link,cosmiq,cssbased,delicious,diary_ru,digaculturanet,digg,diggita,digo,diigo,domelhor,douban,draugiem,dzone,edcast,efactor,mailto,embarkons,evernote,stylishhome,fabulously40,informazione,thefancy,fashiolista,favable,faves,favlogde,favoritende,favorites,favoritus,financialjuice,flipboard,folkd,thefreedictionary,fresqui,funp,gg,gmail,govn,goodnoows,google,googleplus,googletranslate,google_plusone_share,hackernews,hatena,gluvsnap,hedgehogs,historious,hootsuite,hotmail,w3validator,identica,ihavegot,indexor,instapaper,iorbix,irepeater,jamespot,jappy,jolly,kaevur,kaixin,kakao,ketnooi,kik,kindleit,kledy,latafaneracat,librerio,lidar,lineme,linkedin,linkuj,livejournal,mymailru,margarin,markme,meinvz,memonic,memori,mendeley,meneame,mixi,moemesto,moikrug,mrcnetworkit,myspace,myvidster,n4g,naszaklasa,netlog,netvibes,netvouz,newsmeback,newsvine,nujij,nurses_lounge,odnoklassniki_ru,oknotizie,openthedoor,oyyla,packg,pafnetde,pdfonline,pdfmyurl,phonefavs,pinboard,pinterest_share,planypus,plaxo,plurk,pocket,posteezy,print,printfriendly,pusha,qrsrc,quantcast,qzone,reddit,rediff,redkum,renren,researchgate,safelinking,scoopat,scoopit,sekoman,select2gether,shaveh,shetoldme,skype,skyrock,slack,smiru,sodahead,sonico,spinsnap,yiid,startaid,startlap,studivz,stuffpit,stumbleupon,stumpedia,sulia,sunlize,supbro,surfingbird,svejo,symbaloo,taringa,telegram,tencentweibo,thewebblend,thisnext,tuenti,tulinq,twitthis,typepad,urlaubswerkde,viadeo,viber,virb,visitezmonsite,vk,vkrugudruzei,voxopolis,vybralisme,wanelo,internetarchive,sharer,webnews,domaintoolswhois,windows,wirefan,wishmindr,wordpress,raiseyourvoice,wykop,xanga,xing,yahoomail,yammer,yardbarker,yigg,yookos,yoolink,yorumcuyum,youmob,yummly,yuuby,zakladoknet,ziczac,zingme'
  }

  $(".share_btn").on("click", function() {
    addthis.update('share', 'url', 'http://google.com');
    addthis_sendto('more');
  });
</script>

The Stack Snippet doesn't appear to work so to see this in action please see this JSFiddle.

Sudorific

Thanks for helping. The services is excluded, however, when I try at android mobile the list has duplicate twice. e.g. There are two facebook, twitter etc.. options at the list, and there is a compat, dashboard , menu options on the mobile version too. – Snelling

Removed the extra options will need to look into the duplicates. jsfiddle.net/z3qzh388/5 – Sudorific

When you setup the toolbar on the AddThis site you can select a list of services. If you leave this blank do the duplicates disappear? – Sudorific

@Snelling Well then, we have a problem! If you exclude the Facebook and Twitter buttons it removes both copies not just the extra one. Will keep looking but given the nature of the issue not sure what can be done. – Sudorific

Thanks a lot, sorry just checked after easter hoilday , you should be awarded – Snelling

No problem @user782104, thought that might have been the case. Bit disappointed given the other answer doesn't actually address the issue but I hope this sorted your issue. – Sudorific

Answer 2

On mobile browsers, you should use TouchEvents.

Try adding touchstart here:

$(".sharing").on("click touchstart", function () {
    ...
});

Makeyevka

Thanks for your try, no luck for that – Snelling

Is the event been fired? (try adding some console.log or alert to debug) – Makeyevka

Answer 3

Is in every mobile or just iOS? If only on ios try this:

$(document).ready(function() {
  var $ua = navigator.userAgent;
  var $event = ($ua.match(/(iPod|iPhone|iPad)/i)) ? "touchstart" : "click";

  $(document).on($event, function(ev) {
    addthis.update('share', 'url', 'http://google.com');
    addthis_sendto('more');
  });
});

Greaves

on android too.. I suspect that is related to the addthis setting instead of the touch / click event – Snelling

Answer 4

Good question! Unfortunately, AddThis was a fly-by-night operation, and they have ceased operation as a social-sharing service. If you go to their website now, and check the main page, you'll see that they are now a development company selling a list of links to social share sites.

In fact, this is the headline you will see at the addthis.com website if you visit it right now:

Free Website Tools

And, in addition:

AddThis is known for our beautifully simple share buttons.

This is interesting. A site that was once a social network, but now is selling services for other social networks. To add to the misfortune, all of their demos appear to be blank, lorem-ipsum html pages.

I would not say that this is a reliable service to be implementing at the moment!

I maintain a social sharing URLs GitHub project! We USED to implement AddThis, but our testing suite caught this bug and we have since removed it from our project. Want certainty and reliability along with your social sharing? Then check us out! GitHub: Social Share URLs.

Gies