.post-share {
font-size: 1.2em;
font-weight: bold;
}
.post-share-link {
display: inline-block;
width: 42px;
color: #333;
font-size: 1.3em;
line-height: 42px;
text-align: center;
transition-property: color,background,border;
transition-duration: .15s;
transition-timing-function: linear;
}
.post-share-link--twitter {
color: #55acee;
}
.post-share-link--twitter:hover {
color: #fff;
background-color: #55acee;
}
.post-share-link--facebook {
color: #3b5998;
}
.post-share-link--facebook:hover {
color: #fff;
background-color: #3b5998;
}
.post-share-link--gplus {
color: #dd4b39;
}
.post-share-link--gplus:hover {
color: #fff;
background-color: #dd4b39;
}<div class="post-share">
<?php
$url = Request::url();
$post_url = urlencode($url);
$text = 'Honda Indonesia';
// Facebook
$facebook_share_format = 'https://www.facebook.com/sharer/sharer.php?u=%s';
$facebook_share_url = sprintf($facebook_share_format, $post_url);
// Twitter
$twitter_text = urlencode($text);
$twitter_via = 'hondaisme';
$twitter_share_format = 'https://twitter.com/intent/tweet?text=%s&url=%s&via=%s';
$twitter_share_url = sprintf($twitter_share_format, $twitter_text, $post_url, $twitter_via);
// Google Plus
$gplus_share_format = 'https://plus.google.com/share?url=%s';
$gplus_share_url = sprintf($gplus_share_format, $post_url);
?>
<span class="post-share-title">SHARE:</span>
<a href="{{$facebook_share_url}}" target="_blank" class="post-share-link post-share-link--facebook js-social-share">
<i class="fa fa-facebook" aria-hidden="true"></i>
</a>
<a href="{{$twitter_share_url}}" target="_blank" class="post-share-link post-share-link--twitter js-social-share">
<i class="fa fa-twitter" aria-hidden="true"></i>
</a>
<a href="{{$gplus_share_url}}" target="_blank" class="post-share-link post-share-link--gplus js-social-share">
<i class="fa fa-google-plus" aria-hidden="true"></i>
</a>
</div>function windowPopup(url, width, height) {
// Calculate the position of the popup so
// it’s centered on the screen.
var left = (screen.width / 2) - (width / 2),
top = (screen.height / 2) - (height / 2);
window.open(
url,
"",
"menubar=no,toolbar=no,resizable=yes,scrollbars=yes,width=" + width + ",height=" + height + ",top=" + top + ",left=" + left
);
}
//jQuery
$(".js-social-share").on("click", function(e) {
e.preventDefault();
windowPopup($(this).attr("href"), 500, 300);
});
// Vanilla JavaScript
var jsSocialShares = document.querySelectorAll(".js-social-share");
if (jsSocialShares) {
[].forEach.call(jsSocialShares, function(anchor) {
anchor.addEventListener("click", function(e) {
e.preventDefault();
windowPopup(this.href, 500, 300);
});
});
}