Твитни, прежде чем скачать


Как подстегнуть пользователя к "твиканью" страниц блога?
Очень просто. Нужно выложить что-нибудь интересное для загрузки и сделать так, чтобы ссылка на этот файл стала активной только после того, как посетитель твитнет вашу страничку/пост.

По традиции показываю демо:




Сделай твит
и после этого сможешь загрузить мой супер файл! ТвитнуТь!

Download


Установка в блог.
Изначально для <head></head> нам потребуются:
jQuery (без неё никуда)
jquery.tweetAction.js (положить на свой хостинг!)

Второй скрипт можно вставлять прямо на страницу (не забудьте включить в теги <script></script>), в нём настраиваются:
-- ник в твитере
-- текст твита (то, что умещается в 140 символов)
-- ссылки на пост в блоге и загрузку файла
$(document).ready(function(){



	

	$('#tweetLink').tweetAction({

		text:		'Я твитнул полезную статью',

		url:		'http://ссылка-на-вашу-статью-в-блоге/',

		via:		'fuck_blogspot',

		related:	'fuck_blogspot'

	},function(){

		

		// When the user closes the pop-up window:

		

		$('a.downloadButton')

				.addClass('active')

				.attr('href','http://ссылка-на-загружаемый-файл');



	});

	

});
Этот скрипт использут возможности tweetAction, всплывающего диалогового окна в твиттере.

А также стили к красивой кнопочке (прописать в стили шаблона), которую я русифицировал и положил в пикасу (если ставите на страницу, не забудьте про теги <style></style>):
a.downloadButton{
display:inline-block;
width:187px;
height:69px;
text-indent:-99999px;
overflow:hidden;
background:url('http://1.bp.blogspot.com/-XbLrzYILmXQ/TsDBlC5248I/AAAAAAAAHCo/fuaQbgvucCY/s1600/buttons.png') no-repeat;
cursor:default;
border:none;
text-decoration:none !important;
}

a.downloadButton.active{
background-position:left bottom;
cursor:pointer;
}

Html ссылка для блога.
Выглядит так (на примере демки):
<section id="container-tweet">
<p>
Сделай твит
и после этого сможешь загрузить мой супер файл! <a href="#" id="tweetLink"><b>ТвитнуТь!</b></a></p>
<a href="#" class="downloadButton">Download</a></section>
Для id="container-tweet" можете завести в стилях свой блок и красиво оформить (я поставил центрирование для демо) всю область с кнопкой.

Источник.

6 комментариев:

  1. Есть одно бооольшое НО - пользователь которому эта фишка не понравиться имеет право в твите писать что хочет)) в целях эксперимента ваш твит немного искаверкал, сорри...

    ОтветитьУдалить
  2. Так и должно быть, это же право пользователя.
    Да и скрипт рассчитан на тех, кто залетает на страницу на 1 сек "лишь бы скачать". Хотя бы такой толк будет...
    Используя tweetAction можно интересные штуки накопать.

    ОтветитьУдалить
  3. Есть еще одно большое но, в твиттере в нашей стране не так уж и много людей, лучше под вконтакте такую вещь замутить.

    ОтветитьУдалить
  4. Аудитория у твиттера лучше и народу больше (если учесть, что у многих по 500-1500 подписчиков).

    ОтветитьУдалить
  5. Внимание. Если приведённый код не работает, попробуйте section в открывающем и закрывающем теге изменить на div

    ОтветитьУдалить
  6. Попробуйте новый аналогичный сервис s2d.xeor.ru, только там есть еще facebook

    ОтветитьУдалить