Dodaj linki Tweetable w treści za pomocą InlineTweet.js

Zobaczysz tę funkcję na dużych stronach, takich jak TechCrunch i Mashable. Przeczytasz artykuł i zauważysz, że całe zdanie jest podświetlony jak link.

Jednak po kliknięciu go otwórz okno ćwierkanie prosząc o udostępnienie tego fragmentu tekstu swoim obserwatorom na Twitterze. To świetny sposób na kieruj ruch do swojej witryny i zachęcić więcej akcji społecznych.

Aby powtórzyć ten efekt na swojej stronie, spróbuj InlineTweet.js. Dzięki temu możesz zaoszczędzić wiele godzin na instalacji, dodając tę ​​funkcję bezpośrednio do strony.

Ta darmowa wtyczka JavaScript jest bardzo łatwa w instalacji, a nawet ma darmowa wtyczka WordPress jeśli wolisz tę trasę.

To nie wymaga żadnych zależności JavaScript, więc możesz uruchomić ten sans-jQuery.

Cała zawartość działa bezpośrednio przez atrybuty danych, więc ustawiłeś je jeden po drugim, w zależności od treści. Oczywiście, wtyczka WordPress czyni to znacznie łatwiejszym, więc jeśli wolisz mieć większą kontrolę, jest to świetna opcja.

Na głównej stronie skryptu znajdziesz kilka fragmentów kodu demonstrując, jak to działa.

Wystarczy dołączyć skrypt JS do swojej strony i skopiować CSS do arkusza stylów (tylko 3 bloki). Stamtąd możesz dołączaj kody HTML lubię to:

  Lorem Khaled Ipsum jest głównym kluczem do sukcesu  

The tylko wymagany przedmiot tutaj jest szczyt data-inline-tweet atrybut. To jedyna rzecz, której potrzebujesz, aby uzyskać efekt, wszystko inne jest opcjonalne.

Ale te dodatkowe opcje mają znaczenie, ponieważ one dodaj funkcje do wygenerowanego automatycznie tweeta:

• Transmisja danych w tweet-via - dodaje @mention do tweeta
• Tagi danych-tweet-inline - dołącza tagi do tweeta (jeśli jest pokój)
• Data-inline-tweet-url - zawiera klikalny adres URL w tweecie

Konfiguracja może być trudna, dlatego polecam używanie wtyczki WordPress, jeśli możesz.

Ale nie jest tak źle, jeśli po prostu skopiujesz / wkleisz zawartość do dowolnego tekstu, który chcesz dodać do tweetera. A dla darmowej wtyczki ta rzecz jest bardzo lekka.

Rzuć okiem na stronę demonstracyjną, aby zobaczyć to w akcji i zajrzyj do repozytorium GitHub, jeśli chcesz dowiedzieć się więcej.