Paylaşım Düğmesi Dokümantasyonu

Genel Bakış


Bu dokümantasyon, geliştiriciler için hazırlanmış olup paylaşım düğmesi aracılığıyla oluşturulan Tumblr gönderilerinde websitesi içeriği görünümünü nasıl belirleyebileceklerini açıklamaktadır.

Sana sunduğumuz paylaşım düğmesi oluşturucuyu kullanarak siten için paylaşım düğmesi oluşturabilirsin.

Basit düğme


Paylaşım düğmesi, JavaScript'imizin (aşağıda görebilirsin) yer aldığı sayfalarda, paylaşım düğmesi tumblr-share-button: sınıfını içeren basit bir sabitleyici etiketidir

<a class="tumblr-share-button" href="https://www.tumblr.com/share"></a>
<script id="tumblr-js" async src="https://assets.tumblr.com/share-button.js"></script>

Not: Eğer sayfanda birden fazla paylaşım düğmesi yer alıyorsa, JavaScript'i sadece bir kere ve mümkünse kapanış kısmındaki </body> etiketinden hemen önce eklemen yeterli olacaktır.

Gönderi içeriğine ilişkin varsayılan değerler

Sayfanda yer alan Open Graph meta etiketlerine bağlı olarak paylaşım düğmesi Fotoğraf ya da Bağlantı Gönderisi oluşturacak şekilde ayarlanmıştır; ancak dilediğin gönderi türüne göre düzenleme yapabilirsin (talimatlar aşağıda yazıyor). Varsayılan seçenekler şu şekilde:

  • Fotoğraf Gönderisi. Sayfada og:imageetiketi bulunan en az 500 piksel genişlikte ve yine en az 3:1 en boy oranına sahip bir resim varsa, Paylaşım Düğmesi bir Fotoğraf Gönderisi oluşturacaktır. Bu durumda, gönderi resim yazısında og:description bilgisi kullanılır.
  • Bağlantı Gönderisi. Sayfada uygun bir resim bulamadığı durumda Paylaşım Düğmesi Bağlantı Gönderisi oluşturacaktır. Bu durumda başlık için og:title bilgisi, yazı için og:description bilgisi ve bağlantı gönderisi URL adresi olarak da kurallı URL kullanılır.

Gönderi içeriğinin yapılandırılması


Eğer paylaşım düğmesinin oluşturacağı gönderinin türünü sen belirlemek istersen, aşağıdaki seçenekleri kullanabilirsin. Seçenekleri düğmeye ait sabitleyici etiketinde veri öznitelikleri olarak ya da düğmenin href özniteliğinde yer alan URL'de sorgu dizesi parametreleri olarak belirleyebilirsin.

SeçenekAçıklamaVeri özniteliğiSorgu dizesi parametresi
Gönderi türüTumblr gönderisinin türü. Geçerli seçenekler: metin, fotoğraf, bağlantı, alıntı, sohbet ya da videodata-posttypeposttype
EtiketlerVirgül ile ayrılmış etiketlerin listesidata-tagstags
BaşlıkMetin, Bağlantı ve Sohbet gönderilerinde kullanılırdata-titletitle
İçerikKullandığında gönderi türüne göre ana içerik de değişecektir. Fotoğraf gönderisinde fotoğraf URL'si, Alıntı gönderisinde alıntı kullanılır.

Ayrıntılı bilgi için aşağıdan Türüne göre Gönderi İçeriğine bakabilirsin.
data-contentcontent
Gönderi yazısıFotoğraf, Bağlantı, Video ve Alıntı gönderilerinde kullanılır.data-captioncaption
Gönderen bilgisi gösterGönderi gövdesinde "aracılığıyla" sonrasına gönderen bilgisi ekleme seçeneğidata-show-viashow-via

Türüne göre gönderi içeriği


Metin
data-title: Metin gönderisinin başlığı
data-content: Metin gönderisinin gövdesi

Fotoğraf
data-content: Tek bir fotoğrafın URL'si ya da fotoğraf albümleri için URL'lerin virgül ile sıralanmış listesi.
data-caption: Fotoğraf gönderisinin yazısı.

Alıntı
data-content: Alıntının kendisi.
data-caption: Alıntı kaynağı (sahibi ve alıntı).

Bağlantı
data-title: Bağlantı gönderisinin başlığı.
data-content: Bağlantının hedef URL'si.
data-caption: Bağlantının açıklaması.

Sohbet
data-title: Sohbet gönderisinin başlığı.
data-content: Sohbet gönderisinin gövdesi (konuşanların söyledikleri).

Video
data-content: Video URL'si ya da yerleştirme kodu
data-caption: Video gönderisinin yazısı.

Düğme tarzının yapılandırılması


Düğme sabitleyici etiketinde yer alan aşağıdaki veri özniteliklerini kullanarak paylaşım düğmesinin tarzını düzenleyebilirsin:

SeçenekOlası DeğerlerVarsayılan
data-colorblue
black
white
blue
data-notestop
right
none
none

Kurallı URL


Not sayacının düzgün biçimde ilerlemesi ve gösterilmesi için sayfanın kurallı URL'sinin girilmesi gerekmektedir. Paylaşım düğmesi aşağıdaki yerlerde, bu sırayla arama yapacaktır:

ÖncelikVeri Kaynağı
1düğme sabitleyici etiketinde yer alan data-href özniteliği
2Kurallı bağlantı öğesi
3og:url meta öğesi
4Sayfanın URL'si

Eğer kendi özel düğmeni (örnek aşağıda) oluşturmak istersen, gönderi içeriğine ek olarak sorgu dizesine kurallı URL'yi eklemen gerekiyor. Örneğin:

http://tumblr.com/widgets/share/tool?canonicalUrl=http://kedim.com

Kendi düğmeni oluştur


Eğer düğmenin görünümünü websitene uyacak şekilde tamamen değiştirmek istersen, kendi düğmeni de oluşturabilirsin. Oluşturduğun özel düğmenin https://www.tumblr.com/widgets/share/tool URL'sine giden bir pencere açmasını sağla ve tüm gönderi içeriği bilgisini yukarıda açıklanan şekilde sorgu dizesi parametreleri olarak gir. Paylaşım aracı gönderi içeriğine uyacak şekilde kendini yeniden boyutlandıracak; ancak biz yine de 540x600 piksel boyutunu kullanmanı tavsiye ediyoruz.

Not sayısı

Kendi düğmene de not sayısını eklemen mümkün. Yapman gereken, sayfanın URL'sini paylaşım değerleri API uç noktasına göndermek ve not sayısını istemek. Yani şu şekilde:

http://api.tumblr.com/v2/share/stats?url=https://www.tumblr.com/buttons

Tabii ki gelen yanıtı ön belleğe almayı ve 10 dakikada bir yeniden getirecek şekilde ayarlamayı unutma. Tumblr URL paylaşımlarına ait not sayısını 10 dakika boyunca ön bellekte tutar.

Düğmenin dili


Düğme sabitleyici etiketinde yer alan data-locale özniteliğini kullanarak düğmeni yerelleştirebilirsin. Tumblr şu dilleri desteklemektedir:

DilYerel Dil Değeri
İngilizceen_US
Almancade_DE
Fransızcafr_FR
İtalyancait_IT
Japoncaja_JP
Türkçetr_TR
İspanyolcaes_ES
Rusçaru_RU
Lehçepl_PL
Portekizcept_PT
Portekizcept_BR
Felemenkçenl_NL
Koreceko_KR
Çince (Basit)zh_CN
Çince (Geleneksel)zh_TW