Load a script file asynchronously

How to load a JavaScript file asynchronously from the server and automatically execute it.

Loading an external script asynchronously is simple. Create a script tag, set its src attribute, and inject it into the DOM tree:

var script = document.createElement(‘script’),
scripts = document.getElementsByTagName(‘script’)[0];
script.src = url;
scripts.parentNode.insertBefore(script, scripts);

The returned JavaScript file is executed automatically by the browser. Loading the Facebook Like button and Google Analytics are two examples that make use of this technique. Tip: When such script files are requested on page load, it’s recommended to use a standard script tag with the async (and defer) attribute included:

<script src=“https://platform.twitter.com/widgets.js“ async defer></script>

The HTML5 attribute async tells the browser to load this script without blocking the page. defer does essentially the same, but works on several older browsers, too.

How To Add Website Floating Buttons (HTML)

Floating Social Media Buttons Google+1 Facebook Twitter:

To make it easy there are sites like SHARETHIS & ADDTHIS which make it easy to add floating buttons to your website. We can help you as well.

Secret tip: I use a plugin in WordPress called “Sumo” which does a great job. It is very easy to install on any website as well. 

You may be looking for a good way to implement Facebook-like, Google+1 and Twitter buttons to your site.  This is an awesome, simple CSS and JavaScript based code that any site can use and can be easily installed.

Clean Floating Like Buttons On Your Site

If you have a WordPress site – it is super easy. The plugins I recommend are 1. “Digg Digg” or 2. “Flare” – both look quite clean and are very easy to install. Just go into your settings and tell it where you want to place the buttons (floating, at the top, etc.)

Floating Like Buttons!

Floating Buttons

Floating Social Buttons

“Ooooohhhhhh Ahhhhhhhhh!” The magic floating Social Buttons on those big websites… How do I get that?

A magician never reveals his tricks but I will – I’ll do anything for a few likes (OK, almost anything).

Social sites are now, more than ever, an important part of SEO and, per Google, can boost your SEO and PPC search rankings as well as increase word of mouth among  public. Google has now added these social indications (or “likes”) to Google Analytics as well as Google Webmaster Tools.

Facebook Floating Like Button:

Here’s a link on how to create a like button on your page: 

Use the Facebook Like Button Configurator to get the Like button code to insert into your webpage.

  1. Set the URL of your webpage where you are placing the Like button
  2. Customized your Like button
  3. See a preview of your button
  4. Click the Get Code, and copy and paste the code into your webpage

 

<html>
<head>
  <title>Your Website Title</title>
    <!-- You can use open graph tags to customize link previews.
    Learn more: https://developers.facebook.com/docs/sharing/webmasters -->
  <meta property="og:url"           content="https://www.your-domain.com/your-page.html" />
  <meta property="og:type"          content="website" />
  <meta property="og:title"         content="Your Website Title" />
  <meta property="og:description"   content="Your description" />
  <meta property="og:image"         content="https://www.your-domain.com/path/image.jpg" />
</head>
<body>
  <!-- Load Facebook SDK for JavaScript -->
  <div id="fb-root"></div>
  <script async defer crossorigin="anonymous"
        src="https://connect.facebook.net/en_US/sdk.js#xfbml=1
             &version={graph-api-version}
             &appId={your-facebook-app-id}
             &autoLogAppEvents=1"
        nonce="FOKrbAYI">
  </script>
  <!-- Your like button code -->
  <div class="fb-like"
       data-href="https://www.your-domain.com/your-page.html"
       data-width=""
       data-layout="standard"
       data-action="like"
       data-size="small"
       data-share="true">
  </div>
</body>
</html>

  

Optimize the Script:

What is Asynchronous Loading? 

Asynchronous script involves loading of the external scripts asynchronously, (ie) alongside other web elements in the webpage. It is used for rapid rendering of the webpage.

Load a script file asynchronously

How to load a JavaScript file asynchronously from the server and automatically execute it.

Like this <script src=“https://platform.twitter.com/widgets.js“ async defer></script>

Loading an external script asynchronously is simple. Create a script tag, set its src attribute, and inject it into the DOM tree:

var script = document.createElement(‘script’),
scripts = document.getElementsByTagName(‘script’)[0];
script.src = url;
scripts.parentNode.insertBefore(script, scripts);

The returned JavaScript file is executed automatically by the browser. Loading the Facebook Like button and Google Analytics are two examples that make use of this technique. Tip: When such script files are requested on page load, it’s recommended to use a standard script tag with the async (and defer) attribute included:

<script src=“https://platform.twitter.com/widgets.js“ async defer></script>

The HTML5 attribute async tells the browser to load this script without blocking the page. defer does essentially the same, but works on several older browsers, too.

Pros:

1.     Page loads faster (page renders first).

2.     Can be used with a collapsible div in order to entice clicks.

<html>

  <head>

<script src=“https://platform.twitter.com/widgets.js“ async defer></script>

  </head>

  <body>

  </body>

</html>

 

I hope I helped you out.  Hey give me a SHARE? Just testing it out…

Enjoy,

Charlie

 

Photo Credit: Richard G.

5/5 - (3 votes)