More information about the Underscore mailing list

[_] Twitter and Facebook links best practise

Keith Jackson keith at ministryotech.co.uk
Wed Aug 21 20:48:12 BST 2013

+1 from me on that strategy - I'd hide these using a mixture of media queries and javascript, as relevant to the development platform so they are only visible and the FB / Twitter scripts only linked up in a larger viewport.

Optimising this could be a little tricky on the script side, but it's worth playing about with it for the performance difference you'll notice.
This is even easier if the desktop and mobile sites are totally separate codebases (not that I'd necessarily advocate this approach - case by case...)

Keith Jackson
CTO - The Ministry of Technology

keith at ministryotech.co.uk
http://www.ministryotech.co.uk

The Ministry of Technology is a trading name of Minotech Ltd.

On 21 Aug 2013, at 12:56, Andy Davies <dajdavies at gmail.com> wrote:

> I'd question whether Twitter and FB links / buttons should be even shown on
> small viewports - iOS and Android both have native sharing built in (not
> sure about Firefox OS, and Windows Phone)
> 
> 
> On 21 August 2013 12:17, Craig Francis <craig at craigfrancis.co.uk> wrote:
> 
>> On 21 Aug 2013, at 09:52, simon mosse <simon at themosse.com> wrote:
>>> I am ideally hoping to code in one nicely marked up link for both twitter
>>> and facebook, that will allow the most number of native apps cross-device
>>> to pick it up and fire open themselves, whilst leaving browsers to pick
>> up
>>> the link to the web app where no App exists.
>> 
>> 
>> Thoughts in progress...
>> 
>> Start with a simple:
>> 
>>    <a href="http://www.facebook.com">Link</a>
>> 
>> This works with every browser, requires no JavaScript, and does not need
>> to load additional external resources... a massive performance gain on
>> websites, where the DNS lookup and the typical request to get the JS,
>> images (and possibly CSS / HTML for the iframe versions), can really slow
>> down your page load time (or block the page loading completely if those
>> resources can't be loaded responsibly).
>> 
>> Then there is the "fb://" protocol used on the iPhone:
>> 
>>        http://stackoverflow.com/questions/10416338/
>>        http://wiki.akosma.com/IPhone_URL_Schemes#Facebook
>> 
>> That might be able to load the native app... however its really intended
>> for native apps only:
>> 
>>        http://stackoverflow.com/questions/16955470/
>> 
>> But does still seem to work in Safari, if it was a little slow to load the
>> app (although that might be because I haven't used it for a few months):
>> 
>> 
>> http://mobileorchard.com/opening-the-facebook-app-to-your-facebook-fan-page/
>> 
>> Having said that, it does not seem to be that much of a standard... so
>> could break in the future (e.g. fb://page/ appears to have changed to
>> fb://profile/).
>> 
>> So if you want to go that route, then add some JavaScript (ideally from
>> your local domain, or a cookie-less domain), that can just handle the
>> onclick event:
>> 
>>        http://stackoverflow.com/questions/1108693/
>> 
>> But this is only for iOS... there is also Android:
>> 
>>        http://stackoverflow.com/questions/4191492/
>>        http://stackoverflow.com/questions/11264225/
>> 
>> And dare I say it, Windows/Blackberry/Nokia/etc.
>> 
>> Or just give up and add the Facebook tax, and then allow your pages to
>> join the average page weight of 1MB, and 7 seconds loading time (which can
>> be much longer on mobile):
>> 
>>        https://developers.facebook.com/docs/web/gettingstarted/
>> 
>> 
>> http://www.webperformancetoday.com/2013/07/23/report-ecommerce-page-speed-web-performance-summer-2013/
>> 
>> http://www.webperformancetoday.com/2013/06/05/web-page-growth-2010-2013/
>> 
>> http://www.seochat.com/c/a/google-optimization-help/average-page-load-time-of-top-ranking-websites-in-google/
>> 
>> http://marketingland.com/retail-website-load-times-continue-to-decline-with-a-22-decrease-during-the-last-year-37604
>> 
>> Enjoy :-)
>> 
>> Craig
>> --
>> underscore_ list info/archive ->
>> http://www.under-score.org.uk/mailman/listinfo/underscore
>> 
> -- 
> underscore_ list info/archive -> http://www.under-score.org.uk/mailman/listinfo/underscore