Permalink
Browse files

first version and demo

  • Loading branch information...
1 parent 3406a05 commit 8adae5fbd63f7ff86c8c2a94308cbe325cb133f9 @dbushell dbushell committed Dec 4, 2011
Showing with 402 additions and 0 deletions.
  1. +86 −0 index.html
  2. +56 −0 license.txt
  3. +248 −0 socialite-1.0.js
  4. +12 −0 socialite.css
View
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html class="no-js">
+<head>
+ <title>Socialite.js</title>
+ <script>
+ var docElement = document.documentElement;
+ docElement.className = docElement.className.replace(/\bno-js\b/, '') + ' js ';
+ </script>
+ <link rel="stylesheet" href="socialite.css">
+</head>
+<body>
+ <h1>socialite.js</h1>
+ <p>Introducing Socialite, the JavaScript that makes social sharing buttons a breeze to implementation.</p>
+ <p>Because if you're selling your soul, you may as well do it asynchronously.</p>
+ <h2>Features and Benefits</h2>
+ <ul>
+ <li>No dependencies.
+ <li>Less than 2kb when minified and compressed.</li>
+ <li>Lazy-load sharing buttons. On document load, or whenever you want!</li>
+ <li>More accessible and styleable defaults/fallbacks.</li>
+ <li>Built in support for Twitter, Google+, Facebook and LinkedIn.</li>
+ <li>Easily extendable with other social networks.</li>
+ </ul>
+ <h2>Share Socialite</h2>
+ <ul id="social" class="cf">
+ <li>
+ <a href="http://twitter.com/share" class="socialise twitter" data-text="Socialite.js" data-url="http://socialitejs.com" data-count="vertical" data-via="dbushell" rel="nofollow" target="_blank">
+ <span>Share on Twitter</span>
+ </a>
+ </li>
+ <li>
+ <a href="https://plusone.google.com/_/+1/confirm?hl=en&amp;url=http://socialitejs.com" class="socialise plusone" data-size="tall" data-href="http://socialitejs.com" rel="nofollow" target="_blank">
+ <span>Share on Google+</span>
+ </a>
+ </li>
+ <li>
+ <a href="http://www.facebook.com/sharer.php?u=http://www.socialitejs.com&amp;t=Socialite.js" class="socialise facebook" data-href="http://socialitejs.com" data-send="false" data-layout="box_count" data-width="60" data-show-faces="false" rel="nofollow" target="_blank">
+ <span>Share on Facebook</span>
+ </a>
+ </li>
+ <li>
+ <a href="http://www.linkedin.com/shareArticle?mini=true&amp;url=http://socialitejs.com&amp;title=Socialite.js" class="socialise linkedin" data-url="http://socialitejs.com" data-counter="top" rel="nofollow" target="_blank">
+ <span>Share on LinkedIn</span>
+ </a>
+ </li>
+ <li>
+ <a href="http://stumbleupon.com/submit?url=http://socialitejs.com" data-r="5" data-url="http://socialitejs.com" class="socialise stumbleupon">
+ <span>Stumble!</span>
+ </a>
+ </li>
+ </ul>
+ <script src="socialite-1.0.js"></script>
+ <script>
+
+ function onDOMContentLoaded()
+ {
+
+ // example of extending the social networks
+ Socialite.extend('stumbleupon', function(elem, button, _socialite)
+ {
+ var r = elem.attributes['data-r'] ? elem.attributes['data-r'].value : '1';
+ var src = '//www.stumbleupon.com/badge/embed/' + r + '/?';
+ src += _socialite.getDataAttributes(elem);
+ var iframe = _socialite.createIFrame(src);
+ button.replaceChild(iframe, elem);
+ });
+
+ // initialise all elements with the class "socialise"
+ Socialite.load();
+
+ // create and activate an element with JavaScript
+ /*
+ setTimeout(function() {
+ var b1 = document.createElement('div');
+ document.body.appendChild(b1);
+ Socialite.activate(b1, 'linkedin');
+ }, 3000);
+ */
+
+ }
+
+ window.addEventListener('DOMContentLoaded', onDOMContentLoaded, false);
+
+ </script>
+</body>
+</html>
View
@@ -0,0 +1,56 @@
+****************************************************************************************************
+
+MIT LICENSE
+
+****************************************************************************************************
+
+Copyright (C) 2011
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+
+
+****************************************************************************************************
+
+BSD LICENSE
+
+****************************************************************************************************
+
+Copyright (c) 2011
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+ * Redistributions of source code must retain the above copyright
+ notice, this list of conditions and the following disclaimer.
+ * Redistributions in binary form must reproduce the above copyright
+ notice, this list of conditions and the following disclaimer in the
+ documentation and/or other materials provided with the distribution.
+ * Neither the name of the organization nor the
+ names of its contributors may be used to endorse or promote products
+ derived from this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
+ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER BE LIABLE FOR ANY
+DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
View
@@ -0,0 +1,248 @@
+/*
+ * Socialite v1.0
+ * http://www.socialitejs.com
+ * Copyright (c) 2011 David Bushell
+ * Dual-licensed under the BSD or MIT licenses: http://socialitejs.com/license.txt
+ */
+window.Socialite = (function()
+{
+ var _socialite = { },
+ Socialite = { },
+ networks = { },
+ appends = { },
+ loaded = { },
+ sources = {
+ twitter: '//platform.twitter.com/widgets.js',
+ plusone: '//apis.google.com/js/plusone.js',
+ facebook: '//connect.facebook.net/en_US/all.js#xfbml=1',
+ linkedin: '//platform.linkedin.com/in.js'
+ };
+
+ /* append a known script element to the document body */
+ _socialite.appendScript = function(name, id)
+ {
+ if (appends[name]) {
+ return false;
+ }
+ appends[name] = true;
+ var js = document.createElement('script');
+ js.onload = function() {
+ loaded[name] = true;
+ };
+ js.async = true;
+ js.src = sources[name];
+ if (id) {
+ js.id = id;
+ }
+ document.body.appendChild(js);
+ return true;
+ };
+
+ // copy data-* attributes from one element to another
+ _socialite.copyDataAtributes = function(from, to)
+ {
+ var i,
+ attr = from.attributes;
+ for (i = 0; i < attr.length; i++) {
+ if (attr[i].name.indexOf('data-') === 0) {
+ if (attr[i].value.length) {
+ to.setAttribute(attr[i].name, attr[i].value);
+ }
+ }
+ }
+ }
+
+ // return data-* attributes from an element as a query string
+ _socialite.getDataAttributes = function(from)
+ {
+ var i,
+ str = '',
+ attr = from.attributes;
+ for (i = 0; i < attr.length; i++) {
+ if (attr[i].name.indexOf('data-') === 0) {
+ str += encodeURIComponent(attr[i].name) + '=' + encodeURIComponent(attr[i].value) + '&';
+ }
+ }
+ return str;
+ }
+
+ // return an iframe element
+ // do iframes need width and height?
+ _socialite.createIFrame = function(src)
+ {
+ var iframe = document.createElement('iframe');
+ iframe.setAttribute('allowtransparency', 'true');
+ iframe.setAttribute('frameborder', '0');
+ iframe.setAttribute('scrolling', 'no');
+ iframe.setAttribute('src', src);
+ iframe.style.cssText = 'overflow: hidden; border: none;';
+ return iframe;
+ }
+
+
+ // load a single button
+ Socialite.activate = function(elem, network)
+ {
+ Socialite.load(null, elem, network);
+ };
+
+ // load and initialise buttons
+ Socialite.load = function(context, elem, network)
+ {
+ // if no context use the document
+ context = (typeof context === 'object') ? context : document;
+
+ // if no element then search the context for instances
+ if (elem === undefined) {
+ var find = context.getElementsByClassName('socialise');
+ var length = find.length;
+ if (!length) {
+ return;
+ }
+ var elems = [];
+ for (var i = 0; i < length; i++) {
+ elems[i] = find[i];
+ }
+ Socialite.load(context, elems, network);
+ return;
+ }
+
+ // if an array of elements load individually
+ if (typeof elem === 'object' && elem.length) {
+ for (var j = 0; j < elem.length; j++) {
+ Socialite.load(context, elem[j], network);
+ }
+ return;
+ }
+
+ // Not an element? Get outa here!
+ if (typeof elem !== 'object' || elem.nodeType !== 1) {
+ return;
+ }
+
+ // if no network is specified or recognised look for one in the class name
+ if (typeof network !== 'string' || networks[network] === undefined) {
+ var classes = elem.className.split(' ');
+ for (var k = 0; k < classes.length; k++) {
+ if (networks[classes[k]] !== undefined) {
+ network = classes[k];
+ break;
+ }
+ }
+ if (typeof network !== 'string') {
+ return;
+ }
+ }
+
+ // create a wrapping element
+ var button = document.createElement('div');
+ button.className = 'socialised ' + network;
+
+ // insert button before parent element, or append to the context
+ var parent = elem.parentNode;
+ if (parent === null) {
+ parent = (context === document) ? document.body : context;
+ parent.appendChild(button);
+ } else {
+ parent.insertBefore(button, elem);
+ }
+
+ // insert element into button
+ button.appendChild(elem);
+
+ // hide element from future loading
+ elem.className = elem.className.replace(/\bsocialise\b/, '');
+
+ // initialise the button
+ networks[network](elem, button, _socialite);
+
+ };
+
+ // allow users to extend the list of supported networks
+ Socialite.extend = function(network, callback)
+ {
+ if (typeof network !== 'string' || typeof callback !== 'function') {
+ return false;
+ }
+ if (networks[network] !== undefined) {
+ return false;
+ }
+ networks[network] = callback;
+ return true;
+ };
+
+ Socialite.extend('twitter', function(elem, button)
+ {
+ if (!loaded['twitter']) {
+ var el = document.createElement('a');
+ el.className = 'twitter-share-button';
+ _socialite.copyDataAtributes(elem, el);
+ button.replaceChild(el, elem);
+ _socialite.appendScript('twitter');
+ } else {
+ if (typeof window.twttr === 'object') {
+ var src = '//platform.twitter.com/widgets/tweet_button.html?';
+ src += _socialite.getDataAttributes(elem);
+ var iframe = _socialite.createIFrame(src);
+ button.replaceChild(iframe, elem);
+ }
+ }
+
+ });
+
+ Socialite.extend('plusone', function(elem, button)
+ {
+ var el = document.createElement('div');
+ el.className = 'g-plusone';
+ _socialite.copyDataAtributes(elem, el);
+ button.replaceChild(el, elem);
+ if (!loaded['plusone']) {
+ _socialite.appendScript('plusone');
+ } else {
+ if (typeof window.gapi === 'object' && typeof window.gapi.plusone === 'object' && typeof gapi.plusone.go === 'function') {
+ gapi.plusone.go();
+ }
+ }
+ });
+
+ Socialite.extend('facebook', function(elem, button)
+ {
+ var el = document.createElement('div');
+
+ if (!loaded['facebook']) {
+ el.className = 'fb-like';
+ _socialite.copyDataAtributes(elem, el);
+ button.replaceChild(el, elem);
+ _socialite.appendScript('facebook', 'facebook-jssdk');
+ } else {
+ if (typeof window.FB === 'object') {
+ // XFBML is nasty! use an iframe instead :)
+ //if (typeof FB.XFBML.parse === 'function')
+ // FB.XFBML.parse(el);
+ var src = '//www.facebook.com/plugins/like.php?';
+ src += _socialite.getDataAttributes(elem);
+ var iframe = _socialite.createIFrame(src);
+ button.replaceChild(iframe, elem);
+ }
+ }
+ });
+
+ Socialite.extend('linkedin', function(elem, button)
+ {
+ var attr = elem.attributes;
+ var el = document.createElement('script');
+ el.type = 'IN/Share';
+ _socialite.copyDataAtributes(elem, el);
+ button.replaceChild(el, elem);
+ if (!loaded['linkedin']) {
+ _socialite.appendScript('linkedin');
+ } else {
+ if (typeof window.IN === 'object' && typeof window.IN.init === 'function') {
+ window.IN.init();
+ }
+ }
+ });
+
+ return Socialite;
+
+})();
Oops, something went wrong.

0 comments on commit 8adae5f

Please sign in to comment.