Eklentisiz Sosyal Medya Paylaş Butonları Yapımı

Meka
Kas 22,2019 Genel

Eklentisiz Sosyal Medya Paylaş Butonları Yapımı

Site içerisinde bulunan sosyal medya paylaş butonları ile sosyal medya paylaşım eklentisi kullanmadan sayfalarımızı paylaşma işleminin nasıl basit bir şekilde yapılabileceğini göreceğiz.

Amacımız sadece sayfaları ve içerikleri paylaşmak ise eklentiler kullanıp sitemizi fazladan kodlamalar ve işlemler ile yormak mantıksız. Sayfalarımızı sosyal medya sitelerinde paylaşmamızı sağlayan html linkleri bulunmakta. Bu linkleri kullanarak paylaşım penceresini açacağız ve istenilen sayfayı facebook, twitter gibi sosyal medya sitelerinde paylaşabileceğiz.

Bu linkleri istersek etiketi içerisinde kullanabiliriz, istersek sayfa yenileme ve yönlendirme yapmadan javascript açılır pencere içerisinde kullanabiliriz. Bu içerikte iki yöntemi de göreceksiniz. Ayrıca facebook ve twitter da yapılan paylaşımlarda sayfada istenilen resmin gözükmemesi, rastgele sayfadan bir resmin seçilmesi sorununu da gidereceğiz.

Aşağıda kullanılabilen sosyal medya paylaş butonları yapımı için kullanılan paylaşım linkleri listelenmiştir.

Sosyal Medya Paylaşım Html Linkleri

Aşağıdaki en sık kullanılan sosyal medya paylaşım linkleri ile sosyal medya sitelerinde sayfalarımızı paylaşacağımız pencereleri açmış olacağız. Değiştirilmesi gereken yerleri büyük harflerle belirttim. Sosyal medya paylaşım butonları kodu ve çalışır halini SosyalMedyaPaylasimButonlariOrnek.rar adlı dosyayı indirerek edinebilirsiniz.

Facebook Paylaşım Linki

https://www.facebook.com/sharer/sharer.php?u=SAYFA_URL_ADRESI

Twitter Paylaşım Linki

https://twitter.com/share?url=SAYFA_URL_ADRESI&text=ICERIK

Pinterest Paylaşım Linki

http://pinterest.com/pin/create/button/?url=SAYFA_URL_ADRESI&media=YAYINLANACAK_RESIM_URL&description=ACIKLAMAMA

Linkedin Paylaşım Linki

http://www.linkedin.com/shareArticle?url=SAYFA_URL_ADRESI

Reddit Paylaşım Linki

http://reddit.com/submit?url=SAYFA_URL_ADRESI&title=BASLIK

Tumblr Paylaşım Linki

http://www.tumblr.com/share/link?url=SAYFA_URL_ADRESI&description=ACIKLAMA

Whatsapp Paylaşım Linki

Aşağıdaki örnekte olduğu gibi bağlantılar ekleyerek sitenizden insanları whatsapp’a daha kolay bir şekilde yönlendirebilirsiniz.

https://wa.me/telefon_numarasi
https://wa.me/05556677888
https://wa.me/905556677888
https://wa.me/905556677888?text=ACIKLAMA

Bağlantılarda ‘ACIKLAMA’ olarak belirttiğim yere paylaşım esnasında yazılacak varsayılan mesajı ekleyebilirsiniz. Ekleyeceğiniz mesaj metninin özel ve türkçe karakter bulundurmadan URL formatında olmasına dikkat edin. Türkçe karakterlerin bulunmasını istiyorsanız türkçe metninin URL formatına uygun olacak şekilde yazıldığından emin olun. Örnek: ‘mesajınız’ > ‘mesaj%C4%B1n%C4%B1z’

Mesajınızı URL destekli hale getirmek için buradaki siteyi kullanabilirsiniz. Veya PHP kullanıyorsanız urlencode() fonksiyonunu kullanabilirsiniz.

Siteye Sosyal Medya Butonu Ekleme

Sosyal medya paylaşım linkleri en basit haliyle etiketinin “href” özelliğine yazılarak kullanılabilir. Bazı hosting ve sunucularda etiketine sosyal paylaşım linki yazılır ise görünmez hale gelebilir. Bu yüzden display:block !important diyerek görünür halde tutuyoruz.

Facebook paylas

Diğer yandan, javascript window.open kullanımı ile birlikte sosyal medya paylaş butonu üzerine tıklanılarak sayfa yenilenmeden javascript popup pencere açmak ve açılan sayfadan sosyal medyada paylaşım yapabiliriz.

window.open('https://www.facebook.com/sharer/sharer.php?u=https://muhammedyaman.com', 'share-dialog', 'width=560,height=436');

Aşağıdaki span etiketine tıklandığında genişliği 560px, yüksekliği 436 piksel olan sayfa içerisinde bir pencere açmış oluyoruz.

Facebook Paylas

Her bir buton için etiket içerisine “onclick” özelliği eklemek istemeyebiliriz. Aşağıdaki örnekte görüldüğü gibi butonlara “socialShare” isimli bir sınıf atarız ve “data-url” değerlerine sosyal medya paylaşım linkleri yerleştiririz. Sınıfı “socialShare” olan butonlara tıklanıldığında javascript ile “data-url” değerleri okunur ve bu değer doğrultusunda paylaşım penceresi açılır.

Pencere ile Facebook Paylas 2

Facebook Paylaşım Resim Sorunu ve Çözümü

Sitemizi, makalemizi facebook’ta paylaşmak istediğimizde resim gözükmeyebilir veya istenilen resim olmayıp, paylaşımlarda görselin yanlış görünmesi ve sayfa içerisinde rastgele bir resmi gösterebilir. İstediğimiz resmi aşağıdaki facebook og (Open Graph) meta etiketleri kullanarak gösterebiliriz.

Bu etiketler içerisinde facebookta paylaştığımız sayfada gösterilmesi gereken resmi og:image meta etiketinin content özelliğine yazmamız gerekiyor. Sitemizin html içeriğinde etiketleri arasına bu kodları eklemeliyiz. Burada önemli olan “og:image” meta etiketi.

NOT: Bu ayarlamalar yapıldığı halde değişen olmayabilir. Bu sorun paylaşım sırasında facebook’un eski bilgileri tanpona atması, cache işlemi yapmasından kaynaklanıyor. Bunun için facebook sharing debugger sayfasına giriş yapıp, paylaşmak istenilen sayfanın url adresini yazıyoruz ve ‘Debug’ butonuna tıklıyoruz. Paylaşılacak sayfa ile ilgili paylaşım önizleme bilgisi ve diğer bilgiler gelecek. ‘Scrape Again’ butonuna tıklayarak tekrar taratıyoruz. Bu işlemden sonra sayfamızı yeniden paylaşıyoruz.

Twitter Meta Etiketleri

Aynı şekilde sayfayı twitter’da site paylaşma işlemi için kullanılan twitter meta etiketleri mevcut. Bu kodları da sitemizde etiketleri arasına yerleştirmemiz gerekiyor.

dasasd

0 Yorum yapan