Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Dowiedz się więcej OK, rozumiem
WebHelp.pl Warsztat Artykuły Twitter Cards - integracja własnej strony WWW z Twitterem

Warsztat / Artykuły i tutoriale

Twitter Cards - integracja własnej strony WWW z Twitterem

Bartosz Romanowski 19 września 2012 komentarze ()

Integracja serwisu z Twitterem nie musi kończyć się na wstawieniu jednego z gotowych przycisków czy widżetu z ostatnimi tweetami. Dzięki Twitter Cards możemy dołączać dodatkowe informacje do tweetów zawierających link do naszego serwisu.

Twitter Cards to specjalne sekcje (karty) pod tweetami. Występują one w trzech różniących się zawartością typach. Karta typu summary zawiera tytuł linkowanego tekstu, jego zajawkę (maksymalnie 200 znaków) oraz zdjęcie. Karta typu photo zawiera samo zdjęcie, a karta typu video odtwarzacz wideo. Karta jest generowana dla każdego tweeta, który zawiera link do strony posiadającej znaczniki Twitter Cards, niezależnie od tego kto jest autorem tweeta.

Jeśli dany tweet posiada Twitter Card, pod jego treścią znajduje się link "Zobacz podsumowanie":


Tweet

Po kliknięciu tego linku rozwinie się karta, która w przypadku typu summary może wyglądać tak:

Twitter Card

Na stronie pojedynczego wpisu karta jest od razu rozwinięta - można to zobaczyć tutaj. Warto też zerknąć na przykłady kart typów image i video.

Dodanie Twitter Cards do tekstów w naszym serwisie polega na dodaniu do sekcji head specjalnych znaczników, bardzo podobnych do znaczników Open Graph.

Znaczniki Twitter Cards to zwykłe znaczniki meta, których nazwa zaczyna się od prefiksu twitter:. Zacznijmy od stworzenia kompletu znaczników dla karty typu summary, która jest najlepszym wyborem dla większości stron. Do dyspozycji mamy następujące znaczniki:

twitter:card typ karty (summary, photo, video)
twitter:url adres URL strony
twitter:title tytuł strony
twitter:description zajawka treści strony (maksymalnie 200 znaki)
twitter:image (opcjonalny) adres URL obrazka, który chcemy umieścić na karcie
twitter:site nazwa profilu w serwisie Twitter, poprzedzona znakiem @
twitter:site:id identyfikator profilu w serwisie Twitter (stosować zamiast twitter:site)
twitter:creator nazwa profilu autora w serwisie Twitter, poprzedzona znakiem @
twitter:creator:id identyfikator profilu autora w serwisie Twitter (stosować zamiast twitter:creator)

W przypadku karty typu summary minimalne rozmiary obrazka to 60 x 60 px, a obrazki większe niż 120 x 120 px zostaną zmniejszone.

Warto zwrócić uwagę na znaczniki twitter:site i twitter:creator. Pierwszy z nich powinien zawierać nazwę profilu strony (na przykład @webhelp_pl), drugi natomiast nazwę profilu autora (na przykład @toszcze). Profil strony wyświetlany jest pod zajawką treści, a profil autora zaraz pod tytułem.

Kompletny zestaw znaczników dla karty typu summary może wyglądać tak:

Kod: Zaznacz cały
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@webhelp_pl" />
<meta name="twitter:creator" content="@toszcze" />
<meta name="twitter:title" content="500 eksperymentów Chrome" />
<meta name="twitter:url" content="http://webhelp.pl/blog/500-eksperymentow-chrome/" />
<meta name="twitter:description" content="Chrome Experiments to stworzona przez Google strona, na której prezentowane są eksperymenty wykorzystujące technologie dostępne w najnowszych przeglądarkach (w domyśle chodzi o Chrome, ale większość..." />
<meta name="twitter:image" content="http://webhelp.pl/pictures/blog/500-eksperymentow-chrome_773.png" />

Karta typu photo (zdjęcie) może posiadać pusty tytuł (znacznik twitter:title) i zajawkę (znacznik twitter:description). Dodatkowo możemy pomóc Twitterowi w skalowaniu naszego obrazu za pomocą znaczników określających rozmiar zdjęcia, aczkolwiek nie jest to wymagane. Pozostałe znaczniki są takie same jak w przypadku karty summary.

Kod: Zaznacz cały
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@webhelp_pl" />
<meta name="twitter:creator" content="@toszcze" />
<meta name="twitter:title" content="" />
<meta name="twitter:url" content="http://webhelp.pl/blog/500-eksperymentow-chrome/" />
<meta name="twitter:description" content="" />
<meta name="twitter:image" content="http://webhelp.pl/pictures/blog/500-eksperymentow-chrome_773.png" />
<meta name="twitter:image:width" content="800" />
<meta name="twitter:image:height" content="360" />

W przypadku karty typu photo obrazek może być dowolnie duży - Twitter pobierze go i przeskaluje do odpowiednich rozmiarów (maksymalnie 375 x 435 px dla zwykłych przeglądarek, 375 x 280 px dla urządzeń mobilnych i 750 x 560 px dla urządzeń mobilnych z ekranem Retina). Minimalna wielkość obrazka to 280 x 150 px. Przeskalowane wersje naszego obrazka będą przechowywane na serwerach Twittera.

Ostatnim i najbardziej rozbudowanym typem karty jest karta video, na której można umieścić odtwarzacz wideo. Karta ta działa w różny sposób na różnych urządzeniach, ponieważ nie wszystkie formaty wideo są odtwarzane na wszystkich platformach.

Najprostszym przykładem jest skorzystanie ze znacznika twitter:player, za pomocą którego możemy umieścić na karcie odtwarzacz w taki sam sposób, w jaki osadzamy go na stronie WWW:

Kod: Zaznacz cały
<meta name="twitter:card" value="player">
<meta name="twitter:site" value="@youtube">
<meta name="twitter:title" content="Example Video">
<meta name="twitter:description" content="This is a sample YouTube video">
<meta name="twitter:url" content="http://www.youtube.com/watch?v=XHY2OB1ceEa">
<meta name="twitter:image" content="http://example.com/keyframe/a.jpg">
<meta name="twitter:player" value="https://www.youtube.com/embed/XHY2OB1ceEa">
<meta property="twitter:player:width" content="640">
<meta property="twitter:player:height" content="480">

Obrazek zdefiniowany za pomocą znacznika twitter:image zostanie wyświetlony w przypadku gdy używana przeglądarka nie będzie w stanie wyświetlić odtwarzacza.

Opcjonalnie dla karty video możemy dodać znacznik twitter:player:stream, poprzez który przekazujemy adres URL pliku z filmem w formacie H.264 (Twitter sam zadba o wyświetlenie odtwarzacza).

Kod: Zaznacz cały
<meta name="twitter:player:stream" content="https://example.com/raw-stream/a.mp4">
<meta name="twitter:player:stream:content_type" content="video/mp4; codecs=&amp;quot;avc1.42E01E1, mpa.40.2&amp;quot;">

Dla kart video obowiązują dodatkowe zalecenia. Film musi być dostępny za pośrednictwem protokołu HTTPS, musi posiadać możliwość zatrzymania odtwarzania, nie może być odtwarzany automatycznie, nie może wymagać od użytkownika rejestracji ani logowania, nie może być sam w sobie reklamą, nie może być plikiem SWF i nie może posiadać własnych przycisków społecznościowych.

Na koniec warto dodać, że niektóre ze znaczników Twitter Cards mogą zostać zastąpione znacznikami Open Graph:

twitter:url - og:url
twitter:title - og:title
twitter:description - og:description
twitter:image - og:image

Tak więc jeśli nasza strona już korzysta ze znaczników Open Graph, to nie ma potrzeby generowania wymienionych wyżej znaczników ponownie.

Kompletna dokumentacja Twitter Cards znajduje się pod tym adresem.

W momencie pisania tego tekstu Twitter Cards były wciąż dostępne tylko dla zaakceptowanych przez Twittera witryn. Aby zgłosić swoją stronę należy skorzystać z tego formularza.
Osoby używające WordPressa mogą skorzystać z jednej z wtyczek generujących znaczniki dla Twitter Cards (na przykład Twitter Cards).

Masz pytania lub wątpliwości? Odwiedź nasze forum dyskusyjne.

Bartosz Romanowski

Programista, gadżeciarz, krytyczny miłośnik produktów Apple, fan ciężkich brzmień i niepoprawny pesymista.


Komentarze


HTML CSS JavaScript PHP bazy danych MySQL Flash grafika framework hosting domeny pozycjonowanie wordpress Facebook