Lägg till tweevärdiga länkar i ditt innehåll med InlineTweet.js

Du får se den här funktionen mycket på stora webbplatser som TechCrunch och Mashable. Du läser en artikel och märker att en hel mening är markerad som en länk.

Men när du klickar på det ska det öppna ett tweet-fönster frågar dig att dela den texttexten med dina Twitter-anhängare. Det är ett bra sätt att kör trafik till din webbplats och uppmuntra fler sociala aktier.

För att replikera denna effekt på din webbplats, försök InlineTweet.js. Det kan spara dig timmar med inställningstid genom att lägga till den här funktionen direkt till din sida.

Detta gratis JavaScript-plugin är super lätt att installera och det har även en gratis WordPress plugin om du föredrar den vägen.

Det kräver inga JavaScript beroende, så du kan köra den här sans-jQuery.

Allt innehåll fungerar direkt genom data attribut, så du skulle ställa upp dessa en och en, baserat på ditt innehåll. Naturligtvis gör WordPress-plugin det här mycket enklare, så om du föredrar att ha större kontroll är det här ett bra alternativ.

På huvudskriptsidan hittar du några kodrader visar hur det här fungerar.

Du behöver bara inkludera JS-skriptet i din sida och kopiera några CSS till ditt stilark (endast 3 kvarter). Därifrån kan du lägg till HTML-koder så här:

  Lorem Khaled Ipsum är en viktig nyckel till framgång  

De Endast obligatorisk föremål här är toppen data inline-tweet attribut. Det här är det enda du behöver för att få effekten att fungera, allt annat är valfritt.

Men de extra alternativen gör skillnad eftersom de lägg till funktioner till den automatiskt genererade tweeten:

• Data-inline-tweet-via - lägger till en @mention i tweet
• Data-inline-tweet-taggar - lägger till taggar i tweeten (om det finns rum)
• Data-inline-tweet-url - innehåller en klickbar URL i din tweet

Inställningen kan vara svår, varför jag rekommenderar att du använder WordPress-plugin om du kan.

Men det är inte så illa om du bara kopiera / klistra in innehållet till vilken text du vill tweetable. Och för en gratis plugin är den här väldigt lätt.

Ta en titt på demosidan för att se detta i åtgärd och titta på GitHub repo om du vill lära dig mer.