Social Media Buttons - Responsive Design

Introduction

Social media buttons and their related code, are important components on contemporary web pages, but they do slow down page load time - an important consideration for smartphone and tablet users. This code illustrates how to detect (most) mobile devices and disable social media button loading.

Background

This code uses the CSS @media rule and, for example, the AddThis social media icons and service.

Using the Code

Place this JavaScript code just before the </body> tag at the end of your page:

var isMobile = {
 Android: function() { return navigator.userAgent.match(/Android/i); },
 BlackBerry: function() { return navigator.userAgent.match(/BlackBerry/i); },
 iOS: function() { return navigator.userAgent.match(/iPhone|iPad|iPod/i); },
 Opera: function() { return navigator.userAgent.match(/Opera Mini/i); },
 Windows: function() { return navigator.userAgent.match(/IEMobile/i); },
 any: function() { return (isMobile.Android() || isMobile.BlackBerry() || 
                   isMobile.iOS() || isMobile.Opera() || isMobile.Windows()); }
 };
if (! isMobile.any() ) {
 document.write("<table align='center' cellpadding='1' cellspacing='1' width='184'>");
 document.write(" <tr>");
 document.write("  <td height='34' width='180'>");
 document.write("   <div class='addthis_toolbox addthis_default_style addthis_32x32_style'>");
 document.write("    <a class='addthis_button_preferred_1'></a> 
   <a class='addthis_button_preferred_2'></a> <a class='addthis_button_preferred_3'></a>");
 document.write("    <a class='addthis_counter addthis_bubble_style'></a>");
 document.write("    </div>");
 var a = document.createElement("script");
 a.src = "http://s7.addthis.com/js/250/addthis_widget.js#pubid=<your AddThis Publisher ID>";
 document.body.appendChild(a);
 document.write("   </td>");
 document.write("  </tr>");
 document.write(" </table>");
 document.write("<div class='e'></div>");
 }

This code utilizes the AddThis social media buttons, but other social media buttons or services could be coded in a similar manner.

History

• No changes or improvements to date.