Обложки для журналов
от Yoksel

Дизайны для ЖЖ

Добавляем в ЖЖ кнопки соцсетей

Часто спрашивают как можно добавить в дизайн кнопки со ссылками на аккаунты в соцсетях. Легко!
Многие, кстати, уже сделали себе такие кнопки.
Рассказываю для тех, кто тоже хочет, но пока не знает как : )

Первый способ - самый простой. Если у вас установлен Хамелеон, просто добавьте ссылки в настройках вот на этой странице. Там же можно выбрать вид и расположение кнопок.

Что входит в набор:

- Добавить в друзья
- Rss
- Facebook
- Twitter
- Vk

Вот так выглядят кнопки:

Добавляем в ЖЖ кнопки соцсетей

А вот такими они могут стать, если подключить фантазию и немножко Css:

Добавляем в ЖЖ кнопки соцсетей

Второй способ добавления кнопок немножко сложнее, но имеет кучу преимуществ:

- вы можете добавить кнопки в любой стиль (Expressive, Minimalism и не только)
- вы сами выбираете кнопки - их вид и размер
- вы можете добавить ссылки на любые соцсети, какие только пожелаете

Собственно, суть способа выглядит вот так:

<a href="ССЫЛКА НА АККАУНТ В СОЦСЕТИ"><img src="КАРТИНКА КНОПКИ" border="0"></a>

Вставляете адрес картинки и ссылку на аккаунт, повторяете операцию нужное количество раз, получившийся код вставляете в текстовое поле в сайдбаре либо в верхний пост - вуаля! Кнопки готовы! : )

А теперь подробно и по шагам.

1. Иконки можно найти в гугле или на этих сайтах:

http://iconfinder.com/
http://findicons.com/
http://www.iconsearch.ru/

Преимущество сайтов состоит в возможности выбирать цвет и размер иконок, а также находить сразу готовые сеты - все нужные вам иконки, отрисованные в одном стиле.

Найденные иконки сохраните себе на комп.

2. Залейте картинки в сеть

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

Заливаете, берете адрес изображения, вставляете в код.

Как c яндекса взять правильную ссылку на картинку:

Под картинкой ссылка Другие размеры.
Кликаете, в выпадающем списке есть пункт Оригинал - эта ваша картинка в том размере, в котором вы её залили.
Кликните правой кнопкой и скопируйте адрес ссылки. Либо кликните по надписи, и на открывшейся странице скопируйте ссылку из адресной строки браузера.

Добавляем в ЖЖ кнопки соцсетей

3. Получаем код:

<a href="ССЫЛКА НА АККАУНТ В СОЦСЕТИ"><img src="КАРТИНКА КНОПКИ" border="0"></a>

Вставьте ссылку на вашу картинку вместо надписи КАРТИНКА КНОПКИ, а также вставьте адрес аккаунта в соцсетях.

Кнопка готова : )
Таким же образом сделайте остальные кнопки.

Получается вот такое (ссылки только для примера):



иконки найдены на http://www.iconsearch.ru/

Дополнительные опции:

- заполните alt и title. title нужен, чтобы по наведению на иконку появлялась подсказка, а alt - это текст, который появится, если иконка не загрузилась.
- добавьте target="_blank", чтобы ссылка открывалась в новом окне

Пример кода c дополнениями:

<a href="https://twitter.com/yoksel" title="Twitter" target="_blank"><img src="КАРТИНКА КНОПКИ" border="0" alt="Twitter"></a>


4. Вставьте код в текстовое поле в настройках сайдбара либо в верхний пост.

ВАЖНО: чтобы картинки встали рядом, а не столбиком, удалите из кода все переносы.

Сохраните, посмотрите то получается.



Пробуйте и хвастайтесь тем, что получилось у вас : )

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

Более сложный способ - вставить свои ссылки вместо твиттера и фейсбука, а потом переопределить в стилях картинки кнопок. Таким образом можно добавить только 3 свои ссылки

Edited at 2013-07-05 10:28 (UTC)
Rss - это поток ваших записей в текстовом виде. На этот поток можно подписаться, чтобы читать его в Rss-читалках, например, в ЯндексПодписках.
В потоке видны только публичные записи пользователя, так что это не заменяет френдленту
Вопрос.
Дорогая Yoksel! Получилось вот что – НИЧЕГО.
Что сделала:
1.Заполнила по Вашему шаблону информацию для соц. Сетей (адреса и ссылки на картинки).
2. В ЖЖ – Стиль журнала, настроить свой стиль, SIDEBARS, Body of custom sidebar module – сюда все и скопировала.
3. Сохранила. Подождала 30 минут.
Наверно, в не то поле записала?

Странность
Спасибо, очень здорово получилось! Если отображается... Но вот почему-то на другом компе вместо картинки - символический значок неотображающегося рисунка, хотя сама ссылка работает. И там и там - Хром стоит. В чем может быть проблема?
Re: Странность
судя по всему картинка или сама под паролем, или лежит в запароленном альбоме
проверьте, что картинка доступна для всех. Возможно, придется ещё раз взять ссылку на изображение, потому что для картинок под паролем они другие
?

Log in

No account? Create an account