LightCMS: Blog Share Links

A snippet to add Facebook, Twitter RSS links to the top of LightCMS blog posts

// JS

if($('.post h2')){
        $.miniShare();
        var minishare;
        $('div#minishare').append("<a href='/link_to_your_rss_feed' class='rss'></a>");
        minishare = $('div#minishare').detach();
        minishare.insertAfter('.post h2');
    } else {
        return false;
    }

// CSS

.post h2{
    float: left;
}

// MiniShare CSS


div#minishare {
  display: block;
  text-align: center;
  float: right;
}

div#minishare div.facebook, div#minishare div.twitter, div#minishare a.rss {
  cursor: pointer;
  display: inline;
  -webkit-transition: background .3s ease-in-out;
  -moz-transition: background .3s ease-in-out;
  -o-transition: background .3s ease-in-out;
  -ms-transition: background .3s ease-in-out;
  transition: background .3s ease-in-out;
  float: left;
  margin-right: 20px;
}

div#minishare div.facebook a, div#minishare div.twitter a {
  display: none;
}
div#minishare div.facebook {
  background: url(../img/blog-icons/fb-un.png) no-repeat;
  background-size: 12px 23px;
  width: 12px;
  height: 23px;
}
div#minishare div.facebook:hover {
  background: url(../img/blog-icons/fb-ov.png);
  background-size: 12px 23px;
}
div#minishare div.twitter {
  background: url(../img/blog-icons/twitter-un.png);
  background-size: 27px 22px;
  width: 27px;
  height: 22px;
}
div#minishare div.twitter:hover {
  background: url(../img/blog-icons/twitter-ov.png);
  background-size: 27px 22px;
}
div#minishare a.rss {
  background: url(../img/blog-icons/rss-un.png);
  background-size: 50px 24px;
  width: 50px;
  height: 24px;
  margin-right: 0;
}
div#minishare a.rss:hover {
  background: url(../img/blog-icons/rss-ov.png);
  background-size: 50px 24px;
}
div#minishare p#message {
  display: none;
}
@media only screen and (max-width: 720px) {
  div#minishare {
    float: left;
    margin-bottom: 25px;
  }
}

// Grab images

https://docs.google.com/file/d/0B-eKT0Z_vxfHTHk3YVNTRzY3aW8/edit?usp=sharing

// MiniShare JS

/********************************
MiniShare - Simple Sharing Widget for jQuery
v0.0.1
Copyright (C) 2013 David Hewitson

https://github.com/dwhewitson/minishare

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program.  If not, see <http://www.gnu.org/licenses/>.
*********************************/
(function($) {
    $.miniShare = function(options) {
        if($('#minishare').length > 0) {
            if (window.console && window.console.error) {
                console.error('Minishare widget already on the page (or there\'s a naming conflict.)');
            }
            return false;
        }
        var def_html = 
            [   "<div id=\"minishare\">"
            ,       "<p id=\"message\">Share</p>"
            ,       "<div class=\"facebook\">"
            ,           "<a href=\"#\">Share</a>"
            ,       "</div>"
            ,       "<div class=\"twitter\">"
            ,           "<a href=\"#\">Tweet</a>"
            ,       "</div>"
            ,   "</div>"
            ].join('');

        var services = {
            twitter: "https://twitter.com/intent/tweet?text=",
            facebook: "https://www.facebook.com/sharer/sharer.php?u="
        };

        var defaults = {
            url: document.location,
            message: "Share This",
            done_message: "Thanks for sharing one of our blog posts!",

            twitter_message: 'Check out this blog post', // article title or something

            html: def_html,
            style: '../css/minishare.css'
        }

        var opts = $.extend(defaults, options);

        // inject the MiniShare widget
        widget = $('body').append(opts.html);       

        // set the message
        $('#minishare p#message').html(opts.message);

        $('#minishare div').click(function() {
            $(this).children()[0].click(); // quick & dirty fix
        });

        $('#minishare a').click(function(e) {
            e.preventDefault;

            var parent_class = $(this).parent().attr('class');
            if(services[parent_class] == undefined) {
                return false; // SANITY CHEKKKKKKKCKCK
            };
            var the_url = '';
            if(parent_class == "twitter") { // add a  wee message for twitter users
                message = opts.twitter_message;
                the_url = services[parent_class] + opts.twitter_message + "&url=" + opts.url;
            } else {
                the_url = services[parent_class] + opts.url;
            };
            var share_window = window.open(the_url, 'sharer', 'width=600,height=400,top=200,left=200');
            var watchClose = setInterval(function() {
                try {
                    if (share_window.closed) {
                        clearTimeout(watchClose);
                        $('#minishare p#message').html(opts.done_message)
                    }
                } catch (e) {}
            }, 200);
        });
    };
})(jQuery);

The image should be good as long as they stay in my drive folder but if they go down let me know and I can fix it.

The only piece of change that needs to be done is the href value of the rss icon under the JS section (not the minishare JS) as well as customizing the message that twitter allows you to add (found in the minishare JS section).

Just make sure you call the respective files and that the paths to the images in the CSS file are accurate and this should work out of the box.

It is to be noted that because these icons are set to swap backgrounds when hovered over that you should stick these in a div invisible to the page and after the site has been loaded remove them from the page so that they are loaded in cache and they don't flicker. I will link to a gist that does this once I get it packed up and ready to go but I would love to see if there are any other solutions for this other than what I just stated above