twitter


Социальная активность

Давно хотел сделать страницы в социальных сетях с публикацией статей. Удобный формат потребления контента, если не хочется подписываться через почту.
В твиттере активность постоянная, ссылка.
Также добавились страницы:

Будут не только репосты, но и полезные сборки информации о фронтенде и около этой темы.

facebookСпасибо всем кто меня читает.

Теперь буду писать стабильнее, надеюсь :)

Loginza – социальное комментирование

Буквально недавно я обновил дизайн своего блога, поэтому некоторые вещи пришлось менять. Например, комментирование на блоге теперь осуществляется с помощью плагина loginza. Самые внимательные возможно помнят, что ранее на блоге была система из 3-х комментариев — вконтакте, фейсбука и стандартные комментарии вордпресса.

Как добавить свои социальные кнопки на сайт. Часть 2

В прошлой статье, мы добавляли кнопки социальных сетей на свой сайт. Теперь давайте научимся делать (точнее будет использовать свои или чужие), а затем и добавлять их на сайт. Возможно, Вы уже сами догадываетесь как это сделать :) Самые любопытные могут взглянуть на пример.

Совершенно естественно, если у Вас возник вопрос: А чем данный метод добавления социальных кнопок отличается от предложенного ранее?

Данный метод не использует javascript и/или вообще сторонние скрипты, т.е. увеличение скорости по сравнению с предыдущим методом очевидно. Это, наверное, главное преимущество данного метода. Ну, конечно главным минусом является – отсутствие счетчиков, т.е. визуально Вы не будете знать, сколько раз нажимали на кнопки. Но если подумать, то на некоторые кнопки в принципе не нужны счетчики. За исключением основных (по моему мнению) социальных сетей, о которых я уже писал.

Помимо всего сказанного выше в процессе мы уменьшим количество http запросов картинок кнопок с 6 до 1 с помощью CSS спрайта. А это приводит только к увеличению скорости загрузки Вашего сайта.

Давайте, уже начнем практическую часть, и Вам все станет ясно, т.к. это очень просто.

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

1.Подбор иконок социальных сетей и их добавление

Я решил за основу взять основные  социальные кнопки: twitter, facebook, vkontakte, livejournal, мой мир, google buzz. Если Вам нужны другие кнопки, можете прогуглить необходимые картинки, выбрать из подготовленной статьи или нарисовать самому. Мы же будем работать с данной подборкой.

социальные кнопки

2.Создание CSS спрайта

Выбрав необходимые картинки, у нас в итоге получилось их 7. Надеюсь для удобства Вы их назвали facebook.gif, vkontakte.jpg и т.д. ? Если нет, то тогда сделайте это. Названия картинок будет названием классов в css файле!

Делать CSS спрайт можно и самому, но зачем, если уже все придумано. Тем более, что сделать CSS спрайт самому задача не из легких. Перейди по ссылке на сервис онлайн генератора CSS спрайтов. ru.spritegen.website-performance.org Сервис на русском языке, поэтому особых сложностей быть не должно.

Для начала, заархивируйте все картинки в ZIP архив. Теперь загрузите в онлайн генератор. Все остальные функции на картинке с моими комментариями.

В начале, загрузите ZIP архив. И идем к настройкам.

css-spritecss-sprite социальные кнопки онлайн генератор css-sprite

  1. Выбираем вертикальное или горизонтальное положение. Это зависит от Вашего дизайна блога/сайта. Я выбрал горизонтальное для наших кнопок.
  2. Смещение по горизонтали – это расстояние между кнопками, например ставим 5 px. Внимание необходимо сразу определить расстояние! Данное расстояние затем не изменить! Смещение по вертикали можете не трогать.

Выбираем формат готовой картинки. Доступны PNG, JPG и GIF форматы. Я выбрал GIF формат.

3. Класс для Ваших кнопок. Я удалил, т.е. оставил пустым. Так ка мне необходим формат типа: .fb {}, а не .sprite-fb {}

4. Копируем данные куски кода в Ваш css файл темы. Обычно это style.css в папке css, либо в корневой папке вашей темы.

Вот мой код:

#container {

background: url("images/buttons.gif") no-repeat top left;

height: 20px;

}

.fb{ background-position: 0 0; width: 95px; height: 20px; float:left;margin-right: 5px;}

.google{ background-position: -100px 0; width: 105px; height: 20px;float:left; margin-right: 5px;}

.moimir{ background-position: -210px 0; width: 95px; height: 20px; float:left;margin-right: 5px;}

.twitter{ background-position: -310px 0; width: 95px; height: 20px; float:left;margin-right: 5px;}

.vk{ background-position: -410px 0; width: 95px; height: 20px;float:left; }

Конечно я изменил название картинки, что и Вам советую

В итоге получим такую картинку и добавил float:left; и margin-right: 5px; для обтекания ссылок слева и отступа справа. Далее Вы поймете.

3.      Код добавления социальных кнопок

Теперь займемся добавлением кода социальных кнопок в файл single.php в папке с темой вашего блога wp-content/themes/ваша_тема/ после этого участка:

<?php the_content(); ?>

Т.е. сразу после основного текста.

Приведу сразу коды всех кнопок:

</pre>
<div id="container">









</div>
<pre>

Теперь немного разберемся: <div id=”container“> класс вывода картинки через css.

Ссылка (href=”http://twitter.com/intent/tweet?text=RT @gtalkkz <?php the_title(); ?>: <?php the_permalink(); ?>“) при нажатии на которую, откроется новое окно (target=”_blank”), при на ведении на картинку появится Добавить в twitter.

<?php the_title(); ?> Это текущий заголовок статьи/страницы.

<?php the_permalink(); ?> Текущая ссылка на статью/страницу.

Ссылки являются стандартами добавления информации в социальную сеть.

Думаю, все стало на свои места.

Еще можно вставить <div class=”buttons”>Коды кнопок</div> для красоты внешнего вида кнопок с помощью css.

В принципе это все. Можете посмотреть и порадоваться ;) А вот и живой пример.

с/у УтБ

Используйте для стабильности крупных проектов выделенные сервера, которые отвечают всем современным требованиям.

Сегодня на десерт: Гоночный болид от Яндекс по Астане :)

Как добавить кнопки социальных сетей на свой сайт. Часть 1

         Уфф, на конец написал)) Сегодня практическое занятие и мы будем добавлять на свой сайт социальные кнопки. Мы познакомимся с кнопкой «Tweet», «Мне нравится» от facebook’a, «Нравится» от mail.ru, а также от социальной сети Вконтакте, и новшеством от google – g+. В общем, начнем добавлять социальные кнопки на свой сайт.

facebook

Cервисы коротких ссылок Казнета

Думаю каждый знает, что такое сервис коротких ссылок (можно догадаться по названию:) ) и большинство знает зачем. Открою Вам эту страшную тайну: чаще всего их используют для твиттера, а также проще запоминать, диктовать по телефону, передавать через SMS или размещать в блоге и на сайтах и т.д.
Согласитесь, что ссылка http://8b.kz/utb выглядит удобней, красивее и вообще лучше, чем эта http://www.gtalk.kz/socialnye-seti/kak-ustanovit-kommentarii-vkontakte.html. И самое главное, что результат один :)

Хватит пустых слов.

Приступим к обзору казахстанских сервисов коротких ссылок или url:

1. Первым в списке google нам выдает сервис hop.kz. Кроме главное функции – сокращать, необходимо отметить вкладку Дополнительно: срок действия ссылки – можно выбрать самому и количество раз использования ссылки (только зачем это? Уникальность?:) ) Хостинг отечественный (далее у всех)
hop.kz сервис коротких ссылок

2. Murl.kz следующий кандидат укротителя ссылок. Ничего лишнего – только укрощение. На другом сайте namba.kz в разделе файлы при закачке можно получить укороченную ссылку. Есть дополнения и расширения для браузеров:

Murlex — Расширение для Mozilla Firefox.
ChromoCat — Расширение для Google Chrome.
Murl KDE4 Plasmoid — Плазмоид для KDE4..
TweetDeck — для twitter’a.
Murlify  — Расширение для Safari
Mulini— Виджет для браузера Opera.

Еще никак не могу запомнить название домена, то думаю, что мур, мулр. Хотя звучит конечно красиво – Замурлить :)murl.kzсервис коротких ссылок
3.  o5.kz – сразу подумал это 0,5 или опять?:) Раздражает баннер снизу, а так просто, как и предыдущий вариант сервиса. Кстати, сайт нам предлагает на выбор 2 ссылки: числовую и буквенную. Фишка?!о5.kzсервис коротких ссылок

Ну и как бы google нам на первой странице по Казахстану ничего больше не показал.

4. Вторая страница – Укороти своего зверя :) – сервис 3cm.kz – да, люди не страдают отсутствием чувства юмора. Я вот укоротил))  Отсутствует дополнительные настройки. Но есть: Расширение для браузера Google Chrome, приложение для мобильного с ОС Android и гаджет для сайдбара Windows 7/Vista.
Еще внизу надпись понравилась: Всего укорочено: 242 м 46 см

3cm.kz сервис коротких url

5. Теперь так, что нашел. Sec.kz и такое есть. Сидят на немецком хостинге, имеют регистрацию (зачем?) и все. Можете посмотреть на картинку и хватает.sec.kz сервис коротких url

6. Следующий сервис по укрощению ссылок называется url 2 you с логичным доменом u2u.kz :) Тяжелая картинка на фоне, все, что запомнил.
u2u.kz сервис коротких url

7. Самое интересное в конце – 8b.kz – ресурс, который запомнился. Хоть и дизайн в стиле минимализм, бросается в глаза 3 языка (на других не замечал, имеется казахский!), можно выбрать ссылку самому (!), увидеть свои предыдущие ссылки (и без регистрации) и количество переходов по ней, создать QR код ссылки (!), опубликовать ссылку в твиттере, facebook, vkontakte и написать письмо в gmail’e. Автор Maha Mur – отлично сделал. Ресурс похоже новый домен зарегистрирован  24,06,2011 года. Вначале подумал он был открыт 8 июля, при смене раскладки именно это и выходит. Но оказалось сайт имеет название 8 букв. (количество букв сокращенной версии ссылки)8b.kz сервис коротких ссылок

При поиске выбраны параметры: только Казахстан и казахстанские сайты (в google и yandex соответственно)

Самый длинный домен murl.kz – 4 буквы, а у 8b.kz -всего 2.

В итоге: казахстанские сервисы по сокращению существуют :) Честно признаться не думал, что их наберется столько. Хотя качеством не многие отличаются, но чем богаты, тому и рады. Есть интересные ресурсы. Пользуйтесь на здоровье, развивайте и развивайтесь в правильном направлении!
с/у УтБ

Установка кнопки “Читать” от twitter’a

Сегодня я расскажу Вам о новой кнопик “Читать” от твиттера. Известный микроблоговый сервис Твиттер в наличии имел такие кнопки как «Твитнуть» и «Войти».

Сейчас же есть новая кнопка “Читать” известная в народе как Зафолловить.  Твиттер кнопка добавляется здесь. там же Вы можете прочитать надпись:

Добавьте кнопку «Читать» на ваш веб-сайте, чтобы быть ближе к аудитории и привлечь ещё больше посетителей.

Сложности особой в установке кнопки “Читать” нет. Пройдя по ссылке выбираем параметры  по вкусу: имя пользователя, цвет фона, счетчик читателей, и язык.

Все! Копируем получившийся код и устанавливаем в необходимое место :)

З.Ы. Не забываем зафолловить меня @gtalk.kz