Important: this documentation is not applicable to your currently selected format email!
amp-social-share
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>
Supported Layouts
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 |
|
E-posta | e-posta |
|
facebook |
| |
linkedin |
| |
pinterest |
| |
G+ | gplus |
|
Tumblr | tumblr |
|
twitter |
| |
whatsapp |
| |
LINE | line |
|
SMS | sms |
|
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.
Ö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.
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