Главная > Скрипты и коды, Социальные сети > Руководство по созданию персональной кнопки Tweet со счетчиком

Руководство по созданию персональной кнопки Tweet со счетчиком


12 апреля 2012, 14:20. Разместил: Design FactoRy
Tweet-кнопки предоставляют отличную возможность поделиться вашим контентом с общественностью. Twitter позволяет без труда использовать кнопки на вашем сайте, но стиль таких кнопок нельзя изменить.

Кнопка обслуживается в тэге iframe, что ограничивает доступ к CSS и javascript. Это исключает возможность настроить кнопку так, чтобы она вписывалась в дизайн сайта. Еще хуже тот факт, что оболочке кнопки можно задать фиксированную ширину, но счетчику внутри нее – нет. После того, как страница начинает получать больше твиттов, и число на счетчике растет, ширина кнопки увеличивается, но, так как, родительский элемент iframe имеет фиксированную ширину, мы не можем узнать фактическую ширину кнопки.

Также может стать проблемой размер (46,5 Кб) widget.js-скрипта, который Twitter предоставляет с кнопкой по умолчанию. Хотя, в большинстве случаев этот скрипт уже должен быть в кэше посетителя.

Руководство по созданию персональной кнопки Tweet со счетчиком

Создание кнопки

По своей сути, создать Tweet-кнопку так же просто, как создать ссылку на создание твита в Twitter с добавлением некоторых параметров URL, задающих текст твита. Но вы, вероятно, захотите отображать количество твитов с вашей страницы, чтобы похвастаться тем, какой популярный и замечательный ваш сайт. Это требует использования API счетчика от Twitter.

API счетчика в настоящее время является «личным» API. Иными словами, это означает, что на него не ссылается ни одна документация для разработчиков от Twitter. Это не значит, что мы не можем получить к нему доступ. URL-адрес легко найти, просматривая widget.js-скрипт.

Причиной объявления API личным является то, что Twitter заботится о масштабировании, но если бы нам пришлось использовать кнопку по умолчанию, мы бы использовали точно такой же API. В этом случае, мы не добавляем никакой дополнительной нагрузки на серверы Twitter, на самом деле мы используем меньше их пропускной способности, так как не скачиваем файл widget.js при каждом посещении.

Итак, давайте перейдем к коду!

HTML-код

<a href="#" class="tweet" data-via="JoelBesada" data-hashtags="cool">
<span class="count">0</span>
<span class="message">Tweet</span>
</a>

В HTML мы можем установить различные опции твита с помощью атрибутов, используя тот же синтаксис, что и при работе с конструктором кнопки Twitter. Атрибут href остается пустым, так как мы будем анализировать атрибуты данных и создавать ссылку на создание твита с помощью javascript.

В моем примере я хочу, чтобы сперва отображался счетчик твитов, а текст "Tweet" при наведении курсора мыши, так что у меня есть два span-элемента.

CSS-кодд

Браузерные префиксы опущены, чтобы минимизировать код CSS.

.tweet {
position: relative;
display: inline-block;
padding: 7px 10px;
width: auto;
min-width: 50px;

text-align: center;
font: 16px Helvetica, Arial, sans-serif;
color: white;
text-shadow: 1px 1px 0 #021D2B;
text-decoration: none;

background: blue;
background-color: #209adb;
background-image: repeating-linear-gradient(-45deg, transparent, transparent 5px, rgba(0,0,0,.1) 5px, rgba(0,0,0,.1) 10px),
linear-gradient(top, #5ab9ed 0%,#209adb 100%);

border: 1px solid #04141C;
border-bottom-width: 3px;
box-shadow: 0 2px 3px rgba(0,0,0,0.1),
inset 0 1px 0 rgba(255,255,255,0.4),
inset 0 0 3px rgba(255,255,255,0.5);

}

/* Twitter icon */
.tweet:before {
content: "";
display: block;
position: absolute;
left: -35px;
top: 7px;
width: 24px;
height: 24px;

/* Base64 PNG icon shortened down to prevent chaos */
background-image:url(data:image/png;base64,iVBORw0KGgo...);

pointer-events: none;
}

/* Extra shadow */
.tweet:after {
content: "";
display: block;
position: absolute;
z-index: -1;
left: 0;
bottom: 20px;
width: 100%;
height: 20px;

box-shadow: 0 26px 10px rgba(0,0,0,0.35);
}

.tweet .count {
position: relative;
z-index: 2;
transition: opacity 0.25s ease-out;
}

.tweet .message {
display: block;
position: absolute;
padding-top: inherit;
top: 0;
left: 0;

width: 100%;
height: 100%;

opacity: 0;
text-align: center;

transition: opacity 0.25s ease-out;
}

.tweet:hover {
animation: bgpos 0.3s infinite linear;
}

.tweet:hover .count {
opacity: 0;
}

.tweet:hover .message {
opacity: 1;
}

.tweet:active {
border-bottom: 1px solid #04141C;
top: 2px;

box-shadow: inset 0 2px 3px rgba(0,0,0,0.7),
0 1px 0 rgba(255,255,255,0.2),
inset 0 0 3px rgba(0,0,0,0.5);

background-image: repeating-linear-gradient(-45deg, transparent, transparent 5px, rgba(0,0,0,.1) 5px, rgba(0,0,0,.1) 10px),
linear-gradient(top, #106491 0%, #106491 100%);
}

.tweet:active:after {
display: none;
}

.tweet:active:before {
top: 5px;
}

@keyframes bgpos {
from { background-position: 0 0; }
to { background-position: 14px 0; }
}

Возможно, в этом CSS-файле я немного вышел за рамки необходимого, но я объясню некоторые особо сложные части прежде, чем перейти к javascript.

Фон создается несколькими градациями, которые разделены запятыми и упорядочены так, что верхний слой задается в первую очередь. Полосатый рисунок создается повторяющейся линейной градацией. Чтобы узнать об этом больше, я рекомендую вам посмотреть замечательную галерею с разными CSS3-паттернами от Lea Verou. Ниже полос находится простая линейная градация между двумя оттенками светло-голубого.

Чтобы создать некоторую глубину кнопки, я использую несколько теней. Эффект сияния и остроты достигается с помощью ярких теней, одной сверху и еще одной по всей границе. Увеличивая размер нижней границы, мы получаем ощущение высоты. Этот эффект также усиливается добавлением еще одной, более широкой, тени под кнопкой с помощью псевдо-элемента :after.

То, что нельзя заметить в рисунке, но очевидно в демо-версии, – циклическая анимация, которая отображается при наведении курсора на кнопку. Изменяя позицию фона, мы создаем стильный эффект перемещения полос по кнопке, появляющийся при наведении курсора. Для этого мы просто задаем начальное и конечное значения позиции фона в аттрибуте @keyframe, подбирая конечное значение так, чтобы анимация выглядела непрерывной.

Для активного состояния (кнопка нажата), затемняем цвет фона, а также устанавливаем несколько темных внутренних теней. Также делаем дополнительную нижнюю границу и тень шириной в один пиксель.

javascript (с использованием jQuery)

var API_URL = "http://cdn.api.twitter.com/1/urls/count.json",
TWEET_URL = "https://twitter.com/intent/tweet";

$(".tweet").each(function() {
var elem = $(this),
// Use current page URL as default link
url = encodeURIComponent(elem.attr("data-url") || document.location.href),
// Use page title as default tweet message
text = elem.attr("data-text") || document.title,
via = elem.attr("data-via") || "",
related = encodeURIComponent(elem.attr("data-related")) || "",
hashtags = encodeURIComponent(elem.attr("data-hashtags")) || "";

// Set href to tweet page
elem.attr({
href: TWEET_URL + "?hashtags=" + hashtags + "&original_referer=" +
encodeURIComponent(document.location.href) + "&related=" + related +
"&source=tweetbutton&text=" + text + "&url=" + url + "&via=" + via,
target: "_blank"
});

// Get count and set it as the inner HTML of .count
$.getJSON(API_URL + "?callback=?&url=" + url, function(data) {
elem.find(".count").html(data.count);
});
});

Я написал код таким образом, чтобы его можно было повторно использовать, так что каждый может легко скопировать и вставить его в свой собственный сайт. Код ищет элементы с классом tweet и использует их атрибуты данных, чтобы сгенерировать ссылку на создание твита с правильными параметрами URL. Если нужных атрибутов нет, по умолчанию в качестве адреса и текста используются соответственный URL-адрес и заголовок текущей страницы. Вы можете использовать конструктор кнопки Twitter для создания различных атрибутов данных для вашей кнопки.

Значение счетчика получаем, отправив запрос GET с набором параметров URL-страницы, для которой хотим получить количество твитов. AJAX-запросы, как правило, запрещены той же политикой источника. Это означает, что мы не можем делать запросы к службам на других доменах. Есть два пути решения: CORS и JSONP.

Тот API, который мы используем, не поддерживает CORS, но у него есть поддержка JSONP. Это означает, что, когда мы устанавливаем callback-параметр, например, для Callme, API будет задавать возвращаемое значение как аргумент callback-функции, типа этого.

Функция jQuery getJSON обрабатывает это автоматически, когда получает URL с callback-параметром, равным «?». Второй аргумент функции getJSON вызывается, когда данные возвращаются, и из них мы можем легко создать HTML-элемент .count.

Demo

В основном, это все, что нужно сделать. Я надеюсь, что вы извлечете пользу из того, что я вам сегодня рассказал. Я создал демо на JSFiddle для того, чтобы все могли посмотреть код в действии. Просто нажмите на кнопку ниже!

* Демо
Вернуться назад