WordPress Sosyal Medya Paylaş Butonu

WordPress Sosyal Medya Paylaş Butonu
55

Bugün kü makalemizin konusu sosyal medya.. Günümüzde kullanımı artan bazı sosyal medya sitelerinde yazılarınızı paylaşmanız için bir içerik hazırladım ve bunu sizlerle paylaşıyorum..

[indir]Demo[/indir]

HTML yapımız aşağıda ki şekildedir..  Temanızın single.php dosyasında görünmesini istediğiniz yere eklemeniz gerekmektedir.

		<ul class="btn-share clearfix">

			<li><a href="#" class="button share entypo-share"></a></li>
			<li><a href="https://www.twitter.com/intent/tweet?url=<?php echo get_permalink(); ?>" class="button twitter entypo-twitter" target="_blank"></a></li>
			<li><a href="https://www.facebook.com/sharer/sharer.php?u=<?php echo get_permalink(); ?>" class="button facebook entypo-facebook" target="_blank"></a></li>
			<li><a href="https://plus.google.com/share?url=<?php echo get_permalink(); ?>" class="button google entypo-gplus" target="_blank"></a></li>

		</ul>

HTML yapımızın hemen altına javascript kodumuzu yazıyoruz.. script tagi içine alıp eklemeniz gerekmekte..

[js]
(function() {

$(‘.share’).on(‘click’, function(e) {

e.preventDefault();

var $this = $(this);

$this.animate({
‘width’: $this.width() == 304 ? ’64px’ : ‘304px’
}, 300, ‘swing’);

});

} () );
[/js]

HTML yapımızı hazırladık sıra geldi, stilimizi hazırlamaya.. “Temanızın style.css dosyasına eklemeniz gerekmektedir.”

/* ---------- SHARE-BUTTON ---------- */

.button {
	border-radius: 8px;
	color: #fff;
	display: block;
	font-size: 24px;
	height: 64px;
	line-height: 64px;
	text-align: center;
	-webkit-transition: -webkit-transform .2s;
	-moz-transition: -moz-transform .2s;
	-ms-transition: -ms-transform .2s;
	-o-transition: -o-transform .2s;
	transition: all .2s;
  -webkit-transform: translateZ(1);
	width: 64px;
}

.button:hover {
	-webkit-transform: scale(1.05);
	-moz-transform: scale(1.05);
	-ms-transform: scale(1.05);
	-o-transform: scale(1.05);
	transform: scale(1.05);
}

.share {
	background: #444;
	box-shadow: 0 4px 0 #2a2a2a;
	width: 304px;
}

.twitter {
	background: #00acee;
	box-shadow: 0 4px 0 #0080b1;
}

.facebook {
	background: #3B5998;
	box-shadow: 0 4px 0 #3B5998;
}

.google {
	background: #CC3732;
	box-shadow: 0 4px 0 #CC3732;
}

.btn-share {
	display: inline-block;
	position: relative;
}

.btn-share li {
	float: left;
	margin: 0 8px;
}

.btn-share li:first-child {
	margin-left: 0;
	position: absolute;
}

.btn-share li:nth-child(2) {
	margin: 0 8px 0 80px;
}

.btn-share li:last-child {
	margin: 0 0 0 8px
}
.clearfix:after { clear: both; }

HTML ve Stilimizi hazırladıktan sonra jQuery kütüphanesini çağırmamız gerekmekte.. Temanızın header.php dosyasının head tagleri arasına ekleyin..

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>

Kapanış
Siteniz artık sosyal medyada daha rahat tanıtabileceksiniz ve bu butonlarda ziyaretçileriniz için oldukça ilgi çekici bir yapıya kavuşmuş olacak.

Yorum Yap