Виджет Twitter для сайта на WordPress и блога на Blogger

(Статья полностью переработана в связи с изменениями на сервисе и вопросами читателей).

О виджете твиттера я уже писала в статье “Как добавить комментарии в виджет от Twitter. Но с некоторых пор заметила, что он перестал отображаться на всех моих блогах, то есть Twitter не стал больше поддерживать старый код.

Что такое Twitter, наверно, знают сейчас уже все. Но не все знают, что Twitter имеет большое значение для продвижения блога, потому что поисковые системы очень хорошо его индексируют.

Как использовать Twitter для продвижения.

1. С помощью соответствующей социальной кнопки отправлять туда ссылки на свои новые статьи.
2. Установить на блоге виджет (гаджет) от этой социальной сети (как это ни странно, но Twitter– это социальная сеть)

Вот вторым пунктом мы сейчас и займемся.

Создание нового виджета Twitter

1. Входим в свой аккаунт Twitter. Если у Вас его еще нет, то советую создать: сложности это не вызовет.
2. Нажимаем на значок шестеренки вверху-справа.
3. Во всплывающем окне жмем на «Настройки».
   

   Создание виджета Твиттера

4. В меню в левом столбце нажимаем «Виджеты» (сейчас это последняя строка в меню).
   

   Создание нового виджета

5. На появившейся вкладочке жмем «Создать новый».
6. И создаем наш виджет.

Здесь объяснять особо нечего, потому что разработчики постарались насколько возможно упростить его создание. Но при этом лишили нас некоторых возможностей для его приукрашивания.

• В первом пункте Вы можете заменить имя пользователя, только непонятно, зачем.
• Далее установить свою высоту, по умолчанию 600 пикселей.
• Выбрать тему: светлая или темная. На образце вы увидите, как выглядит созданный виджет.
• Можете изменить цвет ссылок, если в дизайне Вашего блога заложен не синий, а какой-то другой.
• Все галочки уже установлены по умолчанию, менять не будем.

Посмотрели образец? Устраивает его вид? Тогда можно нажимать на кнопку «Создать виджет».

На следующей странице Вам сообщат, что виджет создан и Вы можете скопировать код и вставить его на блог.

Оформление виджета

Скопируйте этот код, но не спешите вставлять его на блог, а вставьте сначала в текстовый редактор. Я советую Notepad++, но, в крайнем случае, вставьте в обычный Блокнот. Над кодом мы немножко поработаем

Если Вы посмотрите внимательно на код, Вы увидите, что он состоит из двух частей. Первая часть – это ссылка (тег <a), вторая часть  – скрипт (начинается с тега <script>).

Работать будем с первой частью.

Если мы хотим заключить виджет в рамочку, то заключаем код в тег div, то есть перед первой строкой кода напишем такую строку:

Здесь мы написали, что хотим рамку вокруг виджета (border) толщиной 3px, сплошную (solid) и цветом с таким кодом #993633.

Но сам виджет имеет закругленные уголки, поэтому мы тоже их закруглим. Для этого внутрь закрывающих кавычек добавим:

Возможно, Вам придется подвинуть его влево или вправо. Тогда допишем еще такой стиль:

Здесь я двигаю виджет влево на 25 пикселей. Если надо подвинуть вправо, тогда знак минус перед числом не нужен. Число пикселей подберете для себя сами.

То есть, все вместе получится так:

А закрываем тег div после </a>: добавляем </div>. В конце всех манипуляций с кодом я дам Вам его весь в собранном виде, так что не бойтесь запутаться.

Обычно виджет встраивается по ширине в тот блок, куда мы его ставим. Но иногда почему-то этого не происходит. Тогда нужно прописать ему ширину.

Это делаем внутри тега <a перед закрывающей скобкой >.

Вставляем туда width=”195″, обрамляя пробелами. 195 – это у меня ширина виджета в пикселях. Вы поставьте свое число.

Также можно поменять и высоту, если Вы ее не угадали при создании виджета. Тогда рядом с шириной вставьте height=”350″, также отделив пробелами.

Еще несколько возможностей по редактированию виджета

1. Поменять тему с темной на светлую или наоборот. Там же, где вставляли ширину, пропишите:
   
   data-theme="dark" – если меняете светлую на темную data-theme="light" – если наоборот

   1 2	data-theme="dark" – если меняете светлую на темную data-theme="light" – если наоборот

2. Убрать вертикальную полосу прокрутки, которая по умолчанию находится справа:
   
   data-chrome="noscrollbar"

   1	data-chrome="noscrollbar"

3. Поменять цвет ссылок:
   
   data-link-color="#FFA95A"

   1	data-link-color="#FFA95A"

4. Задать свое количество твитов. По умолчанию оно равно 20, Вы можете это количество как уменьшить, так и увеличить:
   
   data-tweet-limit="5"

   1	data-tweet-limit="5"

Все эти атрибуты Вы записываете там же, перед >, подряд, отделяя друг от друга пробелом, порядок не важен, кроме одного: data-chrome=”noscrollbar” должно стоять в списке первым.

Впрочем, чтобы Вы не запутались, вот такой код должен получиться, если Вы внесете все эти изменения (что совсем не обязательно):

Думаю, что это самое важное, что может понадобиться изменить. Но если Вам захочется еще покопаться, и Вы хорошо знаете английский, тогда зайдите сюда и, возможно, что-то найдете ещё, необходимое для Вас.

Вставка кода виджета на сайт

Теперь главное, ради чего мы это делали: вставляем этот код на блог. Обычно такие виджеты вставляются в сайдбар. Как это сделать, я писала в статье Как добавить виджет на сайт WordPress и Как добавить гаджет в блог на Blogger.

У меня получилось вот что (я специально склеила виджеты с блогов WordPressи Blogger– есть небольшие различия только в оформлении рамки):

Теперь о том, что на виджете (гаджете).

В верхней части находится шапка, где мы видим:

• заголовок («Твиты» в WordPress и «Tweets» в Blogger– вот интересное явление, потому что код ставила один и тот же). Если нажать на этот заголовок, то Вы попадете в твиттер, чтобы почитать твиты.
• Кнопка «Читать (Follow)». Нажав на нее, каждый может прямо с блога стать читателем Ваших твитов. А также и Вы, находясь на чужом блоге с таким установленным виджетом, можете стать читателем автора блога в твиттере.

В нижней части находится так называемый подвал (footer), в котором находится только одна кнопка «Отправить твит …» (или то же самое по английски). Если нажать на эту кнопку, то откроется окно, в котором можно сразу написать твит, который уйдет в твиттер-ленту автора блога.

Ну и внутри – лента твитов, которые можно скролить и читать, сколько захочется, потому что после прочтения указанного в виджете количества твитов появляется ссылка «Загрузить еще», нажав на которую получим еще порцию твитов, а потом можно еще и еще…

Кажется, на этом можно ставить точку. Теперь Вы знаете, как создать и установить на блог виджет (гаджет) Twitter.

Это тоже интересно: