Question

I have a strange problem with the jquery plugin and options getting over written.

1. If I setup the plugin like this it works fine.

   $("#social-media").socialMedia({
       url: "http://css-tricks.com",
       social: [
           { name: "facebook", widget: "like_small" },
           { name: "twitter", widget: "small" },
           { name: "googlePlus", widget: "small" }
       ]    
   });
   

2. If I add a extra option that I need to overwrite, the facebook like button does not load.

   $("#social-media").socialMedia({
       url: "http://css-tricks.com",
       social: [
           { name: "facebook", widget: "like_small" },
           { name: "twitter", widget: "small" },
           { name: "googlePlus", widget: "small" }
       ],
       facebook: {
           id: 195838043798363
       }     
   });
   

Answer 1

By default, jQuery.extend() replaces whole properties. So, if the defaults have this:

{
    …
    facebook: {
        like_large: '<div class="fb-like" data-href="{url}" data-send="false" data-layout="box_count" data-width="120" data-show-faces="false"></div>',
        like_small: '<div class="fb-like" data-href="{url}" data-send="false" data-layout="button_count" data-width="120" data-height="21" data-show-faces="false" data-colorscheme="light"></div>',
        share: '<a name="fb_share" type="box_count" share_url="{url}" href="http://www.facebook.com/sharer.php?u={url}&t={title}">Share</a>',
        id: 195838043798363
    },
    …
}

And your options look like this:

{
    …
    facebook: {
        id: 195838043798363
    }     
    …
}

The whole facebook object will be replaced with { id: 195838043798363 }.

It turns out that jQuery.extend() supports doing what you’re trying to get it to do, if you pass true as its first argument. Changing this line:

var opt = $.extend({},defaults, options);

to this:

var opt = $.extend(true, {},defaults, options);

Should make it do what you want it to do.