Skip to content

Instantly share code, notes, and snippets.

@panzi
Last active June 18, 2017 12:31
Show Gist options
  • Save panzi/9978447 to your computer and use it in GitHub Desktop.
Save panzi/9978447 to your computer and use it in GitHub Desktop.
Static share links template.
// expand {{PATTERNS}}
// You can do this serverside. I just did it this way for demonstration purposes.
(function () {
"use strict";
var shares = document.querySelectorAll("ul.share > li > a");
var keywords = document.querySelector('meta[name=keywords]').getAttribute("content");
var description = document.querySelector('meta[name=description]').getAttribute("content");
var params = {
URL: encodeURIComponent(document.querySelector('link[rel=canonical]').getAttribute("href")),
TITLE: encodeURIComponent(document.title),
HASHTAG: encodeURIComponent(keywords.split(",")[0]),
TAGS: encodeURIComponent(keywords),
SUMMARY: encodeURIComponent(description)
};
for (var i = 0; i < shares.length; ++ i) {
var share = shares[i];
var url = share.getAttribute("data-popup-url");
share.setAttribute("href",expand(share.getAttribute("href"),params));
if (url) {
share.setAttribute("data-popup-url",expand(url,params));
}
}
function expand (href,params) {
return href.replace(/{{([^{}]+)}}/g, function (match, key) {
return params.hasOwnProperty(key) ? params[key] : match;
});
}
})();
<a href="javascript:void((function(d){var e=d.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','//assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);d.body.appendChild(e)})(document));">Pinterest</a>
// Some services provide a share form that can conveniently be displayed in a popup.
// This event handler opens such a popup when attached to the click event of a share link:
function sharePopup (event) {
"use strict";
// only open popup when clicked with left mouse button
// (middle click should still open the link in a new tab and
// right click should still open the context menu)
if ('buttons' in event) {
if (!(event.buttons & 1)) {
return true;
}
}
else if (event.button !== 0) {
return true;
}
// gather popup parameters
var href = this.getAttribute("data-popup-url") || this.href;
var params = {
menubar: "no",
location: "no",
toolbar: "no",
status: "no",
resizable: "yes",
width: "640",
height: "480"
};
for (var name in params) {
var value = this.getAttribute("data-popup-"+name);
if (value) {
params[name] = value;
}
}
// center popup window
var width = parseInt(params.width,10);
var height = parseInt(params.height,10);
params.top = Math.max(0, Math.round((screen.height - height) * 0.5));
params.left = Math.max(0, Math.round((screen.width - width) * 0.5));
var spec = [];
for (var name in params) {
spec.push(name+"="+params[name]);
}
// open window
window.open(href,'_blank',spec.join(","));
// prevent navigation to the share form
if ('preventDefault' in event) {
event.preventDefault();
}
else {
event.returnValue = false;
}
return false;
}
<p>Share on:</p>
<ul class="share">
<li><a target="_blank"
href="https://alpha.app.net/intent/post/?url={{URL}}&amp;text={{TITLE}}"
data-popup-width="640" data-popup-height="400"
onclick="return sharePopup.call(this,event);">App.net</a></li>
<li><a target="_blank"
href="https://www.blogger.com/blog_this.pyra?u={{URL}}&amp;n={{TITLE}}">Blogger</a></li>
<li><a target="_blank"
href="http://delicious.com/save?v=5&amp;url={{URL}}&amp;title={{TITLE}}"
data-popup-url="http://delicious.com/save?v=5&amp;url={{URL}}&amp;title={{TITLE}}&amp;noui&amp;jump=close"
data-popup-width="555" data-popup-height="555"
onclick="return sharePopup.call(this,event);">Delicious</a></li>
<li><a target="_blank"
href="http://digg.com/submit?url={{URL}}&amp;title={{TITLE}}&amp;bodytext={{SUMMARY}}">Digg</a></li>
<li><a target="_blank"
href="https://www.facebook.com/sharer.php?u={{URL}}&amp;t={{TITLE}}"
data-popup-width="626" data-popup-height="436"
onclick="return sharePopup.call(this,event);">Facebook</a></li>
<li><a target="_blank"
href="https://plus.google.com/share?url={{URL}}"
data-popup-width="600" data-popup-height="460"
onclick="return sharePopup.call(this,event);">Goolge+</a></li>
<li><a target="_blank"
href="http://www.linkedin.com/shareArticle?mini=true&amp;url={{URL}}&amp;title={{TITLE}}&amp;summary={{SUMMARY}}"
data-popup-width="520" data-popup-height="570"
onclick="return sharePopup.call(this,event);">LinkedIn</a></li>
<li><a target="_blank"
href="https://myspace.com/post?u={{URL}}&amp;t={{TITLE}}"
data-popup-width="880" data-popup-height="500"
onclick="return sharePopup.call(this,event);">MySpace</a></li>
<li><a target="_blank"
href="http://www.reddit.com/submit?url={{URL}}&amp;title={{TITLE}}">reddit</a></li>
<li><a target="_blank"
href="https://www.stumbleupon.com/submit?url={{URL}}&amp;title={{TITLE}}">StumbleUpon</a></li>
<li><a target="_blank"
href="https://www.tumblr.com/share/link?url={{URL}}&amp;name={{TITLE}}&amp;description={{SUMMARY}}"
data-popup-width="446" data-popup-height="430"
onclick="return sharePopup.call(this,event);">Tumblr</a></li>
<li><a target="_blank"
href="https://twitter.com/share?url={{URL}}&amp;text={{TITLE}}&amp;hashtags={{HASHTAG}}"
data-popup-width="640" data-popup-height="400"
onclick="return sharePopup.call(this,event);">Twitter</a></li>
</ul>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment