5 moduri ușoare de a instala carduri Twitter pe site-ul tău web

Deci știi cum pe Twitter, când cineva postează un link către site-ul său, Twitter creează o casetă care are o imagine în miniatură, un titlu, o descriere și o adresă URL pentru pagina de destinație? Este cu adevărat comun. Face postările standard de link-uri mult mai vizibile în cronologie, arată puțin despre destinația linkului și încurajează mai multă interacțiunea utilizatorului.

Acesta este un card Twitter. Mai exact, este cardul de rezumat al site-ului web, unul dintre mai multe tipuri de carduri Twitter care pot fi integrate într-un site web. Ce alte tipuri mai sunt?

• Cardul rezumat, așa cum sa menționat, este o previzualizare a unui site web. Este o imagine și un text personalizate extrase din metainformații care asigură o previzualizare bună a ceea ce va vedea un utilizator când face clic pe linkul dvs.
• Fișa de rezumat (cu imagine mare) este... identică cu o fișă de rezumat. Sincer, nu știu de ce este o diferență. Faceți clic pe fiecare dintre linkuri și vizualizați tweet-urile previzualizate și vedeți ce vreau să spun. Presupun că înainte de ultima reproiectare a Twitter, acestea ar fi putut arăta diferit, dar astăzi totul arată ca o carte de imagine mare.
• Cartea de jucător nu trebuie confundată cu cărți de baseball sau alte cărți de sport. Sunt în esență carduri cu imagini mari, cu excepția faptului că imaginea este o formă de media animată. În funcție de modul în care sunt afișate, acestea pot fi mici casete de previzualizare și descriere care se extind în medii sau doar media în sine gata de redare. În general, acestea sunt videoclipuri încorporate, cum ar fi videoclipurile YouTube, deși webm-urile sunt din ce în ce mai populare.
• Cardul de aplicație este o cutie care extrage date dintr-o pagină a magazinului de aplicații pentru a crea o fereastră personalizată de promovare a aplicației. Afișează detaliile importante ale aplicației legate în tweet, împreună cu un buton CTA pentru a-i determina pe utilizatori să instaleze aplicația imediat.

Cardurile Twitter erau mult mai complexe. Înainte existau tipuri specifice de carduri pentru galerii de imagini, produse și alte opțiuni, dar Twitter le-a eliminat de atunci. Dacă vreți puțină nostalgie, puteți vedea cum au arătat aici, doar nu vă atașați prea tare; nu le poți face azi.

Elementele de bază ale cardurilor Twitter

Puteți avea doar un fel de card Twitter pe site, sau cel puțin pe pagină web, dacă doriți să specificați cod individual pentru fiecare pagină. Majoritatea oamenilor aleg un card de rezumat al imaginii mari de bază și pun codul în antetul șablonului de site, astfel încât să apară pe fiecare pagină. Unele site-uri, cum ar fi YouTube, vor pune cardul jucătorului în antetul lor. Principala concluzie aici este că puteți avea un singur set de informații despre card în metadatele antetului pe o anumită pagină.

Cardurile sunt destul de robuste în ceea ce privește datele pe care le pot transmite. Puteți face ca cardul să știe automat cine a creat conținutul și cine deține pagina, chiar și ambele în același timp, dacă sunt diferite. Puteți specifica mediul care urmează să fie încărcat, puteți specifica numele și codul de urmărire și multe altele. De fapt, puteți citi această pagină pentru a vă face o idee despre atributele pe care le puteți utiliza în special pentru cărți. De asemenea, puteți lega atributele Open Graph pentru date mai solide.

Ceea ce voi face astăzi aici este să vă spun cum să adăugați carduri Twitter pe site-ul dvs. Nu voi trece peste fiecare atribut – documentația Twitter este suficient de bună – o să vă ofer doar o scurtă descriere a modului de a face acest lucru pentru diferite CMS-uri.

Înainte de a începe; pentru fiecare metodă de instalare, aveți nevoie de validare. Pentru a vă asigura că ați procedat corect, după ce aveți un card activat, copiați adresa URL la acest validator. Acest lucru vă va spune dacă cardul funcționează sau nu.

1: WordPress

WordPress este poate cea mai ușoară platformă pentru implementarea cardurilor Twitter, deoarece există atât de multe moduri diferite de a face acest lucru, inclusiv cea care este aproape încorporată.

Modul recomandat de implementare a cardurilor Twitter este utilizarea pluginului oficial Twitter . Îl poți instala la fel ca orice alt plugin și de acolo poți genera automat cardurile de Twitter. De asemenea, permite partajarea și butoanele tweet/follow, gestionarea tweetului încorporat și codurile scurte pentru urmărirea analizelor. Puteți citi documentația aici și puteți descărca pluginul în sine aici.

Dacă nu doriți să utilizați pluginul oficial Twitter sau dacă vă aflați pe WordPress.com găzduit, puteți utiliza Jetpack. În Jetpack, doriți să găsiți secțiunea Partajare și să o configurați. Va exista o secțiune Twitter, unde vă autorizați contul de Twitter pe site-ul dvs.

O a treia opțiune este să utilizați pluginul JM Twitter Cards. Acest plugin, de Julien Maury, adaugă compatibilitatea cardurilor Twitter cu unele setări de bază. Puteți alege să folosiți prima imagine de pe pagina dvs., mai degrabă decât o imagine prezentată, puteți previzualiza redarea cardului dvs. Twitter și puteți personaliza cardul pentru fiecare postare atunci când creați postarea. Pentru a configura pluginul, navigați la bara laterală și faceți clic pe panoul de plugin din tabloul de bord administrativ. Alegeți tipul de card și completați restul casetelor cu contul dvs. de Twitter, contul site-ului dvs., lungimea descrierii și orice altceva doriți să adăugați.

Dacă niciunul dintre acestea nu corespunde nevoilor dvs. sau dacă se întâmplă să îl aveți deja, WordPress SEO by Yoast se ocupă și de carduri Twitter. În panoul de administrare, navigați la SEO și faceți clic pe secțiunea Social. Există o filă Twitter acolo, unde puteți adăuga numele de utilizator Twitter la casetă. Din păcate, ultima dată când am citit, Yoast acceptă doar carduri rezumative; ai nevoie de pluginuri mai avansate dacă vrei alte tipuri de carduri.

2: Tumblr

Tumblr este o platformă de blogging surprinzător de populară, pe care mulți oameni nu își dau seama că a devenit la fel de prolifică. Rețeaua Tumblr se extinde dincolo de blogurile marcate cu .tumblr.com; de fapt, unele site-uri de nume mari folosesc Tumblr ca arhitectură de bază. Odată ce aveți un domeniu personalizat pe el, este la fel ca orice altă arhitectură back-end. Sau este?

Adevărul este că arhitectura Tumblr nu este expansivă sau la fel de personalizabilă ca ceva de genul WordPress. Va trebui să utilizați un cod personalizat pentru a implementa carduri Twitter specifice, personalizate pe blogul dvs. Puteți citi codul și descrierea din spatele lui aici, în răspunsul dat de Dan Leveille pe Quora.

Este demn de remarcat aici că acest cod este necesar pentru a vă personaliza manual cardurile; nu este necesar să aveți pur și simplu fișe de rezumat. Twitter a trecut deja pe lista albă Tumblr.com pentru generarea automată a cardurilor la publicarea link-urilor, așa că dacă nu doriți un anumit card cu date specifice sau dacă utilizați un domeniu personalizat, puteți utiliza doar ceea ce este implementat implicit. Aș recurge la codul lui doar dacă aveți un domeniu personalizat pentru site-ul dvs. Tumblr sau doriți date pe care Twitter nu le preia în mod natural.

3: Blogger

Instalarea cardurilor Twitter pe un blog Blogger se reduce la șablonul dvs. Vă voi da instrucțiuni generale, dar dacă șablonul dvs. de site diferă prea mult de la normă, va trebui să vă dați seama singur pe baza indiciilor pe care vi le dau.

Este întotdeauna recomandat să faceți o copie de rezervă a șablonului înainte de a-l modifica, pentru orice eventualitate. Accesați tabloul de bord, faceți clic pe șablon și faceți clic pe butonul de rezervă pentru a salva o copie a acestuia în scopul restaurării mai târziu.

Apoi, faceți clic pe butonul „editați HTML” de sub previzualizarea live a șablonului de blog. În acel cod, rulați o căutare pentru „<b:includable id='post' var='post'>”. Păstrați acea linie acolo unde este, dar lipiți următoarele direct sub ea:


<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'/>


Evident, va trebui să editați datele de mai sus . Schimbați @yourname cu numele de utilizator Twitter, schimbați www.yoursite.com cu adresa URL a site-ului dvs. și asigurați-vă că este corectă.

Puteți, desigur, să personalizați acest cod pentru nevoile dvs. Dacă preferați un alt tip de card, schimbați linia de sus cu altceva decât „rezumat” și adaptați restul codului la datele de care aveți nevoie.

În cazul în care codul pe care l-am lipit mai sus nu funcționează, aceasta este pagina de la care l-am luat. Puteți verifica din nou pentru a vă asigura că l-am copiat corect sau că ați făcut-o și puteți verifica acolo în cazul în care a fost actualizat și postarea mea nu reflectă actualizarea. Apropo, dacă nu funcționează, anunță-mă. Voi face tot posibilul să o repar.

4: Joomla

Joomla are multe în comun cu WordPress, în măsura în care este un CMS cu accent pe personalizare prin extensii, mai degrabă decât o platformă limitată cu îmbunătățiri cosmetice precum Tumblr sau Blogger. Ca atare, există o mână de moduri diferite în care puteți implementa carduri Twitter folosind diferite extensii Joomla.

Cardurile Tweet este o extensie pe care probabil că majoritatea oamenilor o preferă. Este gratuit de descărcat și utilizat și adaugă carduri Twitter pe site-ul dvs. bazat pe Joomla. Asta e; nu este nimic elegant în configurație, nu este nimic excepțional cu funcționalitatea sau implementarea sa, face doar ceea ce scrie pe cutie.

O a doua opțiune este extensia pro Open Graph și Twitter Card Tags. Este o extensie mai robustă care adaugă etichete atât pentru Twitter, cât și pentru Facebook. Are o mulțime de opțiuni de personalizare pentru a alege imaginile și datele specifice pe care le doriți pentru postările dvs. Integrarea Open Graph pe Facebook este grozavă, plus că adaugă metadate suplimentare atât pentru Twitter, cât și pentru Google atunci când bat. Singurul dezavantaj este, ca extensie pro, aceasta te va costa. Este ieftin, totuși; doar 7 euro pentru licenta. Puteți cumpăra asistență suplimentară dacă doriți, dar să fim sinceri; acestea sunt doar metadate, este o lucrare de copiere și inserare glorificată pentru oamenii speriați de cod. Nu ai nevoie de sprijin.

A treia opțiune pe care o am pentru tine este utilizarea TEXTman, un editor de postări frontale pentru crearea și publicarea articolelor tale pe un site Joomla. Nu trebuie să configurați nimic pentru ca cardurile Twitter să funcționeze; utilizați doar TEXTman ca editor și aduce funcția automat. Dezavantajul aici este că este și un instrument pro și unul mult mai scump. Deoarece este un întreg editor de text și instrumente asociate, este o licență mare cu mai multe extensii adăugate. Vă va costa 99 USD pentru un abonament cu totul sau 40 USD doar pentru TEXTman în sine și o licență limitată de asistență și actualizare. Foarte scump dacă tot ce vrei sunt carduri Twitter.

În cele din urmă, desigur, puteți folosi metoda de mai jos sau descrisă în această postare pentru a le implementa manual.

5: Sisteme personalizate de management al conținutului

Am postat deja un exemplu de metadate în codul de mai sus. Acesta este practic același cod pe care îl inserați în antetul site-ului dvs., indiferent de arhitectura pe care o utilizați. Modificați lucrurile în funcție de nevoile site-ului dvs. și copiați codul în antetul site-ului. Nu contează în mod specific unde se află, atâta timp cât se află între etichetele <head> și </head> din partea de sus a site-ului.

Nu uitați să personalizați etichetele. Principalele pe care trebuie să le acordați atenție sunt etichetele cardului, site-ului, creatorului și domeniului. Acestea trebuie completate cu tipul de card pe care îl doriți, mânerul Twitter al site-ului dvs. și al creatorului de conținut și adresa URL a domeniului dvs. Apoi validați cardul după ce ați implementat modificările.

Dacă cardul dvs. încă nu funcționează după validare, ar trebui să citiți ghidul de depanare al Twitter. Sunt șanse să existe o eroare simplă undeva pe care o puteți remedia în câteva secunde.