Voeg tweetable links toe aan uw inhoud met InlineTweet.js

Je zult deze functie veel zien op grote sites zoals TechCrunch en Mashable. Je zult een artikel lezen en merken dat een hele zin is gemarkeerd als een link.

Maar toch, wanneer je erop klikt open een tweet-venster je vragen om dat tekstfragment met je Twitter-volgers te delen. Het is een geweldige manier om verkeer naar uw site leiden en moedig meer sociale aandelen aan.

Als u dit effect op uw site wilt repliceren, probeert u het InlineTweet.js. Het kan u uren installatietijd besparen door deze functionaliteit direct aan uw pagina toe te voegen.

Deze gratis JavaScript-plugin is supereenvoudig te installeren en heeft zelfs een gratis WordPress-plug-in als je die route verkiest.

Het vereist geen JavaScript-afhankelijkheden, zodat je dit sans-jQuery kunt uitvoeren.

Alle inhoud werkt rechtstreeks via gegevensattributen, dus u zou deze één voor één opstellen op basis van uw inhoud. Natuurlijk maakt de WordPress plug-in dit een stuk eenvoudiger, dus als je liever meer controle hebt, is dit een geweldige optie.

Op de hoofdscriptpagina vindt u een paar codefragmenten demonstreren hoe dit werkt.

U hoeft alleen het JS-script op te nemen in uw pagina en een aantal CSS naar uw stylesheet te kopiëren (slechts 3 blokken). Vanaf daar kunt u voeg HTML-codes toe zoals dit:

  Lorem Khaled Ipsum is een belangrijke sleutel tot succes  

De alleen vereist item hier is de top data-inline-tweet attribuut. Dit is het enige dat u nodig heeft om het effect te laten werken, al het andere is optioneel.

Maar die extra opties maken wel degelijk verschil omdat ze voeg functies toe aan de automatisch gegenereerde tweet:

• Data-inline-tweet-via - voegt een @ -vermelding toe aan de tweet
• Data-inline-tweet-labels - voegt tags toe aan de tweet (als er ruimte is)
• Data-inline-tweet-url - bevat een klikbare URL in uw tweet

De setup kan moeilijk zijn en daarom raad ik aan om de WordPress-plug-in te gebruiken als dat mogelijk is.

Maar het is niet zo erg als je de inhoud gewoon kopieert en plakt in elke tekst die je tweetbaar wilt maken. En voor een gratis plug-in is dit ding erg lichtgewicht.

Neem een ​​kijkje op de demo-pagina om dit in actie te zien en kijk in de GitHub-repo als je meer wilt weten.