add share buttons
This commit is contained in:
Torsten Ruger
parent
49878de178
commit
eecba74d88
|
|
@ -20,3 +20,4 @@
|
|||
//= require bootstrap/tab
|
||||
//= require bootstrap/tooltip
|
||||
//= require web_js
|
||||
//= require share
|
||||
|
|
|
|||
|
|
@ -0,0 +1,140 @@
|
|||
/*
|
||||
jQuery Social Buttons 0.0.1 https://github.com/Belyash/jquery-social-buttons
|
||||
(c) 2015 by Vasiliy Lazarev http://belyash.github.io/
|
||||
Updated: September 6th, 2015
|
||||
Apache License: http://www.apache.org/licenses/LICENSE-2.0
|
||||
*/
|
||||
(function ($, window, undefined) {
|
||||
var Socials,
|
||||
SocialButtons;
|
||||
|
||||
Socials = {
|
||||
fb: {
|
||||
url: "https://graph.facebook.com/?id=",
|
||||
callback: function (data) {
|
||||
if (data && data.shares) {
|
||||
this.count = data.shares;
|
||||
} else {
|
||||
this.count = "";
|
||||
}
|
||||
},
|
||||
share: "http://www.facebook.com/sharer/sharer.php?u="
|
||||
},
|
||||
vk: {
|
||||
url: "https://vk.com/share.php?act=count&url=",
|
||||
callback: function () {
|
||||
// VK.com doesn't support callback parametr for JSONP
|
||||
// This callback will never be called
|
||||
},
|
||||
share: "https://vk.com/share.php?url="
|
||||
},
|
||||
tw: {
|
||||
url: "https://cdn.api.twitter.com/1/urls/count.json?url=",
|
||||
callback: function (data) {
|
||||
if (data && data.count) {
|
||||
this.count = data.count;
|
||||
} else {
|
||||
this.count = "";
|
||||
}
|
||||
},
|
||||
share: "https://twitter.com/intent/tweet?url="
|
||||
},
|
||||
ln: {
|
||||
url: "https://www.linkedin.com/countserv/count/share?format=jsonp&url=",
|
||||
callback: function (data) {
|
||||
if (data && data.count) {
|
||||
this.count = data.count;
|
||||
} else {
|
||||
this.count = "";
|
||||
}
|
||||
},
|
||||
share: "https://www.linkedin.com/cws/share?url="
|
||||
},
|
||||
pt: {
|
||||
url: "http://api.pinterest.com/v1/urls/count.json?url=",
|
||||
callback: function (data) {
|
||||
if (data && data.count) {
|
||||
this.count = data.count;
|
||||
} else {
|
||||
this.count = "";
|
||||
}
|
||||
},
|
||||
// Have some trouble with this
|
||||
share: "https://www.pinterest.com/pin/create/bookmarklet/?description=&url="
|
||||
}
|
||||
};
|
||||
|
||||
SocialButtons = {
|
||||
init: function (options, el) {
|
||||
var self = this,
|
||||
$el = $(el),
|
||||
network = $el.data("social"),
|
||||
oSocial = Socials[network];
|
||||
|
||||
|
||||
if (oSocial) {
|
||||
/**
|
||||
* VK.com doesn't support callback parameter for JSONP
|
||||
* VK.com wanna call VK.Share.count()
|
||||
*/
|
||||
if (network === "vk") {
|
||||
window.VK = window.VK || {};
|
||||
window.VK.Share = VK.Share || {};
|
||||
window.VK.Share.count = function (index, count) {
|
||||
Socials["vk"].count = count;
|
||||
}
|
||||
}
|
||||
|
||||
options = options || {};
|
||||
|
||||
if (options.url) {
|
||||
self.shareUrl = options.url;
|
||||
} else {
|
||||
self.shareUrl = window.location.href;
|
||||
}
|
||||
|
||||
if (oSocial.url) {
|
||||
$.getScript(
|
||||
oSocial.url + self.shareUrl + "&callback=jQuery.fn.socialButtons." + network + "SetCount",
|
||||
function () {
|
||||
$el.attr("data-count", oSocial.count);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
if (oSocial.share) {
|
||||
$el.on("click.socialButtons", function () {
|
||||
window.open(
|
||||
oSocial.share + self.shareUrl,
|
||||
'',
|
||||
'menubar=no,toolbar=no,resizable=yes' +
|
||||
',scrollbars=yes' +
|
||||
',height=300,width=600'
|
||||
);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
$.fn.socialButtons = function(options) {
|
||||
return this.each(function () {
|
||||
var socialButtons = Object.create(SocialButtons);
|
||||
|
||||
if (SocialButtons[options]) {
|
||||
return SocialButtons[options].apply(this, Array.prototype.slice.call(arguments, 1));
|
||||
} else if (typeof options === 'object' || typeof options === 'undefined') {
|
||||
return socialButtons.init(options, this);
|
||||
} else {
|
||||
$.error('"' + options + '" method does not exist in jQuery.switcher');
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
for (var network in Socials) {
|
||||
if (Socials.hasOwnProperty(network)) {
|
||||
$.fn.socialButtons[network + "SetCount"] = Socials[network].callback.bind(Socials[network]);
|
||||
}
|
||||
}
|
||||
|
||||
}(jQuery, window));
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css);
|
||||
|
||||
/*
|
||||
jQuery Social Buttons 0.0.1 https://github.com/Belyash/jquery-social-buttons
|
||||
(c) 2015 by Vasiliy Lazarev http://belyash.github.io/
|
||||
Updated: September 6th, 2015
|
||||
Apache License: http://www.apache.org/licenses/LICENSE-2.0
|
||||
*/
|
||||
|
||||
$colors: (
|
||||
facebook: #3b5998,
|
||||
vk: #45668e,
|
||||
twitter: #00aced,
|
||||
pinterest: #cb2027,
|
||||
linkedin: #007bb6,
|
||||
google-plus: #dd4b39
|
||||
);
|
||||
|
||||
.social {
|
||||
text-align: center;
|
||||
&__item {
|
||||
display: inline-block;
|
||||
margin: 10px;
|
||||
}
|
||||
.fa {
|
||||
background: #fff;
|
||||
border-radius: 35px;
|
||||
color: #818181;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
font-size: 30px;
|
||||
height: 70px;
|
||||
line-height: 70px;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
transition: all .2s;
|
||||
width: 70px;
|
||||
&:after {
|
||||
color: #818181;
|
||||
content: attr(data-count);
|
||||
font-family: Roboto, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
left: 0;
|
||||
line-height: 20px;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
top: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@each $key, $color in $colors {
|
||||
.fa-#{$key}:hover {
|
||||
box-shadow: 0 0 15px rgba($color, 0.5) inset;
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -30,3 +30,4 @@ $susy: (
|
|||
@import "answers";
|
||||
@import "fancy";
|
||||
@import "blog";
|
||||
@import "share";
|
||||
|
|
|
|||
|
|
@ -5,7 +5,23 @@
|
|||
%h1= @page.title
|
||||
.col-md-2
|
||||
.row
|
||||
.col-md-2
|
||||
.col-md-1
|
||||
.col-md-1
|
||||
.social
|
||||
.social__item
|
||||
%span.fa.fa-facebook{"data-count" => "", "data-social" => "fb"}
|
||||
.social__item
|
||||
%span.fa.fa-twitter{"data-count" => "", "data-social" => "tw"}
|
||||
.social__item
|
||||
%span.fa.fa-linkedin{"data-count" => "", "data-social" => "ln"}
|
||||
.social__item
|
||||
%span.fa.fa-pinterest{"data-count" => "", "data-social" => "pt"}
|
||||
.col-md-8
|
||||
= render( @page.template_name )
|
||||
.col-md-2
|
||||
:javascript
|
||||
$(function () {
|
||||
$('[data-social]').socialButtons({
|
||||
url: window.location.href
|
||||
});
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue