5 prostych sposobów na zainstalowanie kart Twittera w Twojej witrynie

Więc wiesz, jak na Twitterze, gdy ktoś opublikuje link do swojej witryny, Twitter tworzy pole z miniaturą, tytułem, opisem i adresem URL strony docelowej? To naprawdę powszechne. Sprawia, że ​​standardowe posty z linkami są o wiele bardziej widoczne na osi czasu, pokazują nieco miejsce docelowe linku i zachęcają do większej interakcji użytkownika.

To jest karta na Twittera. W szczególności jest to karta podsumowania witryny, jeden z kilku rodzajów kart Twittera, które można zintegrować ze stroną internetową. Jakie są inne typy?

• Karta podsumowania, jak wspomniano, to podgląd strony internetowej. Jest to niestandardowy obraz i tekst pobrane z metainformacji, które zapewniają dobry podgląd tego, co zobaczy użytkownik po kliknięciu linku.
• Karta podsumowania (z dużym obrazem) jest… identyczna z kartą podsumowania. Szczerze nie wiem, dlaczego jest różnica. Kliknij każdy z linków i zobacz podgląd tweetów i zobacz, co mam na myśli. Przypuszczam, że przed ostatnim przeprojektowaniem Twittera mogły wyglądać inaczej, ale dziś wszystko wygląda jak duża karta graficzna.
• Karty gracza nie należy mylić z baseballem lub innymi kartami sportowymi. Zasadniczo są to duże karty graficzne, z wyjątkiem tego, że obraz jest jakąś formą animowanych mediów. W zależności od tego, jak są wyświetlane, mogą to być małe pola podglądu i opisu, które rozwijają się do multimediów, lub po prostu same multimedia gotowe do odtwarzania. Generalnie są to filmy osadzone, takie jak filmy na YouTube, chociaż coraz popularniejsze stają się webm.
• Karta aplikacji to pole, które pobiera dane ze strony sklepu z aplikacjami, aby utworzyć dostosowane okno promocji aplikacji. Pokazuje najistotniejsze szczegóły aplikacji połączonej w tweecie wraz z przyciskiem CTA, aby użytkownicy mogli od razu zainstalować aplikację.

Karty na Twitterze były o wiele bardziej złożone. Kiedyś istniały określone rodzaje kart do galerii obrazów, produktów i niektórych innych opcji, ale od tego czasu Twitter je usunął. Jeśli chcesz trochę nostalgii, możesz zobaczyć, jak wyglądały tutaj, po prostu nie przywiązuj się zbytnio; nie możesz ich zrobić dzisiaj.

Podstawy kart na Twitterze

Możesz mieć tylko jeden rodzaj karty Twittera na stronę internetową lub przynajmniej na stronę internetową, jeśli masz ochotę określić indywidualny kod dla każdej strony. Większość ludzi wybiera podstawową kartę z dużym podsumowaniem obrazu i umieszcza kod w nagłówku szablonu swojej witryny, aby wyświetlał się na każdej stronie. Niektóre witryny, takie jak YouTube, umieszczają kartę gracza w nagłówku. Głównym wnioskiem jest to, że możesz mieć tylko jeden zestaw informacji o karcie w metadanych nagłówka na danej stronie.

Karty mają dość solidne dane, które mogą przekazywać. Możesz sprawić, by karta automatycznie wiedziała, kto utworzył treść i kto jest właścicielem strony, nawet w tym samym czasie, jeśli są różne. Możesz określić nośnik, który ma być załadowany, możesz określić nazwy i kod śledzenia i wiele więcej. W rzeczywistości możesz przeczytać tę stronę, aby zorientować się, jakich atrybutów możesz użyć w przypadku kart. Możesz również powiązać atrybuty Open Graph, aby uzyskać bardziej niezawodne dane.

Zamierzam tu dzisiaj powiedzieć, jak dodać karty Twittera do swojej witryny. Nie zamierzam omawiać każdego pojedynczego atrybutu – dokumentacja Twittera jest wystarczająco dobra – przedstawię tylko podsumowanie tego, jak to zrobić dla różnych CMS-ów.

Zanim zaczniemy; dla każdej metody instalacji potrzebujesz walidacji. Aby upewnić się, że zrobiłeś to dobrze, po włączeniu karty skopiuj adres URL do tego walidatora. Dzięki temu dowiesz się, czy karta faktycznie działa.

1: WordPress

WordPress jest prawdopodobnie najłatwiejszą platformą do wdrażania kart na Twitterze, ponieważ jest na to wiele różnych sposobów, w tym ten, który jest prawie wbudowany.

Zalecanym sposobem implementacji kart Twittera jest użycie oficjalnej wtyczki Twittera . Możesz go zainstalować tak jak każdą inną wtyczkę, a stamtąd możesz automatycznie generować karty na Twitterze. Umożliwia także udostępnianie i przyciski tweet/obserwuj, wbudowaną obsługę tweetów i skróty do śledzenia analiz. Możesz przeczytać dokumentację tutaj i pobrać samą wtyczkę tutaj.

Jeśli nie chcesz korzystać z oficjalnej wtyczki Twittera lub korzystasz z hostowanej witryny WordPress.com, możesz użyć Jetpack. W Jetpack chcesz znaleźć sekcję Udostępnianie i skonfigurować ją. Pojawi się sekcja Twitter, w której autoryzujesz swoje konto na Twitterze w swojej witrynie.

Trzecią opcją jest użycie wtyczki JM Twitter Cards. Ta wtyczka, autorstwa Juliena Maury, dodaje kompatybilność kart Twittera z kilkoma podstawowymi ustawieniami. Możesz wybrać, aby używał pierwszego obrazu na Twojej stronie, a nie polecanego obrazu, możesz wyświetlić podgląd renderowania karty na Twitterze i możesz dostosować kartę dla każdego posta podczas tworzenia posta. Aby skonfigurować wtyczkę, przejdź do paska bocznego i kliknij panel wtyczki na pulpicie administracyjnym. Wybierz typ karty i wypełnij pozostałe pola swoim kontem na Twitterze, kontem swojej witryny, długością opisu i wszystkim, co chcesz dodać.

Jeśli żaden z nich nie odpowiada Twoim potrzebom lub jeśli już go masz, WordPress SEO by Yoast obsługuje również karty na Twitterze. W panelu administracyjnym przejdź do SEO i kliknij sekcję Społeczności. Znajduje się tam zakładka Twitter, w której możesz dodać swoją nazwę użytkownika Twittera do pola. Niestety, ostatnio czytałem, Yoast obsługuje tylko karty podsumowań; potrzebujesz bardziej zaawansowanych wtyczek, jeśli potrzebujesz innych rodzajów kart.

2: Tumblr

Tumblr to zaskakująco popularna platforma blogowa, której wielu ludzi nie zdaje sobie sprawy, że stała się tak płodna. Sieć Tumblr wykracza poza blogi oznaczone .tumblr.com; w rzeczywistości niektóre znane witryny wykorzystują Tumblr jako podstawową architekturę. Gdy masz już własną domenę, działa jak każda inna architektura zaplecza. Albo to jest?

Faktem jest, że architektura Tumblra nie jest tak ekspansywna ani tak elastyczna, jak coś takiego jak WordPress. Będziesz musiał użyć niestandardowego kodu , aby zaimplementować na swoim blogu konkretne, spersonalizowane karty Twittera. Możesz przeczytać kod i opis, który się za nim kryje, w odpowiedzi udzielonej przez Dana Leveille'a na Quora.

Warto tutaj zauważyć, że ten kod jest wymagany do ręcznego dostosowania kart; nie jest wymagane posiadanie po prostu kart podsumowujących. Twitter umieścił już na białej liście Tumblr.com do automatycznego generowania kart przy publikacji linków, więc jeśli nie chcesz konkretnej karty z określonymi danymi lub używasz niestandardowej domeny, możesz po prostu użyć tego, co jest zaimplementowane domyślnie. Uciekałbym się do jego kodu tylko wtedy, gdy masz niestandardową domenę dla swojej witryny Tumblr lub potrzebujesz danych, których Twitter nie pobiera w naturalny sposób.

3: Blogger

Instalowanie kart Twittera na blogu Bloggera sprowadza się do Twojego szablonu. Dam ci ogólne instrukcje, ale jeśli twój szablon strony za bardzo odbiega od normy, będziesz musiał sam to rozgryźć na podstawie wskazówek, które ci dam.

Zawsze zaleca się wykonanie kopii zapasowej szablonu przed manipulowaniem przy nim, na wszelki wypadek. Przejdź do pulpitu nawigacyjnego, kliknij szablon i kliknij przycisk kopii zapasowej, aby zapisać jego kopię w celu późniejszego przywrócenia.

Następnie kliknij przycisk „edytuj kod HTML” pod podglądem na żywo szablonu bloga. Wewnątrz tego kodu wyszukaj „<b:includable id='post' var='post'>”. Zachowaj tę linię tam, gdzie jest, ale wklej następujące bezpośrednio pod nią:


<meta content='summary' name='twitter:card'/>
<meta content='@yourname' name='twitter:site'/>
<meta content='@yourname' name='twitter:creator'/>
<meta content='www.yoursite.com' name='twitter:domain'/>
<meta expr:content='data:post.firstImageUrl' name='twitter:image:src'/>
<meta expr:content='data:post.title' name='twitter:title'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<b:else/>
<meta expr:content='data:post.snippet' name='twitter:description'/>
</b:if>
<meta expr:content='data:post.sharePostUrl' name='twitter:url'/>


Oczywiście będziesz musiał samodzielnie edytować powyższe dane . Zmień @twojanazwa na swoją nazwę użytkownika Twittera, zmień www.twojawitryna.com na adres URL swojej witryny i upewnij się, że jest prawidłowy.

Możesz oczywiście dostosować ten kod do swoich potrzeb. Jeśli wolisz inny rodzaj karty, zmień górną linię na coś innego niż „podsumowanie” i dostosuj resztę kodu do potrzebnych danych.

Jeśli kod, który wkleiłem powyżej, nie działa, jest to strona, z której go otrzymałem. Możesz dwukrotnie sprawdzić, czy skopiowałem go poprawnie, lub że zrobiłeś, i możesz tam sprawdzić, czy został zaktualizowany, a mój post nie odzwierciedla aktualizacji. A propos, jeśli to nie zadziała, daj mi znać. Zrobię co w mojej mocy, aby to naprawić.

4: Joomla

Joomla ma wiele wspólnego z WordPress, jeśli chodzi o bycie CMS-em z naciskiem na personalizację za pomocą rozszerzeń, a nie ograniczoną platformę z kosmetycznymi ulepszeniami, takimi jak Tumblr lub Blogger. W związku z tym istnieje kilka różnych sposobów implementacji kart Twittera przy użyciu różnych rozszerzeń Joomla.

Karty tweetów to jedno z rozszerzeń, które większość ludzi prawdopodobnie preferuje. Można go bezpłatnie pobrać i używać, a także dodaje karty Twittera do Twojej witryny opartej na Joomla. Otóż ​​to; nie ma nic wymyślnego w konfiguracji, nie ma nic wyjątkowego pod względem funkcjonalności lub implementacji, po prostu robi to, co mówi na puszce.

Drugą opcją jest rozszerzenie pro Open Graph i tagi kart Twittera. Jest to bardziej rozbudowane rozszerzenie, które dodaje tagi zarówno dla Twittera, jak i Facebooka. Ma wiele opcji dostosowywania, aby wybrać określone obrazy i dane, które chcesz umieścić w swoich postach. Integracja Open Graph z Facebookiem jest świetna, a ponadto dodaje dodatkowe metadane dla Twittera i Google, gdy pukają. Jedynym minusem jest to, że jako rozszerzenie pro będzie cię to kosztować. Jest jednak tani; tylko 7 euro za licencję. Możesz kupić dodatkowe wsparcie, jeśli chcesz, ale bądźmy szczerzy; to tylko metadane, to uwielbiona praca kopiowania i wklejania dla ludzi bojących się kodu. Nie potrzebujesz wsparcia.

Trzecią opcją, jaką mam dla Ciebie, jest użycie TEXTmana, frontendowego edytora postów do tworzenia i publikowania Twoich artykułów na stronie Joomla. Nie musisz niczego konfigurować, aby karty Twittera działały; po prostu użyj TEXTmana jako edytora i automatycznie uruchomi tę funkcję. Minusem jest to, że jest to również narzędzie profesjonalne i znacznie droższe. Ponieważ jest to cały edytor tekstu i powiązane z nim narzędzia, jest to duża licencja z kilkoma dodanymi rozszerzeniami. Subskrypcja ze wszystkim kosztuje 99 USD lub 40 USD za sam TEXTman i ograniczoną licencję na wsparcie i aktualizację. Bardzo drogie, jeśli chcesz tylko kart na Twitterze.

Na koniec oczywiście możesz skorzystać z metody poniżej lub opisanej w tym poście, aby zaimplementować je ręcznie.

5: Niestandardowe systemy zarządzania treścią

Wysłałem już przykład metadanych w powyższym kodzie. Jest to w zasadzie ten sam kod, który wklejasz w nagłówku swojej witryny, niezależnie od używanej architektury. Dostosuj rzeczy zgodnie z potrzebami swojej witryny i skopiuj kod do nagłówka witryny. Nie ma znaczenia, gdzie się znajduje, o ile znajduje się między tagami <head> i </head> u góry witryny.

Nie zapomnij dostosować tagów. Główne, na które musisz zwrócić uwagę, to tagi karty, witryny, twórcy i domeny. Powinny być wypełnione typem karty, którą chcesz, uchwytem Twittera Twojej witryny i twórcy treści oraz adresem URL Twojej domeny. Następnie zweryfikuj kartę po wprowadzeniu zmian.

Jeśli Twoja karta nadal nie działa po weryfikacji, zapoznaj się z przewodnikiem rozwiązywania problemów na Twitterze. Możliwe, że gdzieś jest jakiś prosty błąd, który możesz naprawić w kilka sekund.