Skip to content

Instantly share code, notes, and snippets.

@dominicwhittle

dominicwhittle/social.jade

Created May 5, 2016 13:24
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save dominicwhittle/3c212d441b4c419e69babf881a199f0b to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save dominicwhittle/3c212d441b4c419e69babf881a199f0b to your computer and use it in GitHub Desktop.
Download ZIP
Social Sharing Javascript Popups
Raw
social.jade
mixin shareBtns()
aside.shareBtns
a.shareBtns__btn.shareBtns__btn--facebook(
data-social="facebook"
href="http://www.facebook.com/sharer.php?u={{ post.permalink|url_encode }}&t={{ (post.title)|url_encode }}"
target="_blank"
)
span.shareBtns__icon
include:svg('shareBtns__svg') /design-assets/raw-svg/facebook.svg
span.shareBtns__label Share on Facebook
a.shareBtns__btn.shareBtns__btn--twitter(
data-social="twitter"
href="https://twitter.com/intent/tweet?text={{ (post.title)|url_encode }}&url={{ post.permalink|url_encode }}&via={{ twitter_handle }}"
target="_blank"
)
span.shareBtns__icon
include:svg('shareBtns__svg') /design-assets/raw-svg/twitter.svg
span.shareBtns__label Share on Twitter
//- https://developers.pinterest.com/docs/widgets/pin-it/
a.shareBtns__btn.shareBtns__btn--pinterest(
data-social="pinterest"
href="https://pinterest.com/pin/create/button/?url={{ post.permalink|url_encode }}&media={{ post.thumbnail.src('large') }}&description={{ (post.title)|url_encode }}"
target="_blank"
)
span.shareBtns__icon
include:svg('shareBtns__svg') /design-assets/raw-svg/pinterest.svg
span.shareBtns__label Share on Pinterest
//- https://developer.linkedin.com/docs/share-on-linkedin
a.shareBtns__btn.shareBtns__btn--linkedin(
data-social="linkedin"
href="http://www.linkedin.com/shareArticle?mini=true&url={{ post.permalink|url_encode }}&title={{ (post.title)|url_encode }}&summary={{ post.get_preview(200)|url_encode }}"
target="_blank"
)
span.shareBtns__icon
include:svg('shareBtns__svg') /design-assets/raw-svg/pinterest.svg
span.shareBtns__label Share on Pinterest
Raw
social.js
module.exports.init = function() {
$(".shareBtns").find('a').click(function(e) {
e.preventDefault()
var url = $(this).attr('href')
var social_platform = $(this).data('social')
switch (social_platform) {
case 'facebook':
faceWindow(url)
break
case 'twitter':
tweetWindow(url)
break
case 'pinterest':
pinterestWindow(url)
break
case 'linkedin':
linkedInWindow(url)
break
}
})
// Facebook
function faceWindow(url) {
// var url = 'httpster.net' //location.href
// var title = document.title
// "http://www.facebook.com/sharer.php?u=" +
// encodeURIComponent(url) + "&t=" +
// encodeURIComponent(title),
window.open(
url,
"facebook",
windowFeatures(555, 588)
)
}
// Twitter
function tweetWindow(url) {
window.open(
url,
"tweet",
windowFeatures(550, 250)
)
}
// Twitter
function pinterestWindow(url) {
window.open(
url,
"pinterest",
windowFeatures(750, 520)
)
}
// LinkedIn
function linkedInWindow(url) {
window.open(
url,
"linkedin",
windowFeatures(650, 478)
)
}
function windowFeatures(w, h) {
var left_offset = (window.screen.width / 2) - ((w / 2) + 10);
var top_offset = (window.screen.height / 2) - ((h / 2) + 50);
return [
'width=' + w,
'height=' + h,
'status=no',
'resizable=1',
'left=' + left_offset,
'screenX=' + left_offset,
'top=' + top_offset,
'screenY=' + top_offset,
].join(',')
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment