Přidejte odkazy s odkazem ve vašem obsahu pomocí InlineTweet.js

Uvidíte tuto funkci hodně na velkých stránkách, jako je TechCrunch a Mashable. Budete číst článek a všimnete si, že celá věta je zvýrazněn jako odkaz.

Ale když na něj kliknete otevřete okno tweetu Žádáme vás, abyste tento úryvek z textu sdíleli s následovníky služby Twitter. Je to skvělý způsob, jak řídit provoz na vašich stránkách a podporovat více sociálních podílů.

Chcete-li tento efekt na svých stránkách replikovat, zkuste to InlineTweet.js. To vám ušetří hodiny nastavení času přidáním této funkce přímo na vaši stránku.

Tento bezplatný JavaScript plugin je super snadná instalace a dokonce má zdarma WordPress plugin pokud dáváte přednost této trase.

To nevyžaduje žádné závislosti JavaScriptu, takže můžete spustit tento sans-jQuery.

Veškerý obsah funguje přímo prostřednictvím datových atributů, takže byste je nastavili po jednom na základě svého obsahu. Samozřejmě, že WordPress plugin je to mnohem jednodušší, takže pokud dáváte přednost větší kontrolu, je to skvělá volba.

Na stránce hlavního skriptu najdete pár kousků kódu demonstruje, jak to funguje.

Stačí jen zahrnout JS skript do vaší stránky a zkopírovat některé CSS do vašeho stylu (pouze 3 bloky). Odtud můžete připojit HTML kódy takhle:

  Lorem Khaled Ipsum je klíčem k úspěchu  

pouze požadovaná položka tady je vrchol data-inline-tweet atribut. To je jediná věc, kterou potřebujete k tomu, abyste získali efekt, vše ostatní je volitelné.

Ale tyto další možnosti dělají rozdíl, protože oni přidejte funkce do automaticky generovaného tweetu:

• Data-inline-tweet-via - přidá @mention do tweetu
• Data-inline-tweet-tagy - připojuje značky ke tweetu (pokud je zde místnost)
• Data-inline-tweet-url - obsahuje ve vašem tweetu URL pro kliknutí

Nastavení může být obtížné, což je důvod, proč doporučuji používat plugin WordPress, pokud můžete.

Ale to není všechno tak špatné, když jen zkopírujete / vložíte obsah na jakýkoliv text, který chcete tweetable. A pro volný plugin je tato věc velmi lehká.

Podívejte se na demo stránku a podívejte se na repo GitHub, pokud se chcete dozvědět více.