We Keep Coding

AddThis plugin can not exclude services in mobile tool box - javascript

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

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.

On mobile browsers, you should use TouchEvents.
Try adding touchstart here:
$(".sharing").on("click touchstart", function () {
...
});

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');
});
});

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.

Related

I just couldn't get the code to work on certain browsers, basically whatever code you see on the resource url below has all been work-around-codes to get this work mainly for android browsers and windows 8. So this may be a little sketchy.
Currently, this code below shows the page layers when the buttons are clicked.
$(document).ready(function() {
$("#mouths9").click(function() {
$("#mouth").toggle();
I either want it to when a user clicks anywhere (other than the selected #mouth/div) to close the toggled layer #mouth.
every show() commands I have tried, doesn't show the layers on android devices, so the toggle has been, so far anyway the only thing that has worked.
Surely there's a better way of doing this? if anyone wants to see how far I have gotten the resource url can be seen at http://a1jw.com/mker/newChoopie/testing/stage7/

Is this what you are looking for?
$(document).ready(function() {
$("body").not("#mouths9").click(function(){
$("#mouth").hide();
});
$("#mouths9").click(function() {
$("#mouth").show();
));
}):

I have a bunch of links in my app. I added rel='external' target='_blank' to all of them.
In the Ripple emulator, or in a regular desktop browser, this works great. But on my Android (JB 4.2.2) it opens the link in the same window. Hitting "back" takes me back to the app, but everything is screwed and the app does not work as planned (script events do not react), until physically reloaded.
How do I ensure that a link opens in the device's browser? Do I need to use a Cordova plugin?
(I'm using Cordova 2.9.0, jQuery 1.10.1, jQuery Mobile 1.3.1)

This has been really fickle with Cordova/PhoneGap in the last few releases, I believe because of the InAppBrowser work which might be a solution for you.
What is working for us to launch in the external browser is:
window.open("http://myurl.com", '_system');
In our case, we want to find all external links and launch them in Safari/Chrome (and keep internal links in our Angular router). This probably isn't the most elegant solution, but we are doing this right now by capturing input events on the links and taking over the behavior like so:
$(document).on('mousedown','a', function(e) {
e.preventDefault();
var elem = $(this);
var url = elem.attr('href');
if (url.indexOf('http://') !== -1) {
window.open(url, '_system');
}
});
I hope that helps you a bit.

I had issues with Jason Farnsworth's answer still firing the default action after the user returned to the app in iOS. So after a little tweaking of his code I arrived at the following and it behaved as expected.
$(document).on('click', 'a', function (e) {
var elem = $(this);
var url = elem.attr('href');
if (url.indexOf('http://') !== -1) {
e.preventDefault();
window.open(url, '_system');
return false;
}
});

There're a few questions like this, but all of them try to use inappbrowser. I've used the following plugin:
com.byhook.cordova.chromelauncher
Just install it, as always, through cli:
cordova plugin add com.byhook.cordova.chromelauncher
And add the following JavaScript code:
ChromeLauncher.open(url)
This will:
put your app in background mode
open the existing instance of "google chrome for android" browser (according to the code, Google Play is gonna be opened if Chrome browser is not found, but i haven't tested this)
add a new tab to Chrome browser pointing to the desired URL

I've searched ages for the correct answer and managed to fix this another way besides the already given answers.
First of all, older versions of Cordova seem to break when you're using some methods on the newer versions of Android. Updating your Cordova to the latest version will bring some possible migration problems in your current project but is worth the shot of updating. Updated to Cordova 5.0 from 2.8, cost me around half an hour changing the code (just a few fixes required). Rebuilded, deployed and launched succesfully after. The back button made my app crash at the older versions of Cordova. The newer version made it work like a charm with the same line of code. Long story short, update cordova, change a few lines if required and rebuild your beauty.
Hope this will help you from not struggeling days like I did.

You Could just remove
target
attribute
Use only "rel" attribute
I hope it could solve your problem as i face that problem multiple times.

I've visited a few sites on my iPhone/iPad which have prompted me to install the native app the first time I've visited the site. Is there a standard script somewhere that people use for this or should I just create my own? This must have been thousands of times before but despite endless googling I can't find a 'stock' script I can use. Ideally it should use cookies so the user doesn't get prompted more than once a month or so.

Apple have actually got a built in way of doing this relatively unobtrusively, which adds a "Smart App Banner" at the top of the browser if the app isn't already installed:
To add a Smart App Banner to your website, include the following meta tag in the head of each page where you'd like the banner to appear:
<meta name="apple-itunes-app" content="app-id=myAppStoreID">
For more options, please see the full documentation on Apple's site:
http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/PromotingAppswithAppBanners/PromotingAppswithAppBanners.html
This adds a nice looking banner to the top of the page, which can be dismissed by clicking a close button. Unlike a popup (alert box), it doesn't obscure the page too much or stall it from loading and goes directly to the app store page for your app when clicked. I think this is probably the best solution for most cases.
As it only involves adding one meta tag, it's also easier to implement than any other JavaScript based solution and there's no risk of it appearing on non iOS devices.
Caveat: Only works in Safari. Not Chrome etc.

I'll assume that they're checking if the device is iOS via the HTTP_USER_AGENT
<?php
$iPod = stripos($_SERVER['HTTP_USER_AGENT'],"iPod");
$iPhone = stripos($_SERVER['HTTP_USER_AGENT'],"iPhone");
$iPad = stripos($_SERVER['HTTP_USER_AGENT'],"iPad");
$droid = stripos($_SERVER['HTTP_USER_AGENT'],"Android");
if ($iPod || $iPhone || $iPad){
// Display Prompt for iOS
} else if($droid){
// Display Prompt for Android
}

How can i create web page with out address/menu and tool bar.
I want the page to load without address/menu and tool bar.
Can someone please help to create webpage in asp.net or html using javascript.
I tried using javascript by using following code, but this warns that this page is closing i dont warning to be display.
a.htm
<head>
<script type="text/javascript">
function init()
{
var window_dimensions = "toolbars=no,menubar=no,location=no,scrollbars=yes,resizable=yes,status=yes";
window.opener=self;
window.close();
window.open("b.htm","_blank", window_dimensions);
window.moveTo(0,0);
window.resizeTo(screen.width,screen.height-100);
}
</script>
</head>
<body onload="init()">

These are standard security restrictions today, put there for good reason. Don't try to work-around them. If you think you have a need to do so, I'd re-review your requirements and reasons for doing so. If it is truly a need, you may need to consider a custom desktop (non-web-browser) application. This could still be a HTML-based application, but a custom desktop "browser" would be required.
See also: How to pop out a Firefox window without an address bar or status? (This includes excellent details for a custom desktop "browser", and follows the above recommendation.)

Though I've embedded the Add to Timeline social plugin in button mode:
<div class="fb-add-to-timeline" data-show-faces="false" data-mode="button"></div>
it keeps showing up as the full plugin including a preview of how Timeline items will look like. Is this a known issue?
I grabbed the embed code from here: https://developers.facebook.com/docs/reference/plugins/add-to-timeline/#.

I had the same issue, and just remove the "timeline" permission from my app settings, and then it showed up.

Since the button is really just a permission trigger you can build around it with your actual access request. This is logical if you are doing an SDK call of all sort using javascript, php or other versions.
Of course as timeline is not enabled outside of dev, one would suspect this will be addressed soon as so far I'm seeing the box in just about any type of testing I do. Odds are Facebook wants to show the box when someone calls timeline specifically to build adoption understanding.