fazlurr
10/15/2017 - 12:18 PM

URL Sharer

.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);
    });
  });
}