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

Submitted by sucka on Sat, 02/11/2012 - 12:51

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 :

    <script type="text/javascript">
    //<![CDATA[
    (function() {
    document.write('<g:plusone size="small"></g:plusone>');
    var po = document.createElement('script');
    po.type = 'text/javascript';
    po.async = true;
    po.src = '<a href="https://apis.google.com/js/plusone.js';
    ">https://apis.google.com/js/plusone.js';
    </a> var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(po, s);
    })();
    //]]>
    </script>

This is the twitter script:

    <script type="text/javascript">
    //<![CDATA[
    (function() {
    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>');
    var po = document.createElement('script');
    po.type = 'text/javascript';
    po.async = true;
    po.src = '<a href="https://platform.twitter.com/widgets.js';
    ">https://platform.twitter.com/widgets.js';
    </a> var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(po, s);
    })();
    //]]>
    </script>

This is the facebook script:

    <script type="text/javascript">
    //<![CDATA[
    (function() {
    document.write('<div class="fb-like" data-send="false" data-layout="button_count" data-width="90" data-show-faces="false" data-font="arial"></div>');
    var po = document.createElement('script');
    po.type = 'text/javascript';
    po.async = true;
    po.src = '<a href="https://connect.facebook.net/en_US/all.js#xfbml=1';
    ">https://connect.facebook.net/en_US/all.js#xfbml=1';
    </a> var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(po, s);
    })();
    //]]>
    </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.