AMP

amp-social-share

 
You can now use this component outside valid AMP documents using the Bento version of this component. Learn more in the Bento guide.

Description

Paylaşım izleme özelliği geliştirme aşamasındadır.

 

Required Scripts

<script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>

Bir sosyal paylaşım düğmesi görüntüler.

Zorunlu Komut Dosyası
<script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>
Desteklenen Düzenler container, fill, fixed, fixed-height, flex-item, nodisplay, responsive
Örnekler Örneklerle AMP amp-social-share örneği sayfasına bakın.

Genel Bakış

amp-social-share bileşeni, çeşitli sosyal platform sağlayıcıları için bir sosyal paylaşım düğmesi görüntüler.

Örnekler

Örnek: Temel sosyal paylaşım düğmesi

Paylaşım düğmesi, sizin adınıza önceden yapılandırılmış sağlayıcıların bazılarını içeren bazı varsayılanlar tahmin eder. Geçerli doküman standart URL'sinin paylaşmak istediğiniz URL ve sayfa başlığının, paylaşmak istediğiniz metin olduğunu varsayar.

<amp-social-share type="twitter"></amp-social-share>

Örnek: Parametreleri geçirme

Parametreleri paylaşım uç noktasına geçirmek istediğinizde, paylaşım uç noktasına eklenecek data-param-<attribute> değerini belirtebilirsiniz.

<amp-social-share type="linkedin" width="60" height="44"
    data-param-text="Hello world"
    data-param-url="https://example.com/">
</amp-social-share>

Linkedin önceden yapılandırılmış sağlayıcılardan biridir; dolayısıyla, data-share-endpoint özelliğini sağlamanız gerekmez.

Özellikler

type (gerekli) Bir sağlayıcı türü seçer. Bu, hem önceden yapılandırılmış hem de yapılandırılmamış sağlayıcılar için gereklidir.
data-target Hedefin içinde açılacağı hedefi belirtir. iOS'te e-posta/SMS dışındaki tüm durumlar için _blank varsayılan ayardır; e-posta/SMS durumunda hedef _top değerine ayarlanır. Bu geçersiz kılmayı yalnızca e-posta için kullanmanızı önerdiğimizi lütfen unutmayın.
data-share-endpoint Bu özellik, yapılandırılmamış sağlayıcılar için gereklidir.
Bazı popüler sağlayıcıların önceden yapılandırılmış paylaşım uç noktaları vardır. Ayrıntılar için Önceden Yapılandırılmış Sağlayıcılar bölümüne bakın. Yapılandırılmamış sağlayıcılar için paylaşım uç noktasını belirtmeniz gerekir.
data-param-* data-param-* önekli tüm özellikler URL parametrelerine dönüştürülür ve paylaşım uç noktasına geçirilir.

Önceden yapılandırılmış sağlayıcılar

amp-social-share bileşeni, bazı varsayılan parametrelerin yanı sıra kendi paylaşım uç noktalarını bilen bazı önceden yapılandırılmış sağlayıcılar sunar.

Sağlayıcı Tür Parametreler
Web Paylaşımı API'si (OS paylaşım iletişim kutusunu tetikler) sistem
  • data-param-text: isteğe bağlı, varsayılan değeri: "Geçerli sayfa başlığı"
  • data-mode: isteğe bağlı, replace değerine ayarlanırsa diğer tüm paylaşım seçenekleri kaldırılır.
E-posta e-posta
  • data-param-subject: isteğe bağlı, varsayılan değeri: Geçerli sayfa başlığı
  • data-param-body: isteğe bağlı, varsayılan değeri: rel=canonical URL'si
  • data-param-recipient: isteğe bağlı, varsayılan değeri: '' (boş dize)
Facebook facebook
  • data-param-app_id: gerekli , varsayılan değeri: none. Bu parametre, Facebook Paylaşımı iletişim kutusu için gerekli olan Facebook app_id bilgisidir.
  • data-param-href: isteğe bağlı, varsayılan değeri: rel=canonical URL'si
  • data-param-quote: isteğe bağlı. Bir alıntıyı veya metni paylaşmak için kullanılabilir.
LinkedIn linkedin
  • data-param-url: isteğe bağlı, varsayılan değeri: rel=canonical URL'si
Pinterest pinterest
  • data-param-media: isteğe bağlı (ancak ayarlanması önemle tavsiye edilir), varsayılan değeri: none. Pinterest'te paylaşılacak medyanın URL'si. Ayarlanmazsa son kullanıcının Pinterest aracılığıyla bir medya yüklemesi istenir.
  • data-param-url: isteğe bağlı, varsayılan değeri: rel=canonical URL'si
  • data-param-description: isteğe bağlı, varsayılan değeri: Geçerli sayfa başlığı
G+ gplus
  • data-param-url: isteğe bağlı, varsayılan değeri: rel=canonical URL'si
Tumblr tumblr
  • data-param-url: isteğe bağlı, varsayılan değeri: rel=canonical URL'si
  • data-param-text: isteğe bağlı, varsayılan değeri: Geçerli sayfa başlığı
Twitter twitter
  • data-param-url: isteğe bağlı, varsayılan değeri: rel=canonical URL'si
  • data-param-text: isteğe bağlı, varsayılan değeri: Geçerli sayfa başlığı
Whatsapp whatsapp
  • data-param-text: isteğe bağlı, varsayılan değeri: "Geçerli sayfa başlığı - geçerli sayfa URL'si"
LINE line
  • data-param-url: isteğe bağlı, varsayılan değeri: rel=canonical URL'si
  • data-param-text: isteğe bağlı, varsayılan değeri: Geçerli sayfa başlığı
SMS sms
  • data-param-body: isteğe bağlı, varsayılan değeri: rel=title - rel=canonical URL'si

Yapılandırılmamış sağlayıcılar

Önceden yapılandırılmış sağlayıcılara ek olarak, amp-social-share bileşeninde ek özellikler belirterek yapılandırılmamış sağlayıcıları da kullanabilirsiniz.

Örnek: Yapılandırılmamış bir sağlayıcı için paylaşım düğmesi oluşturma

Aşağıdaki örnekte, data-share-endpoint özelliğinin Facebook Messenger özel protokolü için doğru uç noktaya ayarlanmasıyla Facebook Messenger üzerinden bir paylaşım düğmesi oluşturulmaktadır.

<amp-social-share type="facebookmessenger"
    data-share-endpoint="fb-messenger://share"
    data-param-text="Check out this article: TITLE - CANONICAL_URL">
</amp-social-share>

Bu sağlayıcılar önceden yapılandırılmadığından, sağlayıcı için uygun düğme resmini ve stillerini oluşturmanız gerekir.

Stiller

Varsayılan Stiller

Varsayılan olarak, amp-social-share bileşeni bazı popüler önceden yapılandırılmış sağlayıcıları içerir. Bu sağlayıcıların düğmeleri, sağlayıcının resmi rengi ve logosuyla şekillendirilmiştir. Varsayılan genişlik 60 piksel ve varsayılan yükseklik 44 pikseldir.

AMP sayfalarınızda kullanabileceğiniz duyarlı, önceden şekillendirilmiş paylaşım bağlantıları için AMP Start sayfasını ziyaret edin.

Özel Stiller

Bazen kendi stilinizi sağlamak istersiniz. Bunun için sağlanan stilleri aşağıda gösterilen şekilde geçersiz kılabilirsiniz:

amp-social-share[type="twitter"] {
  background: red;
  background-image: url(datauri:svg/myownsvgicon);
}

Değişken Değişikliği

<amp-social-share> öğesinde genel AMP değişkeni değişikliklerini kullanabilirsiniz. Aşağıdaki örnekte, TITLE değişkeni, doküman başlığı ve CANONICAL_URL değişkeni, dokümanın standart URL'si ile değiştirilmiştir.

<amp-social-share type="whatsapp"
    data-param-text="Check out this article: TITLE - CANONICAL_URL">
</amp-social-share>

Doğrulama

AMP doğrulayıcı spesifikasyonundaki amp-social-share kurallarına bakın.

Daha fazla yardıma mı ihtiyacınız var?

Bu belgeyi defalarca okudunuz ama tüm sorularınıza tatmin edici bir yanıt bulamadınız mı? Belki başka kişiler de bu şekilde hissetmiştir: Stack Overflow'dan onlara ulaşın.

Stack Overflow'a git
Bir hata veya eksik bir özellik mi buldunuz?

AMP projesi, katılımınızı ve katkılarınızı güçlü bir şekilde teşvik ediyor! Açık kaynak topluluğumuzun devamlı bir katılımcısı olacağınızı umuyoruz ancak özel olarak ilgilendiğiniz konularla ilgili tek seferlik katkıları da memnuniyetle karşılıyoruz.

GitHub'a git