Adım Adım Siteniz İçin Paylaş Düğmeleri Nasıl Oluşturulur

Yayınlanan: 2021-05-21

Sosyal paylaşım butonları her web sitesinin vazgeçilmez bir unsurudur. İster kişisel ister iş blogu, çevrimiçi portföy veya e-Ticaret projesi olsun, sosyal düğmeler müşterilerin içeriğinizle ilgili haberleri Facebook, Twitter, Instagram veya Pinterest'te kolayca yaymalarını sağlar. Web kaynağınıza kolay sosyal paylaşım butonlarını uygularken, erişiminizi önemli ölçüde genişletebilir ve değerli içerik veya ürünler aramak için sitenize gelecek yeni müşterileri memnuniyetle karşılayabilirsiniz. Günümüzde sosyal medya ağlarının gücü hafife alınmamalıdır. Bir işletme Facebook veya Instagram'da bulunamazsa, hedef kitlesine ulaşma ve mal ve hizmetlerini daha fazla kişiye pazarlama fırsatını kaçırır. Adından da anlaşılacağı gibi, sosyal paylaşım düğmeleri içeriğinizi web'de daha paylaşılabilir hale getirir. Modern kullanıcıların Facebook sayfalarında tercih ettikleri ürünlerin bağlantılarını paylaşmaları yaygın bir uygulamadır. Her sosyal gönderiye, müşterinizle aynı ilgi alanlarına ve tercihlere sahip takipçiler tarafından ulaşılabilir.

Ayrıca sosyal medya butonları ile içeriklerinizi sosyal medya gruplarında veya seçilen kişilere kolayca yayınlayabilirsiniz. Sosyal medya paylaşımlarının sayısı, insanların daha değerli ve ilgi çekici bulduğu içerikleri işaret ediyor. Bu yüzden birçok marka sosyal medya paylaşımlarını çoğaltmak ve marka bilinirliğini artırmak için var gücüyle çalışıyor.

Tercih edilen içerik parçalarını yaymak, sadece birkaç tıklama yaparak kolay olabilir. Sosyal düğmeler, müşterilerinizin web sitenizde kaldıkları süre boyunca bağlantılar yayınlamasına olanak tanır. Çoğu durumda, sadece paylaş düğmesine dokunup bağlantınızın görünmesini istedikleri sosyal medya platformunu seçmeyi içerir.

Adım Adım Paylaş Düğmesi Nasıl Oluşturulur

İnternet farklı paylaşım butonlarıyla dolu, asıl görev doğru olanları seçmek. Bazen kendi blogunuzda hangi sosyal düğmelere ihtiyacınız olduğunu bile anlamıyorsunuz. Bazen ihtiyacınıza uygun tasarıma sahip butonları bulamayabilirsiniz. Bazen blogunuza paylaşım butonlarını uygulamanın basit ve havalı bir yolunu bulamayabilirsiniz. Panik yapma! Bu yazıda size bazı temel ve sosyal paylaşım butonlarının nasıl oluşturulacağını göstereceğiz.

Web Tasarım Kursları

  • Evde öğrenim için çevrimiçi kodlama sınıfları
  • Photoshop Ustalık Paketini Tamamlayın

Büyük, kalabalık kod ve karmaşık detay özelleştirme ile uğraşmak istemiyorsanız, bu eğitim tam size göre. HTML'ye yeni başlayanlar bile takip etmeyi kolay bulacaktır. O halde kemerlerinizi bağlayın ve başlayalım!

Aşama 1

Yapmanız gereken ilk şey, HTML dosyanızı açıp aşağıdaki kodu yapıştırmaktır.

<a onclick="Share.facebook('URL','TITLE','IMG_PATH','DESC')"> {sharing is sexy}</a>
<a onclick="Share.twitter('URL','TITLE')"> {sharing is sexy}</a>

veya
<a href="http://www.facebook.com/sharer/sharer.php?s=100&
p%5Btitle%5D=TITLE&p%5Bsummary%5D=DESC&p%5Burl%5D=
URL&p%5Bimages%5D%5B0%5D=IMG_PATH" target="_blank" onclick="return Share.me(this);">{sharing is sexy}</a>
<a href="https://twitter.com/intent/tweet?original_referer=
http%3A%2F%2Ffiddle.jshell.net%2F_display%2F&text=TITLE&url
=URL" target="_blank" onclick="return Share.me(this)">{sharing is sexy}</a>

Adım Adım Siteniz İçin Paylaş Düğmeleri Nasıl Oluşturulur 1

Adım 2

Şimdi bu tür bilgileri içeren bir js dosyası oluşturun:

Share = {
facebook: function(purl, ptitle, pimg, text) {
url = 'http://www.facebook.com/sharer.php?s=100';
url += '&p[title]=' + encodeURIComponent(ptitle);
url += '&p[summary]=' + encodeURIComponent(text);
url += '&p[url]=' + encodeURIComponent(purl);
url += '&p[images][0]=' + encodeURIComponent(pimg);
Share.popup(url);
},
twitter: function(purl, ptitle) {
url = 'http://twitter.com/share?';
url += 'text=' + encodeURIComponent(ptitle);
url += '&url=' + encodeURIComponent(purl);
url += '&counturl=' + encodeURIComponent(purl);
Share.popup(url);
},
popup: function(url) {
window.open(url,'','toolbar=0,status=0,width=626, height=436');
}
};

İşte bu :) Doğrudan paylaşım sayfasında bulunan paylaş butonuna tıklama istatistiklerini takip etmek için çok basit bir yöntem. Bu sorun, veritabanındaki bir tablo ve basit ajax yardımı ile çözüldü:

popup: function(url,soc) {
window.open(url,'','toolbar=0,status=0,width=626, height=436');

}

Bu komut dosyası URL'den bir kimlik alır, etiketi tabloya ekler ve/veya belirli bir sosyal ağ için sayacı birer birer artırır. Paylaşım düğmeleri için basit bir çözümdür. Butonlarınızın görünümünü CSS üzerinden kolayca değiştirebilir, Photoshop'ta kendi butonlarınızı tasarlayabilir ve burada kullanabilirsiniz. Neredeyse her şeyi yapabilirsiniz!

Tabii ki, bu örnek biraz ilkel, ancak kendi havalı paylaşım düğmelerinizi oluşturmaya başlamak için harika bir nokta. Bir şans ver!

Popüler sosyal medya ağları, insanların tercih ettikleri içeriği yayınlamalarına izin vermek için gönderilere veya web sitelerinin sayfalarına yerleştirebileceğimiz özel kod parçaları oluşturmanıza olanak tanır. Facebook ve Twitter, ilgili işlevleri destekleyen en popüler sosyal ağlardan ikisidir. Bu tür sosyal düğmeleri sitenize nasıl entegre edeceğinizi görelim.

Facebook Paylaş Düğmesi Nasıl Eklenir

Facebook paylaşım düğmeleri, müşterilerinizin özel olarak yazılmış bir metin parçasıyla web sitenizdeki gönderilere veya fırsatlara yönlendiren bağlantıları paylaşmasına olanak tanır.

Bu düğmeyi web sitenize eklemek için önce bu sayfaya gitmeniz gerekir.

Şimdi kurulum sayfasındaki bazı alanların ne anlama geldiğine bakalım.

  • Beğenilecek URL - bu alan, Facebook'ta paylaşmak istediğimiz sitenin sayfasını ekler.
  • Genişlik - düğmenin genişliği burada ayarlanır.
  • Görüntülenecek fiil - burada "Beğen" veya "Tavsiye ederim" düğmesindeki metni seçebiliriz.
  • Renk Düzeni - Burada açık veya koyu alanlar için düğme tasarımını seçebilirsiniz.
  • Yazı tipi - düğme etiketleri için yazı tipini seçin.

Ayarları seçtikten sonra, "Kodu Al" düğmesini bulun ve tıklayın. Ardından, kodu içeren bir pencere görüntülenecektir, ayrıca iki aşamada eklenmesi gerekir:

Kodu < body > etiketinin hemen sonrasına ekleyin.

Düğmeyi görüntülemek için kod:

Bu kodu facebook'taki düğmenin görüntüleneceği yere yapıştırın:

Twitter Paylaş Düğmesi Nasıl Eklenir

Web sitenize Twitter paylaşım butonları eklerken, Twitter geliştiricilerinin aklınızda bulundurmanızı önerdiği birkaç şey var:

  • Bir kullanıcı kendi Twitter hesabına giriş yapmadıysa, mesajınızı tweellemek için giriş yapması istenecektir.
  • Tweet, bir kişinin ziyaret ettiği web sayfasına bağlanacaktır. Bir kullanıcı, tweet'in mesajını istediği gibi ayarlamakta özgür olabilir.
  • “Tweet”e tıkladıktan sonra açılır kutu, Twitter'daki ilgili hesapların bir listesini gösterecektir. Bir kullanıcı onları nerede takip edeceğine veya görmezden geleceğine karar verebilir.
  • Günde bir defada bir sınırlama yoktur ve aynı kullanıcı zaman çizelgesine bir şeyler tweetleyebilir.

Twitter paylaşım düğmesi eklemek için aşağıdakileri yapın:

  • Publish.twitter.com adresine gidin ve Twitter Düğmeleri'ne dokunun.
  • Sitenize eklemek istediğiniz Twitter paylaşım düğmesinin türünü seçin.
  • Hangi @account'tan bahsetmesini istediğinizi belirtirken Tweeti ve içereceği mesajı ayarlayın.
  • Bittiğinde, kodu kopyalayıp sitenize yapıştırın.

Hepsi bukadar. Bu kılavuzu faydalı bulacağınızı umuyoruz. Bununla ilgili en iyi şey, web sitenize sosyal paylaşım düğmeleri eklemek için herhangi bir derin kodlama becerisine sahip olmamanızdır. Otomatik kod oluşturucular, sezgisel olarak ayarlayabileceğiniz, kopyalayıp web sitenizin HTML'sine yapıştırabileceğiniz, kullanıma hazır çözümler sunar.