Skip to content

Some Enhancements #10

@ghost

Description

Hi,

I'm new to Github and jquery and wanted to share some enhancements I made - not sure if you would like to include them:

  1. added ability to define different window sizes for each icon's popup window.
  2. when using email, the popup window would remain open - enhanced to close it by allow you to set the class to nopop or pop.
  3. changed twitter to use the Twitter Web Intents and added via as a value that can be included. This does require the twitter widgest.js be included in the html.
  4. changed facebook to use the feed dialog (looks nicer). This does require the facebook sdk to be included in the html.

Following is the new script. Feel free to use my changes if you want.

/*
 * jQuery.share - social media sharing plugin
 * ---
 * @author Carol Skelly (http://in1.com)
 * @version 1.0
 * @license MIT license (http://opensource.org/licenses/mit-license.php)
 * ---
 */
;
(function ($, window, undefined) {

    var document = window.document;

    $.fn.share = function (method) {

        var methods = {

            init: function (options) {
                this.share.settings = $.extend({}, this.share.defaults, options);
                var settings = this.share.settings,
                    networks = this.share.settings.networks,
                    theme = this.share.settings.theme,
                    via = this.share.settings.via,
                    redirect = this.share.settings.redirect,
                    orientation = this.share.settings.orientation,
                    affix = this.share.settings.affix,
                    margin = this.share.settings.margin,
                    pageTitle = this.share.settings.title || $(document).attr('title'),
                    pageUrl = this.share.settings.urlToShare || $(location).attr('href'),
                    pageDesc = "";

                $.each($(document).find('meta[name="description"]'), function (idx, item) {
                    pageDesc = $(item).attr("content");
                });

                // each instance of this plugin
                return this.each(function () {
                    var $element = $(this),
                        id = $element.attr("id"),
                        u = encodeURIComponent(pageUrl),
                        t = encodeURIComponent(pageTitle),
                        d = pageDesc.substring(0, 250),
                        href,
                        rel,
                        popup;

                    // append HTML for each network button
                    for (var item in networks) {
                        item = networks[item];
                        href = helpers.networkDefs[item].url;
                        rel = helpers.networkDefs[item].rel;
                        popup = helpers.networkDefs[item].popup;
                        href = href.replace('|u|', u).replace('|u|', u).replace('|t|', t).replace('|d|', d).replace('|140|', t.substring(0, 130)).replace('|v|', via).replace('|r|', redirect);
                        $("<a href='" + href + "' title='Share this page on " + item + "' rel='" + rel + "' class='" + popup + " share-" + theme + " share-" + theme + "-" + item + "'></a>").appendTo($element);
                    }

                    // customize css
                    $("#" + id + ".share-" + theme).css('margin', margin);

                    if (orientation != "horizontal") {
                        $("#" + id + " a.share-" + theme).css('display', 'block');
                    } else {
                        $("#" + id + " a.share-" + theme).css('display', 'inline-block');
                    }

                    if (typeof affix != "undefined") {
                        $element.addClass('share-affix');
                        if (affix.indexOf('right') != -1) {
                            $element.css('left', 'auto');
                            $element.css('right', '0px');
                            if (affix.indexOf('center') != -1) {
                                $element.css('top', '40%');
                            }
                        } else if (affix.indexOf('left center') != -1) {
                            $element.css('top', '40%');
                        }

                        if (affix.indexOf('bottom') != -1) {
                            $element.css('bottom', '0px');
                            $element.css('top', 'auto');
                            if (affix.indexOf('center') != -1) {
                                $element.css('left', '40%');
                            }
                        }
                    }

                    // bind click
                    $('.pop').click(function () {
                        var rel = $(this).attr("rel");
                        var winSpecs = winSpecsArray[rel];
                        window.open($(this).attr('href'), '', winSpecs);
                        return false;
                    });


                }); // end plugin instance
            }
        }

        var helpers = {
            networkDefs: {
                facebook: {
                    url: 'https://www.facebook.com/dialog/feed?app_id=537304962984013&display=popup&caption=|t|&link=|u|&redirect_uri=|r|',
                    rel: '0',
                    popup: 'pop'
                },
                twitter: {
                    url: 'https://twitter.com/intent/tweet?url=|u|&via=|v|&text=|140|',
                    rel: '1',
                    popup: 'pop'
                },
                googleplus: {
                    url: 'https://plusone.google.com/_/+1/confirm?hl=en&url=|u|',
                    rel: '2',
                    popup: 'pop'
                },
                email: {
                    url: 'mailto:?subject=|t|&body=|u|',
                    rel: '0',
                    popup: 'nopop'
                }
            }
        }

        var winSpecsArray = ['toolbar=0,resizable=1,status=0,width=640,height=320',
            'toolbar=0,resizable=1,status=0,width=550,height=440',
            'toolbar=0,resizable=1,status=0,width=600,height=600'
        ];

        if (methods[method]) {
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof method === 'object' || !method) {
            return methods.init.apply(this, arguments);
        } else {
            $.error('Method "' + method + '" does not exist in social plugin');
        }

    }

    $.fn.share.defaults = {
        networks: ['facebook', 'twitter', 'linkedin'],
        theme: 'icon',
        autoShow: true,
        margin: '3px',
        orientation: 'horizontal',
        useIn1: false
    }

    $.fn.share.settings = {}

})(jQuery, window);
$('#socialshare').share({
    networks: ['email', 'facebook', 'googleplus', 'twitter'],
    theme: 'square',
    via: 'TruthDeception',
    redirect: 'http://sandbox.truthaboutdeception.com/close_dialog.html'
});

The close_dialog.html page is simply:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>If this window does not close automatically, 
  use the Close button to close it.</p>
<script>
    window.close();
</script>
</body>
</html>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions