Question

Most the code works except it is not grabbing each a that I need for each individual .post

(function ($) {
'use strict';
var url = window.location.href.split('#')[0];
var post = $('.post').children('a[name]').attr('name');
var helpers = {
        "defaults": {
            "post": post,
            "href": url+'#',
            "send": 'true',
            "layout": 'button_count',
            "width": '125',
            "faces": 'false',
            "font": 'verdana',
            "action": 'like',
            "scheme": 'light',
        },
        "init": function (options) {

            var settings = $.extend({}, helpers.defaults, options),

                easyface = $('<div />').addClass('easyface fb-like').attr({
                    "data-href": settings.href + settings.post,
                    "data-send": settings.send,
                    "data-layout": settings.layout,
                    "data-width": settings.width,
                    "data-show-faces": settings.faces,
                    "data-font": settings.font,
                    "data-action": settings.action,
                    "data-colorscheme": settings.scheme
                });

            return this.each(function (i, elem) {
                var self = $(elem),                 
                    data = self.data('easyface');  
                if (!data) {   

                    self.data('easyface', easyface);
                    self.append(easyface);
                }
            });
        },
        "destroy": function () {
            return this.each(function (i, elem) {
                var self = $(this),                
                    data = self.data('easyface');   // test to see if we've already called init on this element

                $(window).unbind('.easyface');      // unbind any namespaced events, assuming you've namespaced them like "click.easyface"
                self.removeData('easyface');        // remove the data flag
                self.find('.easyface').remove();    // remove the appended div
            });
        }

    };
//define the method "easyface"
$.fn.easyface = function (method) {
    if (helpers[method]) {
        // call the method and pass in the settings
        return helpers[method].apply(this, Array.prototype.slice.call(arguments, 1));
    } else if (typeof method === 'object' || !method) {
        // default to the init method and pass in the arg
        return helpers.init.apply(this, arguments);
    } else {
        // throw an error
        $.error('Method ' + method + ' does not exist on jQuery.tooltip');
    }
};
}(jQuery));
 $(function() {
   $('body').append('<div id="fb-root"></div>');
   (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_US/all.js#xfbml=1&appId=477049588983712";
     fjs.parentNode.insertBefore(js, fjs);
     }(document, 'script', 'facebook-jssdk'));
   });

Answer 1

A few pointers on what you’ve tried, notably with your pattern of:

$(this).attr('data-send', function () {
    return + send;
});
$(this).attr('data-layout', function () {
    return + layout;
});
$(this).attr('data-width', function () {
    return + width;
});

which I can best explain with comments:

// in your execution scope, "this" is the window object
$(this).attr('data-href', function () {
    // "href" is not in any scope of the IIFE
    // and is therefore either a global variable
    // or is undefined. Also the plus sign, when
    // used like this, will try to convert your
    // "href" to a number which is likely to return
    // NaN given that "href" is likely to be undefined
    // or a non-numeric string
    return + href;
});

That said, here’s how I would structure your plug-in with comments as to why I would structure it so:

// Start with an IIFE and pass in either jQuery, or jQuery.noConflict
// which will map it to the dollar sign so that the the dollar sign
// cannot be overwritten by another library in the scope of its execution.
(function ($) {
    'use strict';
    // contain all methods and settings in a local variable.
    // this helps ensure clean namespacing and
    // preserves scope
    var helpers = {
            "defaults": {
                "post": "",                 //pass the post id in as a parameter
                "href": '/',
                "send": 'true',
                "layout": 'button_count',
                "width": '125',
                "faces": 'false',
                "font": 'verdana',
                "like": 'like'
            },
            "init": function (options) {
                // combine passed in options with the defaults in a new object
                var settings = $.extend({}, helpers.defaults, options),
                    // build the easyface element to attach
                    easyface = $('<div />').addClass('easyface fb-like').attr({
                        "data-href": settings.href + settings.post, // concatenate with your href here.
                        "data-send": settings.send,
                        "data-layout": settings.layout,
                        "data-width": settings.width,
                        "data-show-faces": settings.faces,
                        "data-font": settings.font,
                        "data-like": settings.like
                    });
                // return this.each to preserve chainability
                return this.each(function (i, elem) {
                    var self = $(elem),                 // cached reference to the element
                        data = self.data('easyface');   // test to see if we've already called init on this element
                    if (!data) {    // If the plugin hasn't been initialized yet
                        //Do more setup stuff here
                        self.data('easyface', easyface);
                        self.append(easyface);
                    }
                });
            },
            "destroy": function () {
                return this.each(function (i, elem) {
                    var self = $(this),                 // cached reference to the element
                        data = self.data('easyface');   // test to see if we've already called init on this element
                    // namespacing for the win
                    $(window).unbind('.easyface');      // unbind any namespaced events, assuming you've namespaced them like "click.easyface"
                    self.removeData('easyface');        // remove the data flag
                    self.find('.easyface').remove();    // remove the appended div
                });
            }
            /*
             * other example methods
             *
             *  "reposition": function () {},
             *  "show": function () {},
             *  "hide": function () {},
             *  "update": function (content) {}
             */
        };
    //define the method "easyface"
    $.fn.easyface = function (method) {
        if (helpers[method]) {
            // if the arg passed was a string that indicates a method above
            // call the method and pass in the settings
            return helpers[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof method === 'object' || !method) {
            // if the arg passed was an object, or no arg was passed
            // default to the init method and pass in the arg
            return helpers.init.apply(this, arguments);
        } else {
            // don't know what to do with this
            // throw an error
            $.error('Method ' + method + ' does not exist on jQuery.tooltip');
        }
    };
}(jQuery));

In your example fiddle, you can pass the post id in as an option like this:

$('.postfoot').easyface({
    "post": $('.post').children('a[name]').attr('name')
});

Here’s an updated fiddle to demonstrate: http://jsfiddle.net/zUeFL/9/