8 komponentów AMP do integracji mediów społecznościowych
Największy konflikt ze standardem Google dla telefonów komórkowych, Przyspieszone strony mobilne musi rozwiązać szybsze tworzenie witryn mobilnych, podczas utrzymywanie ich funkcjonalności i bogactwa treści. W dzisiejszych czasach nie można sobie wyobrazić bogatych i wciągających treści bez osadzania ich w popularnych serwisach społecznościowych - tweety, filmy, audio, posty, zdjęcia.
Rozszerzone komponenty AMP - wśród innych wspaniałych funkcji - stanowią świetny sposób na integrację AMP dokumenty z różnymi typami treści społecznych.
Jak działają rozszerzone komponenty AMP
Podstawą filozofii AMP są Google najlepsze praktyki wydajnościowe. Aby poprawić czas ładowania strony, standardy AMP ograniczają jak korzystać z technologii frontonu. Na przykład nie można używać niestandardowego kodu JavaScript, zewnętrznych arkuszy stylów ani żadnego elementu HTML, który ładuje zasoby zewnętrzne, takie jak
W zamian dostajesz kilka Komponenty AMP możesz użyć do wyświetl zasoby zewnętrzne, takie jak obrazy, filmy, pliki audio, reklamy itp. na swojej stronie.
Komponenty AMP są konkretne znaczniki HTML które mogą być używane podobnie do zwykłych tagów HTML. Kilka z nich wbudowany do środowiska wykonawczego AMP, podczas gdy większość działa jako rozszerzenia. Komponenty umożliwiające integrację mediów społecznościowych na stronach AMP wszystkie są rozszerzonymi komponentami.
Rozszerzone komponenty AMP wymagają zaimportuj przynależny skrypt w część twojego dokumentu HTML AMP. Ponieważ AMP jest projektem open-source, liczba rozszerzonych komponentów może rosnąć w przyszłości.
W tym poście zebraliśmy garść komponentów AMP, które mogą ci pomóc z integracją mediów społecznościowych. Pamiętaj, że wersje skryptów może się zmieniać z czasem, więc zawsze sprawdź dokumentację, zanim umieścisz je w swojej witrynie.
1. amp-facebook
Zawsze musisz określ wymiary osadzonego posta, co oznacza, że musisz dodać szerokość i a wysokość atrybut z wartościami w liczbach całkowitych. Właściwe wymiary można znaleźć, klikając menu „Osadź” u góry posta na Facebooku.
Musisz także dodaj adres URL danego posta w dane-href atrybut. Adres URL można znaleźć, klikając znacznik czasu wpisu na Facebooku, a przeglądarka wstawi unikalny adres URL do paska adresu.
Jeśli chcesz osadzić wideo bez przynależnego postu na Facebooku, dodaj opcjonalny data-embed-as = "wideo" atrybut
Jeśli chcesz spraw, aby Twój osadzony był responsywny Użyj układ atrybut za pomocą "czuły" wartość. Możesz także skorzystać z opcjonalnego układ atrybut na każdym innym komponencie AMP, aby kontrolować jego układ.
Przykład kodu:
Podgląd kodu:
Skrypt zawierający:
2. amp-twitter
Możesz umieść tweety na strony AMP za pomocą
Aby to zrobić, musisz podaj identyfikator tweeta w tweetid danych atrybut. Możesz zmienić sposób wyświetlania tweeta, dodając dowolną z opcji wyświetlania Twittera APi jako dane-* Atrybut HTML5.
Na przykład w poniższym przykładzie użyłem API Twittera linkColor opcja wyświetlania jako kolor łącza danych (jego dane-* format), aby zmienić domyślny kolor linku na kolor używany przez Hongkiat.com na koncie Twitter.
Przykład kodu:
Podgląd kodu:
The Twitter nie oferuje obecnie interfejsu API, który zapewnia stały współczynnik proporcji Tweet
.
Oznacza to, że musisz ręcznie ustaw szerokość i wysokość atrybuty, ponieważ środowisko wykonawcze AMP czasami nie wyświetla części (zazwyczaj dolnej) tweeta.
Zawsze dobrze jest sprawdzić, jak wyglądają osadzone tweety przed opublikowaniem strony AMP.
Dodaj symbol zastępczy
Chociaż nie jest to wymagane, dokumentacja zaleca dodając symbol zastępczy w przypadku, gdy tweet nie ładuje się od razu.
The symbol zastępczy atrybut może być użyty na każdym komponencie AMP. Symbol zastępczy to pokazane natychmiast jeśli ostateczne zasoby nie są dostępne. Kiedy ładuje się element AMP, to ukrywa swój symbol zastępczy.
Zobacz, jak wygląda powyższy przykładowy kod z symbolem zastępczym. Na Twitterze po prostu kliknąłem przycisk Umieść tweet, skopiowałem wklejony blokowy cytat (bez skryptu na końcu) i dodałem symbol zastępczy przypisać do etykietka.
Przykład kodu z symbolem zastępczym:
Jak zweryfikować przyspieszone strony mobilne (#AMP) #Google #seo https://t.co/eVOSAtr5Ax
- Hongkiat (@hongkiat) 15 sierpnia 2016 r
Skrypt zawierający:
3. amp-instagram
Z
Jesteś zobowiązany określ wymiary osadzenia za pomocą szerokość i wysokość atrybuty, a ty także musisz dodaj identyfikator zdjęcia lub wideo z Instagrama za pomocą kod danych atrybut.
Możesz znaleźć identyfikator na końcu adresu URL, na przykład zdjęcie poniżej adresu URL https://www.instagram.com/p/-PFt7tF8Km/, więc muszę użyć -PFt7tF8Km jako wartość dla kod danych atrybut.
Przykład kodu:
Podgląd kodu:
Dla responsywnych układów, AMP automatycznie oblicza wymaganą przestrzeń, która również obejmuje “Chrome na Instagramie” (nazwa konta, data, liczba polubień itp.).
Oznacza to, że możesz użyć dowolnej wartości szerokość i wysokość, dopóki dwie wartości są równe (Zdjęcia na Instagramie są zwykle kwadratowe), ponieważ środowisko wykonawcze AMP zmieni rozmiar obrazu zgodnie z dostępnym miejscem.
Jeśli zdjęcie nie jest kwadratem, musisz określić jego rzeczywistą wartość szerokość i wysokość wartości.
Dla stałe układy, musisz uwzględnij dodatkową przestrzeń (góra i dół: +48 px, lewa i prawa: + 8px) potrzebne do chromowania na Instagramie podczas obliczania wymiarów obrazu.
Skrypt zawierający:
4. amp-pinterest
Osadź widżet szpilki
Aby osadzić widżet Pin, musisz określić wymiary, adres URL szpilki za pomocą data-url atrybut, a także musisz dodać data-do = "embedPin" atrybut.
Przykład kodu (domyślny rozmiar):
Ponieważ domyślny widget Pin jest dość mały, możesz również wybrać większą wersję, używając data-width = „medium” atrybut.
Przykład kodu (średni rozmiar):
Podgląd kodu (średni rozmiar):
Wyświetl pin it button
Możesz również dodaj przycisk Pin It na stronę AMP za pomocą szerokość i wysokość wymiary, jesteś wymagane do określenia czterech atrybutów w celu osadzenia przycisku Pin It:
data-do = "buttonPin"aby środowisko wykonawcze AMP wiedziało, że będzie to przycisk Pin Itdata-urlz adresem URL, który chcesz udostępnićnośniki danychz absolutnym adresem URL obrazu, który użytkownicy mają przypinaćopis danychz opisem, który chcesz wyświetlić w formularzu tworzenia pinów
Tam są wiele różnych rozmiarów przycisków, do wyboru, sprawdź dokumenty dla wszystkich dostępnych rozmiarów.
Przykład kodu:
W tym przykładzie utworzyłem przycisk Pin It, który pozwoli użytkownikom przypiąć obraz z tego byłego postu Hongkiat.com. Użyłem małego prostokątnego rozmiaru przycisku.
Podgląd kodu:
Zauważ, że musisz użyć dodatkowego CSS, aby wyświetlić przycisk Pin It na górze obrazu.
Możesz także utworzyć przycisk Pinterest Śledź, używając data-do = "buttonFollow" atrybutu i określając nazwę, którą chcesz wyświetlić wewnątrz przycisku Śledź w etykieta danych & URL twojego konta w dane-href atrybut.
Przykład kodu (przycisk Follow):
Skrypt zawierający:
5. amp-soundcloud
SoundCloud to popularna platforma dystrybucji dźwięku, na której użytkownicy mogą udostępniać swoją muzykę. Z pomocą
Ten komponent może używać tylko z stała wysokość układ co oznacza, że musisz tylko podać wysokość, a szerokość zostanie obliczona przez środowisko wykonawcze AMP. W rezultacie wbudowany odtwarzacz dźwięku SoundCloud będzie wypełnić całą dostępną przestrzeń poziomą.
The dane wizualne przypisać do obu prawdziwe lub fałszywy (domyślnie jest fałszywy).
W obu trybach musisz użyć dane-trackid przypisują określ identyfikator audio; możesz znaleźć identyfikator audio, klikając przycisk Udostępnij pod odtwarzaczem audio w SoundCloud.com i sprawdzając długodystansowy adres URL w kodzie Embed.
Tryb klasyczny
The Tryb klasyczny wyświetla małą miniaturkę po lewej stronie, a odtwarzacz audio po prawej. Możesz uzyskać odpowiednią wartość dla wysokość atrybut z kodu Osadź na SoundCloud.com.
W trybie klasycznym możesz określić kolor odtwarzacza audio, jeśli chcesz użyć kolor danych atrybut (nie można tego zrobić w trybie wizualnym).
Przykład kodu (tryb klasyczny):
Podgląd kodu (tryb klasyczny):
Tryb wizualny
W Tryb wizualny, wyróżniony obraz obejmuje odtwarzacz audio. Tutaj możesz również znaleźć właściwy wysokość należący do Visual Mode w Embed code na SoundCloud.com.
Przykład kodu (tryb wizualny):
Przykład kodu (tryb wizualny):
Jeśli chcesz osadzić prywatny dźwięk, użyj opcjonalnego token danych atrybut.
Skrypt zawierający:
6. amp-vine
Vine to skrócona strona do udostępniania wideo, na której możesz udostępniać 6-sekundowe filmy wideo znajomym. The
Ten komponent AMP jest dość prosty, wystarczy dodać wymiary i wideo identyfikatora Vine w pliku data-vineid atrybut. Możesz uzyskać identyfikator z adresu URL każdego Vine.
Ponieważ Vines to kwadraty, jeśli użyjesz responsywnego układu, ta sama zasada ma zastosowanie, jak w przypadku Instagramu; możesz dodać dowolną wartość do szerokość i wysokość atrybuty, dopóki nie będą równi będą działać poprawnie.
Przykład kodu:
Podgląd kodu:
Skrypt zawierający:
7. amp-youtube
Możesz osadzaj filmy z YouTube na stronach AMP za pomocą
Aby to zrobić, musisz dodać wymiary oraz identyfikator wideo w polu video-videoid atrybut. Podczas określania szerokość i wysokość, to ważne aby Zwróć uwagę na proporcje.
Możesz również użyj parametrów umieszczonych w YouTube w dokumentach AMP, po prostu wstaw nazwę parametru po parametr danych- prefiks.
Przykład kodu:
W tym przykładzie skorzystałem z początek Parametr YouTube w start danych atrybut, aby wideo zaczęło się od 43s.
Podgląd kodu:
Skrypt zawierający:
Inne usługi udostępniania wideo
AMP ma także komponenty związane z innymi usługami udostępniania wideo działa podobnie
8. amp-social-share
Oprócz osadzania mediów społecznościowych możesz również wyświetlać przyciski udostępniania społecznego na stronach AMP za pomocą
Funkcja udostępniania społecznościowego to wstępnie skonfigurowany dla niektórych dostawców, ale z odpowiednimi ustawieniami możesz użyć
Wstępnie skonfigurowane przyciski udostępniania
Wstępnie skonfigurowane przyciski udostępniania nie wymaga zbyt wielu ustawień; musisz zdefiniować szerokość (domyślnie jest to 60px) i wysokość (domyślnie jest to 44px) atrybuty i nazwa dostawcy mediów społecznościowych w rodzaj atrybut.
Z Facebookiem musisz także podać identyfikator aplikacji Facebook w data-param-app_id atrybut.
Przykład kodu:
Podgląd kodu:
Konfiguracja wstępna dokonuje założeń że adres URL, który chcesz udostępnić, to kanoniczny adres URL bieżącej strony, a tekst, który chcesz uwzględnić w swoim udziale, to tytuł strony.
Jeśli chcesz użyć innej konfiguracji, możesz to zrobić za pomocą poniższych trzy opcjonalne atrybuty:
tekst danychdla tekstu, który chcesz dołączyć do udziałudata-urldla adresu URL, który chcesz udostępnićprzypisanie danychimię i nazwisko osoby lub dostawcy, któremu chcesz przypisać udział
Nieskonfigurowane przyciski akcji
Aby wyświetlić przyciski udostępniania społecznościowego nieskonfigurowani dostawcy, takich jak WhatsApp, musisz określ niestandardowy protokół dostawcy w punkt końcowy udostępniania danych atrybut. Sprawdź w dokumentach, jak możesz to zrobić.
Skrypt zawierający:
