Давно хотел сделать страницы в социальных сетях с публикацией статей. Удобный формат потребления контента, если не хочется подписываться через почту.
В твиттере активность постоянная, ссылка.
Также добавились страницы:
Буквально недавно я обновил дизайн своего блога, поэтому некоторые вещи пришлось менять. Например, комментирование на блоге теперь осуществляется с помощью плагина loginza. Самые внимательные возможно помнят, что ранее на блоге была система из 3-х комментариев — вконтакте, фейсбука и стандартные комментарии вордпресса.
В прошлой статье, мы добавляли кнопки социальных сетей на свой сайт. Теперь давайте научимся делать (точнее будет использовать свои или чужие), а затем и добавлять их на сайт. Возможно, Вы уже сами догадываетесь как это сделать Самые любопытные могут взглянуть на пример.
Совершенно естественно, если у Вас возник вопрос: А чем данный метод добавления социальных кнопок отличается от предложенного ранее?
Данный метод не использует javascript и/или вообще сторонние скрипты, т.е. увеличение скорости по сравнению с предыдущим методом очевидно. Это, наверное, главное преимущество данного метода. Ну, конечно главным минусом является – отсутствие счетчиков, т.е. визуально Вы не будете знать, сколько раз нажимали на кнопки. Но если подумать, то на некоторые кнопки в принципе не нужны счетчики. За исключением основных (по моему мнению) социальных сетей, о которых я уже писал.
Помимо всего сказанного выше в процессе мы уменьшим количество http запросов картинок кнопок с 6 до 1 с помощью CSS спрайта. А это приводит только к увеличению скорости загрузки Вашего сайта.
Давайте, уже начнем практическую часть, и Вам все станет ясно, т.к. это очень просто.
Начнем с самих кнопок, точнее с картинок. Для этого я сделал небольшую подборку самых разных иконок, можете пройти и скачать нужное Вам.
1.Подбор иконок социальных сетей и их добавление
Я решил за основу взять основные социальные кнопки: twitter,facebook, vkontakte, livejournal, мой мир, googlebuzz. Если Вам нужны другие кнопки, можете прогуглить необходимые картинки, выбрать из подготовленной статьи или нарисовать самому. Мы же будем работать с данной подборкой.
2.Создание CSS спрайта
Выбрав необходимые картинки, у нас в итоге получилось их 7. Надеюсь для удобства Вы их назвали facebook.gif, vkontakte.jpg и т.д. ? Если нет, то тогда сделайте это. Названия картинок будет названием классов в css файле!
Делать CSS спрайт можно и самому, но зачем, если уже все придумано. Тем более, что сделать CSS спрайт самому задача не из легких. Перейди по ссылке на сервис онлайн генератора CSS спрайтов. ru.spritegen.website-performance.org Сервис на русском языке, поэтому особых сложностей быть не должно.
Для начала, заархивируйте все картинки в ZIP архив. Теперь загрузите в онлайн генератор. Все остальные функции на картинке с моими комментариями.
В начале, загрузите ZIP архив. И идем к настройкам.
Выбираем вертикальное или горизонтальное положение. Это зависит от Вашего дизайна блога/сайта. Я выбрал горизонтальное для наших кнопок.
Смещение по горизонтали – это расстояние между кнопками, например ставим 5 px. Внимание необходимо сразу определить расстояние! Данное расстояние затем не изменить! Смещение по вертикали можете не трогать.
Выбираем формат готовой картинки. Доступны PNG, JPG и GIF форматы. Я выбрал GIF формат.
3. Класс для Ваших кнопок. Я удалил, т.е. оставил пустым. Так ка мне необходим формат типа: .fb {}, а не .sprite-fb {}
4. Копируем данные куски кода в Ваш css файл темы. Обычно это style.css в папке css, либо в корневой папке вашей темы.
Конечно я изменил название картинки, что и Вам советую
В итоге получим такую картинку и добавил float:left; и margin-right: 5px; для обтекания ссылок слева и отступа справа. Далее Вы поймете.
3. Код добавления социальных кнопок
Теперь займемся добавлением кода социальных кнопок в файл single.phpв папке с темой вашего блога wp-content/themes/ваша_тема/ после этого участка:
<?phpthe_content(); ?>
Т.е. сразу после основного текста.
Приведу сразу коды всех кнопок:
</pre>
<div id="container">
</div>
<pre>
Теперь немного разберемся: <divid=”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.
В принципе это все. Можете посмотреть и порадоваться А вот и живой пример.
Уфф, на конец написал)) Сегодня практическое занятие и мы будем добавлять на свой сайт социальные кнопки. Мы познакомимся с кнопкой «Tweet», «Мне нравится» от facebook’a, «Нравится» от mail.ru, а также от социальной сети Вконтакте, и новшеством от google – g+. В общем, начнем добавлять социальные кнопки на свой сайт.
Думаю каждый знает, что такое сервис коротких ссылок (можно догадаться по названию:) ) и большинство знает зачем. Открою Вам эту страшную тайну: чаще всего их используют для твиттера, а также проще запоминать, диктовать по телефону, передавать через SMS или размещать в блоге и на сайтах и т.д.
Согласитесь, что ссылка http://8b.kz/utb выглядит удобней, красивее и вообще лучше, чем эта http://www.gtalk.kz/socialnye-seti/kak-ustanovit-kommentarii-vkontakte.html. И самое главное, что результат один
Хватит пустых слов.
Приступим к обзору казахстанских сервисов коротких ссылок или url:
1. Первым в списке google нам выдает сервис hop.kz. Кроме главное функции – сокращать, необходимо отметить вкладку Дополнительно: срок действия ссылки – можно выбрать самому и количество раз использования ссылки (только зачем это? Уникальность?:) ) Хостинг отечественный (далее у всех)
2. Murl.kz следующий кандидат укротителя ссылок. Ничего лишнего – только укрощение. На другом сайте namba.kz в разделе файлы при закачке можно получить укороченную ссылку. Есть дополнения и расширения для браузеров:
Murlex — Расширение для Mozilla Firefox.
ChromoCat — Расширение для Google Chrome.
Murl KDE4 Plasmoid — Плазмоид для KDE4..
TweetDeck — для twitter’a.
Murlify — Расширение для Safari
Mulini— Виджет для браузера Opera.
Еще никак не могу запомнить название домена, то думаю, что мур, мулр. Хотя звучит конечно красиво – Замурлить
3. o5.kz – сразу подумал это 0,5 или опять?:) Раздражает баннер снизу, а так просто, как и предыдущий вариант сервиса. Кстати, сайт нам предлагает на выбор 2 ссылки: числовую и буквенную. Фишка?!
Ну и как бы google нам на первой странице по Казахстану ничего больше не показал.
4. Вторая страница – Укороти своего зверя – сервис 3cm.kz – да, люди не страдают отсутствием чувства юмора. Я вот укоротил)) Отсутствует дополнительные настройки. Но есть: Расширение для браузера Google Chrome, приложение для мобильного с ОС Android и гаджет для сайдбара Windows 7/Vista.
Еще внизу надпись понравилась: Всего укорочено: 242 м 46 см
5. Теперь так, что нашел. Sec.kz и такое есть. Сидят на немецком хостинге, имеют регистрацию (зачем?) и все. Можете посмотреть на картинку и хватает.
6. Следующий сервис по укрощению ссылок называется url 2 you с логичным доменом u2u.kz Тяжелая картинка на фоне, все, что запомнил.
7. Самое интересное в конце – 8b.kz – ресурс, который запомнился. Хоть и дизайн в стиле минимализм, бросается в глаза 3 языка (на других не замечал, имеется казахский!), можно выбрать ссылку самому (!), увидеть свои предыдущие ссылки (и без регистрации) и количество переходов по ней, создать QR код ссылки (!), опубликовать ссылку в твиттере, facebook, vkontakte и написать письмо в gmail’e. Автор Maha Mur – отлично сделал. Ресурс похоже новый домен зарегистрирован 24,06,2011 года. Вначале подумал он был открыт 8 июля, при смене раскладки именно это и выходит. Но оказалось сайт имеет название 8 букв. (количество букв сокращенной версии ссылки)
При поиске выбраны параметры: только Казахстан и казахстанские сайты (в google и yandex соответственно)
Самый длинный домен murl.kz – 4 буквы, а у 8b.kz -всего 2.
В итоге: казахстанские сервисы по сокращению существуют Честно признаться не думал, что их наберется столько. Хотя качеством не многие отличаются, но чем богаты, тому и рады. Есть интересные ресурсы. Пользуйтесь на здоровье, развивайте и развивайтесь в правильном направлении!
с/у УтБ
Сегодня я расскажу Вам о новой кнопик “Читать” от твиттера. Известный микроблоговый сервис Твиттер в наличии имел такие кнопки как «Твитнуть» и «Войти».
Сейчас же есть новая кнопка “Читать” известная в народе как Зафолловить. Твиттер кнопка добавляется здесь. там же Вы можете прочитать надпись:
Добавьте кнопку «Читать» на ваш веб-сайте, чтобы быть ближе к аудитории и привлечь ещё больше посетителей.
Сложности особой в установке кнопки “Читать” нет. Пройдя по ссылке выбираем параметры по вкусу: имя пользователя, цвет фона, счетчик читателей, и язык.
Все! Копируем получившийся код и устанавливаем в необходимое место