Het toevoegen van een Twitter-knop aan een website is vrij eenvoudig. In het laatste bericht hebben we gesproken over het toevoegen van een Facebook-like-knop aan de website . Hier gaan we zien hoe je de Twitter-knop handmatig aan je blog / website kunt toevoegen. We zullen ook zien hoe Twitter-kaart te implementeren en wat de voordelen hiervan zijn. Ik geef er de voorkeur aan om de knop voor sociale media handmatig aan mijn blog toe te voegen, omdat ik deze op deze manier kan plaatsen waar ik wil en het me de vrijheid geeft om de code aan te passen, zoals ik het nodig heb.
Om de Twitter-knop op de website weer te geven, moet u twee elementen toevoegen: Twitter-knopcode Java-scripts . Twitter-knopcode moet worden gekopieerd naar de plaats waar u de knop wilt weergeven (meestal in een sjabloonbestand zoals single.php zodat u het nergens anders hoeft toe te voegen). JavaScript kan overal worden toegevoegd tussen het openen en sluiten van Body-tags (<body>…. </body>).
Knop
<a href="https://twitter.com/share" class="twitter-share-button"> Tweet </a>
Deze code toont een tweet-knop met de teller zoals hieronder weergegeven -
Als je deze knop verder wilt configureren of Twitter wilt volgen, volg dan de Twitter-bronpagina .
JavaScript
Voordat u de code van de knop in de sjabloon of op een webpagina plaatst, kopieert u de onderstaande JavaScript, anders werkt de knop niet. Er zijn twee soorten scripts beschikbaar die de knop kan weergeven, u hoeft er maar één te kiezen. We raden aan om asynchroon script te gebruiken, omdat uw site hierdoor sneller wordt geladen.
Synchroon script - Minder aanbevolen - Maakt het laden van webpagina's >
<script type = "text / javascript"> // <! [CDATA [ ! function (d, s, id) {var js, fjs = d.getElementsByTagName (s) [0]; if (d.getElementById (id)!) {js = d.createElement (s); js.id = id; js.src = "// platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore (js, FJS); }} (Document, "script", "twitter-WJS"); //]]> </script> Asynchroon script - Goed voor websites - Heeft geen invloed op de laadtijd van de website.
<script type = "text / javascript"> // <! [CDATA [ ! function (d, s, id) {var js, fjs = d.getElementsByTagName (s) [0]; if (d.getElementById (id)!) {js = d.createElement (s); js.id = id; js.async = true; js.src = "// platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore (js, FJS); }} (Document, "script", "twitter-WJS"); //]]> </script> Laten we praten over twitter-kaarten
Tot nu toe hebben we geleerd hoe u een tweet-knop op uw website kunt implementeren, maar wilt u niet dat uw tweets er aantrekkelijk uitzien, zodat deze meer aandacht krijgt? Ik doe het liever. Het is mogelijk met behulp van twitter-kaarten. Eerder leg ik uit wat Twitter-kaarten zijn, bekijk de foto van een tweet.
Kortom, een tweet kan niet meer dan 140 tekens bevatten. Je kunt echter zien dat de bovenstaande tweet een opvallende titel, afbeelding en een goede beschrijving heeft. Het is mogelijk geworden met behulp van twitter-kaarten.
Wat is een twitterkaart?
Google gebruikt metadata Facebook gebruikt open-graph , evenzo gebruikt twitter twitterkaarten . Dit zijn in principe weinig regels code die twitter vertellen over de inhoudsbeschrijving, titel, afbeelding van een bepaalde webpagina.
Zo zien ze eruit:
<meta name = "twitter: site" content = "Easy Steps 2 Build Website"> <meta name = "twitter: creator" content = "@ Steps2BuildSite"> <meta name = "twitter: url" content = "/2013/09/add-twitter-button-website/"> <meta name = "twitter: title" content = "Twitter-knop toevoegen aan website"> <meta name = "twitter: description" content = "Een complete gids voor het toevoegen van twitter tweet-knop en twitter-kaarten aan website ...">
Afgezien van bovenstaande metatags bestaan er nog andere Twitter-kaarten, waardoor het voor Twitter gemakkelijker wordt uw inhoud te begrijpen en op een perfecte manier weer te geven die u altijd al wilde hebben.
Hoe voeg ik ze toe aan mijn website?
Handmatige manieren om dergelijke tags toe te voegen zijn altijd vervelend en moeilijk. Ik heb een perfecte oplossing voor WordPress-blogs. Als u een website op het WordPress-platform gebruikt, kunt u enkele plug-ins proberen, die deze taak automatisch voor u uitvoeren.
Yoast WordPress SEO-plug-in (gratis) en SEOpressor v5 (premium) zijn de plug-ins die deze functie ondersteunen.
. Dat is alles voor nu, laat het me weten als je hulp nodig hebt bij het toevoegen van de twitterknop aan je website .
Laat een reactie achter