Sitene Sosyal Medya Hesaplarının Takip Et Butonlarını Ekle


Sosyal ağ hesaplarımızın takipçi sayıları web sitelerinin yayılımı açısından önemlidir. Web sitelerinin ziyaretçileri ile yakın bir ilişki kurabilmesi ve geri dönüşümünü sağlamak açısından sosyal ağ hesapları etkili bir yöntemdir. Hem bu sayede ziyaretçilerinizi kaçırmamış olur hem de web sitenizin tekrar ziyaret edilmesini sağlayabilirsiniz. Sosyal ağ hesaplarınızdan haberdar ederek tek bir dokunuşla sitenizi ziyaret edenlerin hesaplarınızı takip etmesini sağlayabilir ve edindiğiniz takipçilerinizi paylaşımlarınızla web sitenize tekrar çekebilirsiniz. Bunun için bu yazıda web sitelerine sık kullanılan facebook, twitter, instagram, youtube gibi meşhur sosyal ağların takip et butonlarını nereden bulabileceğimize ve nasıl yerleştirilebileceğine yer verdim. Şimdi Sırasıyla başlayalım. Kullandığım resimler küçük boyutta resimlere tıklayarak büyütebilirsiniz.

Eğer web sitenize sosyal medya sitelerinin manüel html linklerini eklemek isterseniz "Html Sosyal Medyada Paylaş Manüel Linkleri" adlı yazıyı okumanızı tavsiye ederim.

İlk adım: Blogger Html/Javascript Kodu Ekleme


Blogger Widget Ekleme Takip et butonlarını web sitemize yerleştirebilmemiz için widget denilen blogger eklentisi oluşturmalıyız. Bunun için Blogger yönetim paneliniz de:

Yerleşim > Gadget Ekle > Açılan Pencerede "Html / Javascript" tıklayın. Çıkan yeni pencereye kodumuzu yapıştırıp kaydet diyeceğiz. Şimdi sonraki adımlara geçebiliriz.

Facebook Takip Et Butonu

Facebook hesabınızda "Ayarlar" a girin.

  1. Hesap ayarlarınızda "Takipçiler" sekmesine tıklayın.
  2. "Beni Kimler Takip Edebilir" sorusunun yanında ki butonda "Arkadaşlar" yazıyor ona tıklayın ve "Herkes" olarak işaretleyin.
  3. Altta "Takip Eklentisi" adında bir kutu çıktı. Bu kutudaki kodu kopyalayın ve web sitenizde uygun bulduğunuz yere yapıştırın. 

Aşağıdaki resimler size yardımcı olacaktır.



Twitter Takip Et Butonu

<a href="https://twitter.com/twitterhesabi" class="twitter-follow-button" data-show-count="false"> Follow @twitterhesabiniz</a>

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],

p=/^http:/.test(d.location)?'http':'https';

if(!d.getElementById(id)){js=d.createElement(s);js.id=id;

js.src=p+'://platform.twitter.com/widgets.js';

fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');

</script>


Yukarıda kırmızıyla "twitterhesabınız" yazan yerleri(2 adet) kendi kullanıcı adınızla değiştirin ve yukarıdaki kodu yapıştırın. Buton boyu, takipçi sayısı gösterimi vb. ayarları yapmak için bu bağlantıya tıklayabilirsiniz. Eğer tweetlerinizi görüntüleyecek mini pencereyi sitenize eklemek istiyorsanız bu bağlantıya tıklayınız. Ayrıca twitter burada Beğeni, liste, ara, koleksiyon gibi farklı bileşenlere de yer vermiş.


Instagram Takip Et Butonu

Instagram takip et butonu yerine hesabınızın bağlantısını içeren badge adını verdiği küçük icon ile hesabınıza bağlantı sağlıyor. Siz dilerseniz bu badge' yi ekleyerek hesabınıza link olarak ekleyebilirsiniz. Ben instagram hesabınızı tek tıkla takip etmenizi sağlayacak uygulamadan bahsetmek istiyorum.

Öncelikle bu bağlantıya tıklayarak uygulamanın web sitesine erişin. Uygulamayı kullanabilmek için instagram hesabınızla burada oturum açın. Oturum açtıktan sonra html ve javascript kodları sizin için hazırlanacak. Html üstte, Javascript kodu altta olacak şekilde web sitenize uygulamayı yerleştirebilirsiniz.

instagram beni takip et butonu


Youtube Hesabınız İçin Abone Ol Butonu

Youtube takip et değilde abone ol mantığıyla çalışıyor. Başlamak için buradaki bağlantıya tıklayarak butonumuzu oluşturacağımız sayfaya gidiyoruz. Youtube hesabımızı yazarak alttaki kodu kopyalayıp kullanıyoruz. Yine aynı sayfada bir takım ayarlar da yapabiliriz.


Şuana kadar dört adet sosyal ağ sistesinden bahsettik. Bu dört sosyal site hemen hemen bir çok kişi tarafından kullanılmakta. Bu listeye eklenebileceğini düşündüğünüz sosyal ağı yorumda belirtebilirsiniz. Son olarak hepsini bir yerde topladığım bir kod paylaşıyorum. Siz ilgili yerlerde belirttiğim alanları kendi kodlarınızla değiştirerek kullanabilirsiniz.




<style>
.item { float: left; padding: 5px 0; margin-right: 12px; }
.item2 { display: block; width: 100%; padding: 5px 0; margin-bottom: 12px; }
</style>
<div class="item2">
<!-- facebook kodunuz -->
</div>
<div class="item2">
<a href="https://twitter.com/twitterhesabınız" class="twitter-follow-button" data-show-count="false"> Follow @twitterhesabınız</a>
</div>
<div class="item2">
<!-- instagram kodunuz -->
</div>
<div class="item2">
<div class="g-ytsubscribe" data-channel="youtubehesabınız" data-layout="default" data-count="default"></div>
</div>
<!-- Scriptler Sırasıyla: facebook, twitter, instagram, youtube -->
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],
p=/^http:/.test(d.location)?'http':'https';
if(!d.getElementById(id)){js=d.createElement(s);js.id=id;
js.src=p+'://platform.twitter.com/widgets.js';
fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
</script>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],
p=/^http:/.test(d.location)?'http':'https';
if(!d.getElementById(id)){js=d.createElement(s);js.id=id;
js.src=p+'://platform.twitter.com/widgets.js';
fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
</script>
<script>
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src="//x.instagramfollowbutton.com/follow.js";s.parentNode.insertBefore(g,s);}(document,"script"));
</script>
<script src="https://apis.google.com/js/platform.js"></script>

Yukarıdaki kodda butonları dikey veya yatay kullanabilirsiniz. Kodda dikey olarak örnek verildi. Siz yatay göstermek isterseniz item2 olan class değerlerini item olarak değiştirmeniz yeterlidir. Hoşçakalın.

3 yorum

Yorumda bulunarak kendin için, senden sonrakiler için ve bu blog için bir şeyler yazabilirsin. Durma sor, paylaş. Buraya bir hatıra bırak ;)

HTML: Bazı HTML etiketlerini kullanabilirsiniz.(b,a,i vb.)
UYARI: Yorumlar onaylanmadan direk yayınlanıyor. Yorumunuzun yayında kalması için etik kurallara dikkat edelim.

© Php, E-Ticaret ve Web Programlama
Blogger ozkistyle programmer theme
Released under Creative Commons 3.0 CC BY-NC 3.0