—»     —»   Руководство по созданию персональной кнопки Tweet со счетчиком
  Раздел: Скрипты и коды, Социальные сети   Комментариев: 1  

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

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 для того, чтобы все могли посмотреть код в действии. Просто нажмите на кнопку ниже!

* Демо
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: Twitter, кнопки, CSS, jQuery, API
Опубликовал Design FactoRy   Прочитано (раз): 8993   |   Оставлено комментариев: 1
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 15 апреля 2012 @ 11:29
Написал: DrShpongle — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Пригодилось!
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц November по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Март 2024    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031