Facebook SDK takes over "$" from jQuery - how to stop that?

Question

I'm using both the Facebook SDK and jQuery... for some reason, with the Facebook SDK loading, $ no longer works as the jQuery object. All my jQuery calls still work but I have to use jQuery instead of $... see below for an example. I also have other code in my footer that is just jQuery stuff and the $ doesn't work there either. Everything functions perfectly but I hate this and want to be able to use $ as a shortcut for jQuery! How can I get my $ back?

<script type='text/javascript' src='http://x.com/wp-includes/js/jquery/jquery.js?ver=1.10.2'></script>

<script>
window.fbAsyncInit = function () {
    FB.init({  // (this code straight from FB developer docs)
        appId: '1234123412341234',
        channelUrl: '//mysite.com/channel.html',
        status: true,
        cookie: true,
        xfbml: true
    });

    function checkLoginStatus(response) {
        if(response && response.status == 'connected') {
            jQuery('#login-btn').hide();
            jQuery('#logout-btn').show();
            console.log('User ID: ' + response.authResponse.userID);
        } else {
            jQuery('#login-btn').show();
            jQuery('#logout-btn').hide();
        }
    }

// Load the SDK asynchronously (this code straight from FB developer docs)
(function (d) {
    var js, id = 'facebook-jssdk',
        ref = d.getElementsByTagName('script')[0];
    if (d.getElementById(id)) {
        return;
    }
    js = d.createElement('script');
    js.id = id;
    js.async = true;
    js.src = "//connect.facebook.net/en_US/all.js";
    ref.parentNode.insertBefore(js, ref);
}(document));
</script>

I searched the entire source code and facebook SDK definitely **does not** use the variable `$` even locally. — Esailija, Aug 13 '13 at 04:03
I hear ya-- I'm surprised too because I can't find anything in the docs about possible conflict with jQuery. I'm going to go ahead and try cutting some other JS bits in my code to see if I can identify the culprit. Regardless, for right now, this question stands and I got a great answer. Thank you for your comment and for taking the time to peek at the FB SDK! — Eric, Aug 13 '13 at 18:35

score 1 · Accepted Answer · answered Aug 13 '13 at 01:35

Just use a self-executing function, and pass jQuery as argument $.

jQuery.noConflict();
(function ($) {
    FB.init({  // (this code straight from FB developer docs)
        appId: '1234123412341234',
        channelUrl: '//mysite.com/channel.html',
        status: true,
        cookie: true,
        xfbml: true
    });

    function checkLoginStatus(response) {
        if(response && response.status == 'connected') {

            $('#login-btn').hide();
            $('#logout-btn').show();

            console.log('User ID: ' + response.authResponse.userID);

        } else {

            $('#login-btn').show();
            $('#logout-btn').hide();

        }
    }
})(jQuery);

You can read more here

This is my preferred approach. Additionally, RequireJS (or similar) can be employed for a similar sort of "dependency injection". — user2246674, Aug 13 '13 at 01:40

score 0 · Answer 2 · answered Aug 13 '13 at 01:38

0

only one library can use $. so you'll need to assign either jQuery or the FB API to something else. For example you could do this.

window._ = window.jQuery

there's also http://api.jquery.com/jQuery.noConflict/

answered Aug 13 '13 at 01:38

denov

11,180
2
27
43

Use `jQuery.noConflict` for (additional) alias assignments. It will also remove any jQuery clobbering, should it exist. However, `_` is commonly used for underscore.js .. – user2246674 Aug 13 '13 at 01:39

Facebook SDK takes over "$" from jQuery - how to stop that?

2 Answers2