Legg til Tweetable Links i innholdet ditt med InlineTweet.js

Du vil se denne funksjonen mye på store nettsteder som TechCrunch og Mashable. Du vil lese en artikkel og legge merke til at en hel setning er uthevet som en lenke.

Likevel, når du klikker det, vil det åpne et tweet vindu Be deg om å dele den teksten med din Twitter-tilhenger. Det er en fin måte å Kjør trafikk til nettstedet ditt og oppmuntre til flere sosiale aksjer.

For å gjenskape denne effekten på nettstedet ditt, prøv InlineTweet.js. Det kan spare deg for timer med oppsetttid ved å legge til denne funksjonaliteten direkte på siden din.

Denne gratis JavaScript-plugin er super enkel å installere, og den har enda en gratis WordPress-plugin hvis du foretrekker den ruten.

Den krever ingen JavaScript-avhengigheter, så du kan kjøre denne sans-jQuery.

Alt innhold fungerer direkte gjennom dataattributter, så du vil sette disse opp en etter en, basert på innholdet ditt. Naturligvis gjør WordPress-plugin dette mye enklere, så hvis du foretrekker å ha mer kontroll, er dette et flott alternativ.

På hovedskriptsiden finner du noen kodestykker viser hvordan dette virker.

Du trenger bare å inkludere JS-skriptet i siden din og kopiere noe CSS til stilarket ditt (kun 3 blokker). Derfra kan du legg til HTML-koder som dette:

  Lorem Khaled Ipsum er en viktig nøkkel til suksess  

De kun nødvendig gjenstand her er det aller beste data-inline-tweet Egenskap. Dette er det eneste du trenger for å få effekten til å fungere, alt annet er valgfritt.

Men de ekstra alternativene gjør en forskjell fordi de legg til funksjoner til den automatisk genererte tweet:

• Data-inline-tweet-via - legger til en @mention i tweetet
• Data-inline-tweet-tags - legger til koder til tweetet (hvis det er rom)
• Data-inline-tweet-url - inneholder en klikkbar nettadresse i tweetet ditt

Oppsettet kan være vanskelig, og derfor anbefaler jeg at du bruker WordPress-pluginet hvis du kan.

Men det er ikke så ille hvis du bare kopierer / limer inn innholdet til hvilken tekst du vil tweetable. Og for en gratis plugin er denne tingen veldig lett.

Ta en titt på demo siden for å se dette i gang og se på GitHub repo hvis du vil lære mer.