8 Sosyal Medya Entegrasyonu için AMP Bileşenleri

Google’ın mobil web standardındaki en büyük ihtilaf, Hızlandırılmış Mobil Sayfalar çözmek gerekiyor mobil siteleri daha hızlı hale getirmek, süre onları işlevsel ve zengin içerikli tutma. Bugünlerde zengin ve ilgi çekici içerik popüler sosyal medya sitelerinden - tweetler, videolar, sesler, yayınlar, fotoğraflar yerleştirilmeden pek hayal bile edilemez..

Genişletilmiş AMP Bileşenleri - diğer harika özelliklerin yanı sıra - entegrasyon için harika bir yol sağlar AMP farklı sosyal içerik türlerine sahip belgeler.

Genişletilmiş AMP Bileşenleri Nasıl Çalışır?

AMP’nin felsefesinin merkezinde Google’ın en iyi performans uygulamaları. Sayfa yükleme sürelerini iyileştirmek için, AMP standartları Ön uç teknolojilerini nasıl kullanabilirsiniz?. Örneğin, özel JavaScript’i, harici stil sayfalarını ve bu gibi harici kaynakları yükleyen herhangi bir HTML öğesini kullanamazsınız. etiket.

Karşılığında, bir demet olsun AMP Bileşenleri kullanabilirsiniz dış kaynakları göster, Sitenizdeki resimler, videolar, müzikler, reklamlar vb..

AMP Bileşenleri belirli HTML etiketleri sıradan HTML etiketlerine benzer şekilde kullanılabilir. Birkaçı yerleşik AMP çalışma zamanına uzantı olarak çalışır. AMP sayfalarında sosyal medya entegrasyonunu mümkün kılan bileşenler hepsi genişletilmiş bileşenlerdir.

Genişletilmiş AMP Bileşenleri yapmanızı gerektirir ait komut dosyasını içe aktar içinde AMP HTML belgenizin bir bölümü. AMP açık kaynaklı bir proje olduğundan, gelecekte genişletilmiş bileşenlerin sayısı artabilir.

Bu yazıda size yardımcı olabilecek bir avuç AMP Bileşeni topladık. sosyal medya entegrasyonu ile. Komut dosyalarının sürümlerini unutmayın zamanla değişebilir, bu nedenle, bunları sitenize eklemeden önce daima belgeleri kontrol edin..

1. `amper-dinle`

mümkün kılar bir Facebook yayını veya videoyu gömme bir AMP sayfasına.

Her zaman ihtiyacınız gömülü gönderinin boyutlarını belirtin, bu da bir Genişlik ve bir yükseklik tamsayı piksellerdeki değerlerle öznitelik. Facebook postasının en üstündeki "Göm" menüsünü tıklayarak uygun boyutları bulabilirsiniz..

Ayrıca gerekir verilen gönderinin URL’sini ekleyin içinde Veri href bağlıyor. URL'yi, Facebook gönderisinin zaman damgasına tıklayarak bulabilirsiniz; tarayıcı benzersiz URL’yi adres çubuğuna ekler..

Eğer istersen ait olmayan Facebook gönderisine sahip olmayan bir videoyu gömme, isteğe bağlı ekle veri gömmek-olarak = "video" nitelik

Eğer istersen embed'ini duyarlı hale getir kullan düzen özniteliği "Duyarlı" değer. Ayrıca isteğe bağlı kullanabilirsiniz düzen düzenini kontrol etmek için herhangi bir AMP bileşenindeki özellik.

Kod örneği:

Kod önizlemesi:

Dahil edilecek komut dosyası:

2. `amper-heyecan`

Yapabilirsin gömülü tweets kullanarak AMP sayfalarına bileşen.

Bunu yapmak için yapmanız gereken Tweet'in kimliğini belirtin içinde Veri tweetid bağlıyor. Tweet'in görüntülenme seçeneklerinden herhangi birini Twitter API'sini ekleyerek değiştirebilirsiniz. veri-* HTML5 özelliği.

Örneğin, aşağıdaki örnekte Twitter API'lerini kullandım. bağlantı rengi seçeneği olarak göster veri bağlantı renkli (onun veri-* biçimi), varsayılan bağlantı rengini Hongkiat.com'un Twitter hesabında kullandığı renge değiştirmek için.

Kod örneği:

Kod önizlemesi:

bileşen henüz mükemmel değil, Github docs diyor ki Twitter şu anda sabit en boy oranı veren bir API sunmuyor Tweet embed.

Bu yapmanız gereken anlamına gelir elle ayarlamak Genişlik ve yükseklik Öznitellikler, AMP çalışma zamanı bazen tweetin bir kısmını (genellikle altta) göstermediğinden.

AMP sayfasını yayınlamadan önce gömülü tweetlerinizin nasıl göründüğünü kontrol etmek her zaman iyi bir fikirdir.

Yer Tutucu Ekleme

Gerekli olmasa da, belgeler önerir yer tutucu ekleme Tweet'in bir kerede yüklenmemesi durumunda.

tutucudur öznitelik her AMP bileşeninde kullanılabilir. Yer tutucu hemen gösterildi Nihai kaynaklar mevcut değilse. AMP öğesi yüklendiğinde yer tutucusunu gizler.

Yukarıdaki örnek kodun nasıl göründüğüne bir bakın yer tutucu ile. Twitter'da, Embed Tweet düğmesine tıkladım, gömülebilir blok alıntıyı kopyaladım (sonunda komut dosyası olmadan) ve tutucudur özniteliği

etiket.

Yer tutucu ile kod örneği:
   Hızlandırılmış Mobil Sayfaları Nasıl Doğrularım?#AMP) #Google #seo https://t.co/eVOSAtr5Ax 
 - Hongkiat (@hongkiat) Tarafindan Çekilen Ilginç Fotograflari Görüntüle  15 Ağustos 2016 
  
Dahil edilecek komut dosyası:
  
3. amper-Instagram

İle , yapabilirsin Instagram fotoğraf ve videolarını gömmek AMP sayfalarınıza.

İçin gerekli boyutları belirt ile embed Genişlik ve yükseklik nitelikler ve ayrıca tanımlayıcı ekle kullanarak Instagram fotoğrafının veya videonun Veri Kısa kod nitelik.

Tanımlayıcıyı URL’nin sonunda bulabilirsiniz; örneğin, URL’nin altındaki fotoğraf için https://www.instagram.com/p/-PFt7tF8Km/, bu yüzden kullanmam gerekiyor -PFt7tF8Km değeri olarak Veri Kısa kod nitelik.

Kod örneği:
   
Kod önizlemesi:

Duyarlı düzenler için, AMP otomatik olarak gerekli alanı hesaplar. içerir “Instagram kromu” (hesap adı, tarih, beğenilerin sayısı, vb.).

Bu, herhangi bir değeri kullanabileceğiniz anlamına gelir. Genişlik ve yükseklik, e kadar iki değer eşittir (Instagram fotoğrafları genellikle karedir), çünkü AMP çalışma zamanı görüntüyü mevcut alana göre yeniden boyutlandıracaktır..

Fotoğraf bir kare olmazsa, onun gerçekliğini belirtmeniz gerekir Genişlik ve yükseklik değerler.

İçin sabit düzenler, gerek fazladan boşluk bırak (üst ve alt: +48 piksel, sol ve sağ: + 8 piksel), görüntü boyutlarını hesaplarken Instagram kromu için gerekli.

Dahil edilecek komut dosyası:
  
4. amper-pinterest

yapmanıza olanak sağlar bir Pin widget'ı veya bir Pin it düğmesi katıştırma bir AMP HTML belgesine.

Pin Parçasını Göm

Bir Pin widgetini yerleştirmek için, boyutları kullanarak PIN kodunu kullanarak belirtmeniz gerekir. veri-url özniteliği de eklemeniz gerekir. veri-do = "embedPin" nitelik.

Kod örneği (varsayılan boyut):
   
Varsayılan Pin küçük aracı oldukça küçük olduğundan, telefon rehberini kullanarak daha büyük bir sürüm seçebilirsiniz. Veri genişliği = "Orta" nitelik.

Kod örneği (orta boy):
   
Kod önizlemesi (orta boy):

Bir Pin Düğmesi Görüntüleme

Ayrıca bir Pin it düğmesi ekleyin yardımı ile AMP sayfanıza bileşen. Dışında Genişlik ve yükseklik boyutlar sen dört özellik belirtmek için gerekli Pin it düğmesini yerleştirmek için:

veri-do = "buttonPin" AMP çalışma zamanının bunun bir Pin It düğmesi olacağını bilmesini sağlamak

veri-url paylaşmak istediğiniz URL’yle

veri medya kullanıcıların sabitlemesini istediğiniz görüntünün URL’si ile

Veri tanımlaması Pin oluşturma formunda görünmesini istediğiniz açıklamayı

Var birçok farklı düğme boyutu, Aralarından seçim yapmak için mevcut tüm boyutlardaki dokümanları kontrol edin.

Kod örneği:

Bu örnekte, kullanıcıların bu eski Hongkiat.com yayınından bir görüntüyü sabitlemelerine izin verecek bir Pin It butonu oluşturdum. Küçük dikdörtgen düğme boyutunu kullandım.
      
 
Kod önizlemesi:

Resmin üstündeki Pin it düğmesini görüntülemek için ek CSS kullanmanız gerektiğini unutmayın..

Ayrıca, Kullanarak bir Pinterest Takip Et düğmesi de oluşturabilirsiniz. veri-do = "buttonFollow" özniteliği ve içinde İzlemek istediğiniz adı belirtilen veri etiketli & hesabınızdaki URL’yi Veri href nitelik.

Kod örneği (Takip düğmesi):
   
Dahil edilecek komut dosyası:
  
5. amper-soundcloud

SoundCloud, kullanıcıların müziklerini paylaşabileceği popüler bir ses dağıtım platformudur. Yardımı ile Yapabileceğiniz bileşen SoundCloud parçalarını çalmak hemen AMP HTML sayfanızdan.

Bu bileşen olabilir sadece sabit yükseklikte düzen bu, yalnızca belirtmeniz gereken anlamına gelir yükseklik, ve genişlik AMP çalışma zamanı tarafından hesaplanır. Sonuç olarak, gömülü SoundCloud müzik çalar tüm yatay alanları doldur.

bileşen görüntülenebilir Klasik veya görsel mod. Değerini seçerek iki moddan birini seçebilirsiniz. Veri-Görüntü ikisine de atfetme doğru veya yanlış (varsayılan yanlış).

Her iki modda da kullanmak zorundasınız. Veri TrackID özniteliği tanımlayıcıyı belirt ses; Ses kimliğini, SoundCloud.com'da müzik çaların altındaki Paylaş düğmesini tıklatarak ve Embed kodunun içindeki uzun form URL'sini arayarak bulabilirsiniz..

Klasik Mod

Klasik Mod solda küçük bir küçük resim ve sağda ses oynatıcı görüntüler. İçin uygun değeri alabilirsiniz yükseklik SoundCloud.com'daki Embed kodunun özniteliği.

Klasik Mod’da, kullanmak istiyorsanız, müzik çaların rengini belirleyebilirsiniz. Veri renkli öznitelik (bunu Visual Mode'da yapamazsınız).

Kod örneği (klasik mod):
   
Kod önizlemesi (klasik mod):

Görsel mod

İçinde Görsel mod, özellikli görüntü, müzik çaların arkasına yayılır. Burada uygun olanı da bulabilirsiniz. yükseklik SoundCloud.com üzerindeki Embed kodundaki Visual Mode'a ait.

Kod örneği (görsel mod):
   
Kod örneği (görsel mod):

Eğer istersen özel bir ses göm, isteğe bağlı kullanın Veri gizli belirteci nitelik.

Dahil edilecek komut dosyası:
  
6. amper-asma

Vine, 6 saniyelik uzun videoları arkadaşlarınızla paylaşabileceğiniz kısa formlu bir video paylaşım sitesidir. bileşen kolayca mümkün kılar Vine videoları gömmek AMP HTML sayfalarınıza.

Bu AMP bileşeni oldukça basittir, sadece boyutları ve Vine videonun kimliğini eklemek zorundasınız. Veri vineid bağlıyor. Kimliği her Vine’un URL’sinden alabilirsiniz..

Vines kareler olduğu için, duyarlı düzeni kullanırsanız, aynı kural Instagram embedleri için de geçerlidir; herhangi bir değer ekleyebilirsiniz Genişlik ve yükseklik Öznitellikler, eşit olana kadar düzgün çalışacaklar.

Kod örneği:
   
Kod önizlemesi:

Dahil edilecek komut dosyası:
  
7. amper-youtube

Yapabilirsin YouTube videolarını göm AMP sayfalarında yardımı ile bileşen.

Bunu yapmak için, boyutları eklemeyi, videodaki videonun kimliğini eklemeniz gerekir. Veri VideoId bağlıyor. Belirlerken Genişlik ve yükseklik, Önemlidir görünüş oranına dikkat et.

Ayrıca YouTube embed parametrelerini kullanın AMP belgelerinde, sadece parametrenin adını girin sonra Veri-param- önek.

Kod örneği:

Bu örnekte, başla İçindeki YouTube parametresi Veri-param başlatma videonun 43'lerde başlaması için özellik.
   
Kod önizlemesi:

Dahil edilecek komut dosyası:
  
Diğer Video Paylaşım Hizmetleri

AMP’nin diğer video paylaşım servisleriyle ilgili bileşenleri de vardır; benzer şekilde çalışmak . YouTube dışındaki sağlayıcılardan gelen video embedleri için aşağıdaki genişletilmiş AMP bileşenlerini kullanabilirsiniz:

Vimeo embedleri için

Dailymotion embedleri için

Brightcove embedleri için

8. amp-sosyal-paylaşım

Sosyal medya yerleşimlerinin yanı sıra, sosyal paylaşım düğmelerini göster AMP sayfalarınızda bileşen.

Sosyal paylaşım özelliği Bazı sağlayıcılar için önceden yapılandırılmış, ancak doğru ayarlarla diğer sosyal paylaşım düğmelerinin bileşeni.

Önceden Yapılandırılmış Paylaşım Düğmeleri

Önceden yapılandırılmış paylaşım düğmeleri çok fazla ayar gerektirmez; tanımlamanız gerekir Genişlik (varsayılan 60 piksel) ve yükseklik (varsayılan 44px'dir) özellikleri ve sosyal medya sağlayıcısının ismi tip nitelik.

Facebook ile, Facebook uygulaması kimliğini de belirtmeniz gerekir. Veri-param-APP_ID nitelik.

Kod örneği:
                    
 
Kod önizlemesi:

Ön yapılandırma varsayımlarda bulunur paylaşmak istediğiniz URL’nin geçerli sayfanın kurallı URL’si olması ve paylaşımınıza eklemek istediğiniz metnin sayfa başlığı olması.

Başka bir yapılandırma kullanmak istiyorsanız, bunu aşağıdakilerle yapabilirsiniz. üç isteğe bağlı özellik:

veri metin Paylaşıma eklemek istediğiniz metin için

veri-url paylaşmak istediğiniz URL için

veri ilişkilendirme paylaşımınızın atfedilmesini istediğiniz kişi veya sağlayıcı için

Yapılandırılmamış Hisse Düğmeleri

Sosyal paylaşım düğmelerini görüntülemek için yapılandırılmamış sağlayıcılar, WhatsApp gibi, yapmanız gereken sağlayıcının özel protokolünü belirtin içinde veri paylaşım uç nokta bağlıyor. Bunu nasıl yapabildiğinizi belgelerde inceleyin.

Dahil edilecek komut dosyası:
  