Tilføj Tweetable Links i dit indhold med InlineTweet.js

Du kan se denne funktion meget på store websteder som TechCrunch og Mashable. Du læser en artikel og bemærker, at en hel sætning er fremhævet som et link.

Men når du klikker på det, vil det åbne et tweet vindue beder dig om at dele denne tekstuddrag med dine Twitter-tilhængere. Det er en fantastisk måde at drive trafik til dit websted og tilskynde til flere sociale aktier.

For at replikere denne effekt på dit websted, prøv InlineTweet.js. Det kan spare dig timers opsætningstid ved at tilføje denne funktionalitet direkte til din side.

Dette gratis JavaScript plugin er super nemt at installere og det har endda en gratis WordPress plugin hvis du foretrækker den rute.

Det kræver ikke nogen JavaScript afhængigheder, så du kan køre denne sans-jQuery.

Alt indhold fungerer direkte gennem data attributter, så du ville sætte disse op en for én, baseret på dit indhold. Naturligvis gør WordPress-plugin det meget lettere, så hvis du foretrækker at have mere kontrol, er dette en god mulighed.

På hovedskriftssiden finder du et par kodestykker demonstrerer hvordan dette virker.

Du skal blot inkludere JS-scriptet på din side og kopiere nogle CSS til dit stylesheet (kun 3 blokke). Derfra kan du tilføj HTML-koder sådan her:

  Lorem Khaled Ipsum er en vigtig nøgle til succes  

Det Kun påkrævet vare her er den allerbedste data-inline-tweet attribut. Dette er det eneste, du har brug for for at få effekten til at virke, alt andet er valgfrit.

Men disse ekstra muligheder gør en forskel, fordi de Tilføj funktioner til den automatisk genererede tweet:

• Data-inline-tweet-via - tilføjer en @mention i tweetet
• Data-inline-tweet-tags - tilføjer tags til tweetet (hvis der er plads)
• Data-inline-tweet-url - indeholder en klikbar URL i din tweet

Opsætningen kan være svært, hvorfor jeg anbefaler at bruge WordPress plugin, hvis du kan.

Men det er ikke så dårligt, hvis du bare kopierer / indsætter indholdet til den tekst, du ønsker tweetable. Og for en gratis plugin er denne ting meget let.

Tag et kig på demosiden for at se dette i aktion, og kig ind i GitHub repo, hvis du vil lære mere.