Źródła Wiedzy

Atrybuty przycisku subskrypcji

Wymagane

W tej sekcji jest pokazany sposób tworzenia tagu <div> dla przycisku subskrypcji. Na poniższej liście znajdziesz opis wymaganych i opcjonalnych atrybutów tego elementu. Za pomocą opcjonalnych atrybutów możesz decydować o układzie i motywie wizualnym przycisku i wybrać, czy ma być na nim pokazana liczba subskrybentów kanału.

  • class – ustaw wartość g-ytsubscribe. Ta klasa wskazuje, że kontenerem przycisku subskrypcji jest element <div>, i pozwala YouTube dynamicznie zmieniać rozmiar przycisku umieszczonego na stronie (objaśnienie znajduje się w następnej sekcji).

  • Musisz podać wartość jednego z tych dwóch atrybutów:

    • data-channel – nazwa kanału powiązanego z przyciskiem. Przykładowa wartość: GoogleDevelopers.
    • data-channelid – identyfikator kanału powiązanego z przyciskiem.. Przykładowa wartość: UC_x5XG1OV2P6uZZ5FSM9Ttw. Identyfikator kanału znajdziesz w ustawieniach konta YouTube, albo korzystając z funkcji APIs Explorer, która jest opisana na końcu tego dokumentu. Dowiedz się więcej o korzystaniu z identyfikatorów kanałów.

Opcjonalne

  • data-layout – format przycisku. Prawidłowe atrybuty to:

    • default – wyświetla ikonę przycisku odtwarzania ze słowem „subskrybuj” w języku, którego używa użytkownik. Język jest ustalany na podstawie ustawień językowych lub lokalizacji użytkownika.
    • full – oprócz standardowego przycisku wyświetla awatar i tytuł kanału.

  • data-theme – określa, jakiego schematu kolorów ma używać przycisk. Prawidłowe wartości to default i dark. Motyw kolorystyczny dark jest przeznaczony do aplikacji, w których przycisk jest wyświetlany na ciemniejszym tle.

  • data-count – wskazuje, czy na przycisku ma być widoczna liczba subskrybentów kanału. Domyślnie jest to włączone. Liczba subskrybentów nie jest jednak wyświetlana w przypadku płatnych kanałów. Prawidłowe wartości to default i hidden.

Dynamiczne renderowanie

Zamiast korzystać z narzędzia konfiguracji typowego kodu umieszczonego na stronie, element Subscribe Button można renderować dynamicznie. W ten sposób JavaScript API nie musi przeszukiwać całego modelu DOM w poszukiwaniu przycisku, a samo wyświetlenie przycisku może zająć mniej czasu.

Interfejs Google+ JavaScript API umożliwia obsługę przez element Subscribe Button standardowych metod go i render, co pozwala na dynamiczne renderowanie przycisków subskrypcji. Za ich pomocą można na przykład utworzyć przycisk, który nie będzie wyświetlany w razie uruchomienia zdarzenia DOM ready, jak na przykład na stronie aktualizowanej przy użyciu techniki AJAX.

Metoda Opis
gapi.ytsubscribe.go(
  opt_container
)
Renderuje wszystkie przyciski subskrypcji w podanym kontenerze. Z tej metody można skorzystać w sytuacji, gdy elementy przycisku subskrypcji, który ma być renderowany, już istnieją. Jeżeli na przykład aplikacja wysyła zapytanie AJAX, które zwraca kompletny element <div> dla elementu Subscribe Button, przycisk można renderować wywołaniem metody go().
opt_container
Element HTML zawierający przyciski subskrypcji do renderowania. Wymaga wskazania identyfikatora elementu lub samego elementu DOM. W razie pominięcia tego parametru renderowane są wszystkie przyciski subskrypcji na stronie.
gapi.ytsubscribe.render(
  container,
  parameters
)
Renderuje przycisk Subscribe Button w określonym kontenerze. Skorzystaj z tej metody, jeżeli element, który będzie zawierać przycisk Subscribe Button, nie istnieje i trzeba go dopiero skonstruować.
container
Wskazuje pusty element HTML, w którym będzie renderowany przycisk Subscribe Button. Wymaga wskazania identyfikatora elementu lub samego elementu DOM.
parameters
Obiekt zawierający atrybuty przycisku subskrypcji w postaci par key:value, na przykład {"channel": "GoogleDevelopers", "layout": "full"}.

Renderowanie przycisku przy użyciu metody gapi.ytsubscribe.go

Poniżej widać przykład kodu wywołującego metodę gapi.ytsubscribe.go, która dynamicznie renderuje przycisk po kliknięciu linka.

Uwaga: narzędzie konfiguracji, które widzisz powyżej, wykorzystuje metodę go również do wyrenderowania przycisku po zaktualizowaniu opcji lub kodu.

Renderowanie przycisku przy użyciu metody gapi.ytsubscribe.render

Przykład poniżej pokazuje sposób wywołania metody gapi.ytsubscribe.render, która dynamicznie renderuje przycisk po kliknięciu linka.