Skip to content

Instantly share code, notes, and snippets.

@ivanmendoza

ivanmendoza/index.html

Last active December 13, 2015 22:18
Show Gist options
  • Save ivanmendoza/4983304 to your computer and use it in GitHub Desktop.
Save ivanmendoza/4983304 to your computer and use it in GitHub Desktop.
Download ZIP
Asynchronous load of social bookmarks using _snbx-socialx.js (https://github.com/ivanmendoza/snbx)
Raw
index.html
<!DOCTYPE html>
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>SNBX - MKT X</title>
<!-- LINKS -->
<style type="text/css">body{font:normal 1em verdana,helvetica,arial,sans-serif;font-size:16px;background:#fff;color:#000;margin:0;padding:0}pre,code,tt{font:normal 1/1.5 'Lucida Console','Consolas','Courier New',monospace}b,strong{font-weight:700}h1,h2,h3,h4,h5,h6{font:normal 2/.9 'gill sans','Century Gothic',verdana,sans-serif}em,i,dfn{font-style:italic}dfn{font-weight:700}p,code,pre,kbd{margin:0 0 1.5em 0}blockquote{margin:0 1.5em 1.5em 1.5em;font-style:italic}cite{font-style:italic}li ul,li ol{margin:0 1.5em}ul,ol{margin:0 1.5em 1.5em 1.5em}ul{list-style-type:disc}ol{list-style-type:decimal}ol ol{list-style:upper-alpha}ol ol ol{list-style:lower-roman}ol ol ol ol{list-style:lower-alpha}dl{margin:0 0 1.5em 0}dl dt{font-weight:700}dd{margin-left:1.5em}table{margin-bottom:1.4em;width:100%;border-collapse:collapse;border-spacing:0}th{font-weight:700;text-align:left}th,td,caption{padding:4px 10px 4px 5px}tfoot{font-style:italic}sup,sub{line-height:0}abbr,acronym{border-bottom:1px dotted}address{margin:0 0 1.5em;font-style:italic}del{text-decoration:line-through}pre{margin:1.5em 0;white-space:pre}img.centered,.aligncenter,div.aligncenter{display:block;margin-left:auto;margin-right:auto}img.alignright{display:inline}img.alignleft{display:inline}.alignright{float:right;margin-left:10px}.alignleft{float:left;margin-right:10px}img{max-width:100%}* html .clearfix{height:1%}*+html .clearfix{display:inline-block}.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}* html .group{height:1%}*+html .group{display:inline-block}.group:after{content:".";display:block;height:0;clear:both;visibility:hidden}.input,textarea,button,label{font:normal 1/1 tahoma,sans-serif}article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block}audio,canvas,video{display:inline-block;*display:inline;*zoom:1}audio:not([controls]){display:none}[hidden]{display:none}form{margin:0}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0;white-space:normal;*margin-left:-7px}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}button,input{line-height:normal}button,input[type="button"],input[type="reset"],input[type="submit"]{cursor:pointer;-webkit-appearance:button;*overflow:visible}button[disabled],input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;*height:13px;*width:13px}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-decoration,input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}.leftAlign{float:left;clear:none}.rightAlign{float:right;clear:none}.textToLeft{text-align:left}.textToCenter{text-align:center}.textToRight{text-align:right}.areaForm{clear:both;margin:0;padding:0;overflow:hidden}
.mixin-span_first{margin-left:0;border-left-width:0}.columns.borderL{border-left:solid 1px #ccc!important}.columns.borderR{border-right:solid 1px #ccc!important}.borderT{border-top:solid 2px rgba(0,0,0,.30000000000000004)!important}.borderB{border-bottom:solid 2px rgba(0,0,0,.30000000000000004)!important}.container{width:100%;max-width:480px}.row{overflow:hidden}.one-mobile.column,.one-mobile.columns{width:25%;border:0 solid rgba(0,0,0,0);float:left;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-moz-background-clip:padding-box!important;-webkit-background-clip:padding-box!important;background-clip:padding-box!important;border-left-width:4px;padding:0;margin-left:0;position:relative}.two-mobile.columns{width:50%;border:0 solid rgba(0,0,0,0);float:left;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-moz-background-clip:padding-box!important;-webkit-background-clip:padding-box!important;background-clip:padding-box!important;border-left-width:4px;padding:0;margin-left:0;position:relative}.three-mobile.columns{width:75%;border:0 solid rgba(0,0,0,0);float:left;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-moz-background-clip:padding-box!important;-webkit-background-clip:padding-box!important;background-clip:padding-box!important;border-left-width:4px;padding:0;margin-left:0;position:relative}.four-mobile.columns{width:100%;border:0 solid rgba(0,0,0,0);float:left;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-moz-background-clip:padding-box!important;-webkit-background-clip:padding-box!important;background-clip:padding-box!important;border-left-width:0;padding:0;margin-left:0;position:relative}.offset-by-one{margin-left:25%!important}.offset-by-two{margin-left:50%!important}.offset-by-three{margin-left:75%!important}.offset-by-four{margin-left:100%!important}.column:first-child,.columns:first-child{margin-left:0;border-left-width:0}@media screen and (min-width: 481px) and (max-width: 1024px){.container{ width:100%;max-width:1000px}.row{overflow:hidden}.one.column,.one.columns{width:8.333333333333334%;border:0 solid rgba(0,0,0,0);float:left;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-moz-background-clip:padding-box!important;-webkit-background-clip:padding-box!important;background-clip:padding-box!important;border-left-width:10px;padding:0;margin-left:0;position:relative}.two.columns{width:16.666666666666668%;border:0 solid rgba(0,0,0,0);float:left;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-moz-background-clip:padding-box!important;-webkit-background-clip:padding-box!important;background-clip:padding-box!important;border-left-width:10px;padding:0;margin-left:0;position:relative}.three.columns{width:25%;border:0 solid rgba(0,0,0,0);float:left;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-moz-background-clip:padding-box!important;-webkit-background-clip:padding-box!important;background-clip:padding-box!important;border-left-width:10px;padding:0;margin-left:0;position:relative}.four.columns{width:33.333333333333336%;border:0 solid rgba(0,0,0,0);float:left;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-moz-background-clip:padding-box!important;-webkit-background-clip:padding-box!important;background-clip:padding-box!important;border-left-width:10px;padding:0;margin-left:0;position:relative}.five.columns{width:41.66666666666667%;border:0 solid rgba(0,0,0,0);float:left;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-moz-background-clip:padding-box!important;-webkit-background-clip:padding-box!important;background-clip:padding-box!important;border-left-width:10px;padding:0;margin-left:0;position:relative}.six.columns{width:50%;border:0 solid rgba(0,0,0,0);float:left;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-moz-background-clip:padding-box!important;-webkit-background-clip:padding-box!important;background-clip:padding-box!important;border-left-width:10px;padding:0;margin-left:0;position:relative}.seven.columns{width:58.333333333333336%;border:0 solid rgba(0,0,0,0);float:left;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-moz-background-clip:padding-box!important;-webkit-background-clip:padding-box!important;background-clip:padding-box!important;border-left-width:10px;padding:0;margin-left:0;position:relative}.eight.columns{width:66.66666666666667%;border:0 solid rgba(0,0,0,0);float:left;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-moz-background-clip:padding-box!important;-webkit-background-clip:padding-box!important;background-clip:padding-box!important;border-left-width:10px;padding:0;margin-left:0;position:relative}.nine.columns{width:75%;border:0 solid rgba(0,0,0,0);float:left;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-moz-background-clip:padding-box!important;-webkit-background-clip:padding-box!important;background-clip:padding-box!important;border-left-width:10px;padding:0;margin-left:0;position:relative}.ten.columns{width:83.33333333333334%;border:0 solid rgba(0,0,0,0);float:left;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-moz-background-clip:padding-box!important;-webkit-background-clip:padding-box!important;background-clip:padding-box!important;border-left-width:10px;padding:0;margin-left:0;position:relative}.eleven.columns{width:91.66666666666667%;border:0 solid rgba(0,0,0,0);float:left;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-moz-background-clip:padding-box!important;-webkit-background-clip:padding-box!important;background-clip:padding-box!important;border-left-width:10px;padding:0;margin-left:0;position:relative}.twelve.columns{width:100%;border:0 solid rgba(0,0,0,0);float:left;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-moz-background-clip:padding-box!important;-webkit-background-clip:padding-box!important;background-clip:padding-box!important;border-left-width:10px;padding:0;margin-left:0;position:relative}.offset-by-one{margin-left:8.333333333333334%!important}.offset-by-two{margin-left:16.666666666666668%!important}.offset-by-three{margin-left:25%!important}.offset-by-four{margin-left:33.333333333333336%!important}.offset-by-five{margin-left:41.66666666666667%!important}.offset-by-six{margin-left:50%!important}.offset-by-seven{margin-left:58.333333333333336%!important}.offset-by-eight{margin-left:66.66666666666667%!important}.offset-by-nine{margin-left:75%!important}.offset-by-ten{margin-left:83.33333333333334%!important}.offset-by-eleven{margin-left:91.66666666666667%!important}.offset-by-twelve{margin-left:100%!important}.pull-two{right:16.666666666666668%}.pull-three{right:25%}.pull-four{right:33.333333333333336%}.pull-five{right:41.66666666666667%}.pull-six{right:50%}.pull-seven{right:58.333333333333336%}.pull-eight{right:66.66666666666667%}.pull-nine{right:75%}.pull-ten{right:83.33333333333334%}.pull-eleven{right:91.66666666666667%}.pull-twelve{right:100%}.push-two{left:16.666666666666668%}.push-three{left:25%}.push-four{left:33.333333333333336%}.push-five{left:41.66666666666667%}.push-six{left:50%}.push-seven{left:58.333333333333336%}.push-eight{left:66.66666666666667%}.push-nine{left:75%}.push-ten{left:83.33333333333334%}.push-eleven{left:91.66666666666667%}.push-twelve{left:100%}.column:first-child,.columns:first-child{margin-left:0;border-left-width:0}}@media screen and (min-width: 1025px){.container{ width:100%;max-width:1260px}.row{overflow:hidden}.one.column,.one.columns{width:8.333333333333334%;border:0 solid rgba(0,0,0,0);float:left;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-moz-background-clip:padding-box!important;-webkit-background-clip:padding-box!important;background-clip:padding-box!important;border-left-width:10px;padding:0;margin-left:0;position:relative}.two.columns{width:16.666666666666668%;border:0 solid rgba(0,0,0,0);float:left;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-moz-background-clip:padding-box!important;-webkit-background-clip:padding-box!important;background-clip:padding-box!important;border-left-width:10px;padding:0;margin-left:0;position:relative}.three.columns{width:25%;border:0 solid rgba(0,0,0,0);float:left;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-moz-background-clip:padding-box!important;-webkit-background-clip:padding-box!important;background-clip:padding-box!important;border-left-width:10px;padding:0;margin-left:0;position:relative}.four.columns{width:33.333333333333336%;border:0 solid rgba(0,0,0,0);float:left;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-moz-background-clip:padding-box!important;-webkit-background-clip:padding-box!important;background-clip:padding-box!important;border-left-width:10px;padding:0;margin-left:0;position:relative}.five.columns{width:41.66666666666667%;border:0 solid rgba(0,0,0,0);float:left;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-moz-background-clip:padding-box!important;-webkit-background-clip:padding-box!important;background-clip:padding-box!important;border-left-width:10px;padding:0;margin-left:0;position:relative}.six.columns{width:50%;border:0 solid rgba(0,0,0,0);float:left;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-moz-background-clip:padding-box!important;-webkit-background-clip:padding-box!important;background-clip:padding-box!important;border-left-width:10px;padding:0;margin-left:0;position:relative}.seven.columns{width:58.333333333333336%;border:0 solid rgba(0,0,0,0);float:left;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-moz-background-clip:padding-box!important;-webkit-background-clip:padding-box!important;background-clip:padding-box!important;border-left-width:10px;padding:0;margin-left:0;position:relative}.eight.columns{width:66.66666666666667%;border:0 solid rgba(0,0,0,0);float:left;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-moz-background-clip:padding-box!important;-webkit-background-clip:padding-box!important;background-clip:padding-box!important;border-left-width:10px;padding:0;margin-left:0;position:relative}.nine.columns{width:75%;border:0 solid rgba(0,0,0,0);float:left;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-moz-background-clip:padding-box!important;-webkit-background-clip:padding-box!important;background-clip:padding-box!important;border-left-width:10px;padding:0;margin-left:0;position:relative}.ten.columns{width:83.33333333333334%;border:0 solid rgba(0,0,0,0);float:left;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-moz-background-clip:padding-box!important;-webkit-background-clip:padding-box!important;background-clip:padding-box!important;border-left-width:10px;padding:0;margin-left:0;position:relative}.eleven.columns{width:91.66666666666667%;border:0 solid rgba(0,0,0,0);float:left;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-moz-background-clip:padding-box!important;-webkit-background-clip:padding-box!important;background-clip:padding-box!important;border-left-width:10px;padding:0;margin-left:0;position:relative}.twelve.columns{width:100%;border:0 solid rgba(0,0,0,0);float:left;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-moz-background-clip:padding-box!important;-webkit-background-clip:padding-box!important;background-clip:padding-box!important;border-left-width:10px;padding:0;margin-left:0;position:relative}.offset-by-one{margin-left:8.333333333333334%!important}.offset-by-two{margin-left:16.666666666666668%!important}.offset-by-three{margin-left:25%!important}.offset-by-four{margin-left:33.333333333333336%!important}.offset-by-five{margin-left:41.66666666666667%!important}.offset-by-six{margin-left:50%!important}.offset-by-seven{margin-left:58.333333333333336%!important}.offset-by-eight{margin-left:66.66666666666667%!important}.offset-by-nine{margin-left:75%!important}.offset-by-ten{margin-left:83.33333333333334%!important}.offset-by-eleven{margin-left:91.66666666666667%!important}.offset-by-twelve{margin-left:100%!important}.pull-two{right:16.666666666666668%}.pull-three{right:25%}.pull-four{right:33.333333333333336%}.pull-five{right:41.66666666666667%}.pull-six{right:50%}.pull-seven{right:58.333333333333336%}.pull-eight{right:66.66666666666667%}.pull-nine{right:75%}.pull-ten{right:83.33333333333334%}.pull-eleven{right:91.66666666666667%}.pull-twelve{right:100%}.push-two{left:16.666666666666668%}.push-three{left:25%}.push-four{left:33.333333333333336%}.push-five{left:41.66666666666667%}.push-six{left:50%}.push-seven{left:58.333333333333336%}.push-eight{left:66.66666666666667%}.push-nine{left:75%}.push-ten{left:83.33333333333334%}.push-eleven{left:91.66666666666667%}.push-twelve{left:100%}.column:first-child,.columns:first-child{margin-left:0;border-left-width:0}}
#texts .cut{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}body{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAHElEQVQYlWM4fP2ZMTGY4fD1Z8YMxIBRhVRRCABdYDNK/gXNOQAAAABJRU5ErkJggg==)}.container{margin:0 auto;padding:1em 0}.panel{border:solid 1px #efefef;background:#efefef;background:-webkit-gradient(linear,left bottom,left top,color-stop(0, #eee),color-stop(1, #fff));background:-moz-linear-gradient(center bottom, #eee 0, #fff 100%);background:-ms-linear-gradient(bottom, #eee 0, #fff 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee', GradientType=0);-webkit-border-radius:.2em;-moz-border-radius:.2em;border-radius:.2em;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;-webkit-box-shadow:1px 1px 5px rgba(0,0,0,.30000000000000004);-moz-box-shadow:1px 1px 5px rgba(0,0,0,.30000000000000004);box-shadow:1px 1px 5px rgba(0,0,0,.30000000000000004);margin:1.5em .5em;padding:.5em;font-size:1em;line-height:1.2}.panel.minheight{min-height:18em}.supertitle,.tagline{font-weight:700;text-transform:uppercase;line-height:1;margin:.4em 0;padding:0}.supertitle{font-size:1.5em;margin-top:.6666666666666666em}.tagline{font-size:.85em;margin-bottom:1.1764705882352942em}#htmlog hr{border:0;border-top:solid 1px #eee}</style>
<!-- IE8 'n older IEs -->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="https://raw.github.com/ivanmendoza/snbx/master/javascripts/respond-min.js"></script>
<![endif]-->
<script type="text/javascript" src="http://raw.github.com/ivanmendoza/snbx/master/javascripts/_snbx-socialx.js"></script>
<script type="text/javascript" src="social-bookmarks.js"></script>
</head>
<body>
<div class="container">
<div class="row page">
<div class="twelve columns">
<div class="row"><div class="twelve columns"><div class="panel">
<h1 class="supertitle">SNBX - MKTX.JS</h1>
<h2 class="tagline">Demos</h2>
</div></div></div>
<div class="row"><div class="twelve columns">
<div class="six columns">
<div class="panel minheight" id="htmlog">
<h2>To share</h2>
<div id="fbLike"></div>
<br />
<div id="tweetButton"></div>
<br />
<div id="pinButton"></div>
<br />
<div id="tumblrButton"></div>
<br />
<div id="linkedinButton"></div>
</div>
</div>
<div class="six columns">
<div class="panel minheight" id="htmlog">
<h2>To follow</h2>
<div id="likebox"></div>
<br />
<div id="followButton"></div>
<br />
<div id="pinterestButton"></div>
<br />
<div id="followCompanyButton"></div>
<br />
</div>
</div>
</div></div>
</div>
</div>
</div>
</body>
</html>
Raw
social-bookmarks.js
window.onload = function () {
// TO SHARE
loadLikeButton("fbLike", {
"layout": "button_count",
"show-faces": "false"
});
loadTweetButton("tweetButton", {
"via": "dic7",
"lang": "en",
"related": "dic7"
});
loadPinButton("pinButton");
loadTumblrButton("tumblrButton");
loadLinkedinButton("linkedinButton");
// TO FOLLOW
loadLikeBox("likebox", {"href": "http://www.facebook.com/ivanmendoza.net"});
loadTwitterFollowButton("followButton", {"username": "dic7"});
loadPinterestButton("pinterestButton", {"username": "lectores"});
loadFollowCompanyButton("followCompanyButton", {"id": "2339324"});
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment