Home/ Questions/Q 8034711
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T02:06:20+00:00

I am to implement social network buttons on some one’s website. I am hoping

  • 0

I am to implement social network buttons on some one’s website. I am hoping to do it as easily as possible AND futureproof so that the customer doesn’t need to add anything when he creates a new page. All his pages are HTML (not PHP) so I can’t use any PHP. I was thinking of JS and then using jQuery’s .append to make it all nice and easy, but I was wondering whether there is a better way and/or this method has any flaws? Here is the code:

HEAD (scripts):

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>$(document).ready(function() {
    var currentURL = window.location; //Get the URL, put it in a variable

    $('#fb').append('<div class=\"fb-like\" data-href=\"' + currentURL + '\" data-send=\"true\" data-width=\"450\" data-show-faces=\"true\" data-font=\"arial\"></div>');
});</script>

BODY

<body>
    <div id="fb-root"></div>
    <script>
        (function (d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) return;
            js = d.createElement(s);
            js.id = id;
            js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=177213782346727";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));
    </script>

    <div id="fb">Test</div>
</body>

Any remarks on that? I don’t want to fully implement this and then have to change everything all over again.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Once in a while Google’s API Libraries go down for whatever reason.

    I think including a fallback method to load jQuery would be welcomed in the head section:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.7.1.min.js"><\/script>')</script>

    For the buttons themselves, animating them with open source jqDock might interest you which is based on JavaScript and jQuery and not CSS3. One of that site’s webpages is using a social-plugin from WordPress that you might want to look at. It shows a method similar to your DIV’s and JS but is different for the FB connection scheme. Perhaps a mashup method is in order.

    If jqDock is overkill, there’s a lot more nifty Social Button plugins and CSS/Animated tutorials to pick from which are direct in what they do.

    • 0