Register
Login
Processing

How to add valid markup and performant facebook, twitter and google plus 1 widgets

I was looking around for a method of valid markup widgets because i had 64 errors because of the 3 little gadgets and found nothing but confusing or with a great performance lack methods. Or some of them not even working and breaking the entire website, nobody seemed to find a good method for implementing all of them. hen i found some ideas written by some guys and inspired me to some other kind of codes. So i found a way they are all asynced java and thought to share that with you :) here it is: This is the google plus one script :
  1.    <script type="text/javascript">
  2.     //<![CDATA[
  3.     (function() {
  4.     document.write('<g:plusone size="small"></g:plusone>');
  5.     var po = document.createElement('script');
  6.     po.type = 'text/javascript';
  7.     po.async = true;
  8.     po.src = '<a href="https://apis.google.com/js/plusone.js';
  9.     ">https://apis.google.com/js/plusone.js';
  10.    </a> var s = document.getElementsByTagName('script')[0];
  11.    s.parentNode.insertBefore(po, s);
  12.    })();
  13.    //]]>
  14.    </script>
This is the twitter script:
  1.    <script type="text/javascript">
  2.     //<![CDATA[
  3.     (function() {
  4.     document.write('<a href="<a href="https://twitter.com/share"">https://twitter.com/share"</a> class="twitter-share-button" data-via="Innovating__IT" data-related="Innovating__IT" data-hashtags="Innovating__IT"></a>');
  5.     var po = document.createElement('script');
  6.     po.type = 'text/javascript';
  7.     po.async = true;
  8.     po.src = '<a href="https://platform.twitter.com/widgets.js';
  9.     ">https://platform.twitter.com/widgets.js';
  10.    </a> var s = document.getElementsByTagName('script')[0];
  11.    s.parentNode.insertBefore(po, s);
  12.    })();
  13.    //]]>
  14.    </script>
This is the facebook script:
  1.    <script type="text/javascript">
  2.     //<![CDATA[
  3.     (function() {
  4.     document.write('<div class="fb-like" data-send="false" data-layout="button_count" data-width="90" data-show-faces="false" data-font="arial"></div>');
  5.     var po = document.createElement('script');
  6.     po.type = 'text/javascript';
  7.     po.async = true;
  8.     po.src = '<a href="https://connect.facebook.net/en_US/all.js#xfbml=1';
  9.     ">https://connect.facebook.net/en_US/all.js#xfbml=1';
  10.    </a> var s = document.getElementsByTagName('script')[0];
  11.    s.parentNode.insertBefore(po, s);
  12.    })();
  13.    //]]>
  14.    </script>
As you can see all codes are the same style so i am preety sure it con work with any other scripts :) Hope everything works good now and if you find anything wrong with it or have questions share it in the comments bellow.