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

Автор: admin Категория: Школа компьютерной грамотности, Эффективный Блог

Привет всем!

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

Как то раз увидел такой вот набор на блоге Петра Александрова и мне сие дико понравилось. Правда дизайн у него сейчас “испортился” и так было понравившегося мне набора кнопочек там теперь нет, точнее есть, но их всего четыре и они маленькие :(

Мне, кстати, прежний дизайн “от Петра” больше нравился, привык наверно…

СпрОсите, чего мне так понравились эти кнопки? Отвечаю: Ну вдруг кто-нибудь захочет подружиться со мной, а лезть на страницу контактов лень, да и не все данные там указаны. А тут прямо на глазах “вот Вам пожалуйста” и “будьте любезны” – все социальные контакты. … Да и вообще, красиваиии оне :)

Итак, приступим.

Для начала нужно собрать “до кучи” все Ваши социальные аккаунты и тем самым определить какие именно кнопки понадобятся. У меня же, включая QR-код и RSS-подписку, набралось цельных 10 штук.

Теперь открываем поиск Гугл по картинкам и начинаем делать подборку картинок. Я себе искал кнопки размером 48х48, некоторые пришлось подгонять, в этом нелёгком труде мне помог Microsoft Office Picture Manager. Мой архив кнопок можно забрать здесь: нажать тут.

Далее всё, как всегда, просто.

Открываем для редактирования файлик sidebar.php из активной темы Вашего блога.

Будет лучше если для этого процесса используете Notepad++.

Чтобы не утомлять вас сразу же приведу весь код. Можете его скопировать и отредактировать.
Код вставляется перед вот такой строчкой:

<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(1) ) : else : ?>

Теперь непосредственно сам код:

<table width="100%" border="0">
<tr>
<td>
<h2 align="center">Подписка на обновления</h2>
</td>
</tr>
 
<tr>
<td>
<a rel="simplebox" href="http://lammax.ru/wp-content/uploads/2012/03/QR/QR.png"><img class="size-full wp-image-702 aligncenter" title="QR-код блога" src="http://lammax.ru/wp-content/uploads/2012/03/QR/QR.png" alt="" width="48" height="48" /></a>
<a href="http://feeds.feedburner.com/lammax/QbTh" title="RSS рассылка" target="_blank" rel="nofollow" type="application/rss+xml"><img src="./wp-includes/images/Social/RSS_48.png" alt="" style="border:0"/></a>
<a href="http://twitter.com/#!/Lammax2012" title="Твиттер" target="_blank" rel="nofollow"><img src="./wp-includes/images/Social/t.png" alt="" style="border:0"/></a>
<a href="http://www.facebook.com/Lammax777" title="Facebook" target="_blank" rel="nofollow"><img src="./wp-includes/images/Social/fb.png" alt="" style="border:0"/></a>
<a href="http://plus.google.com/u/0/110924668263737885070" title="Google+" target="_blank" rel="nofollow"><img src="./wp-includes/images/Social/g_plus_48.jpg" alt="" style="border:0"/></a>
</td>
</tr>
 
<tr>
<td>
<a href="http://vk.com/id4048110" title="ВКонтакте" target="_blank" rel="nofollow"><img src="./wp-includes/images/Social/vk.png" alt="" style="border:0"/></a>
<a href="http://www.odnoklassniki.ru/profile/532836946955" title="Одноклассники" target="_blank" rel="nofollow"><img src="./wp-includes/images/Social/ok.png" alt="" style="border:0"/></a>
<a href="http://lamansky.moikrug.ru" title="Мой Круг" target="_blank" rel="nofollow"><img src="./wp-includes/images/Social/m-k.png" alt="" style="border:0"/></a>
<a href="http://my.mail.ru/mail/lammax/" title="Мой Мир" target="_blank" rel="nofollow"><img src="./wp-includes/images/Social/m-r.png" alt="" style="border:0"/></a>
<a href="http://lammax.ya.ru/" title="Я.Ру" target="_blank" rel="nofollow"><img src="./wp-includes/images/Social/yaru.png" alt="" style="border:0"/></a>
</td>
</tr>
 
</table>

Обязательно вставьте ссылки на свои аккаунты в социальных сетях и на свои картинки, RSS это тоже касается. А то ваши посетители будут попадать ко мне =)

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

<h2 align="center">Подписка на обновления</h2>
 
<a rel="simplebox" href="http://lammax.ru/wp-content/uploads/2012/03/QR/QR.png"><img class="size-full wp-image-702 aligncenter" title="QR-код блога" src="http://lammax.ru/wp-content/uploads/2012/03/QR/QR.png" alt="" width="48" height="48" /></a>
<a href="http://feeds.feedburner.com/lammax/QbTh" title="RSS рассылка" target="_blank" rel="nofollow" type="application/rss+xml"><img src="./wp-includes/images/Social/RSS_48.png" alt="" style="border:0"/></a>
<a href="http://twitter.com/#!/Lammax2012" title="Твиттер" target="_blank" rel="nofollow"><img src="./wp-includes/images/Social/t.png" alt="" style="border:0"/></a>
<a href="http://www.facebook.com/Lammax777" title="Facebook" target="_blank" rel="nofollow"><img src="./wp-includes/images/Social/fb.png" alt="" style="border:0"/></a>
<a href="http://plus.google.com/u/0/110924668263737885070" title="Google+" target="_blank" rel="nofollow"><img src="./wp-includes/images/Social/g_plus_48.jpg" alt="" style="border:0"/></a>
<br>
<a href="http://vk.com/id4048110" title="ВКонтакте" target="_blank" rel="nofollow"><img src="./wp-includes/images/Social/vk.png" alt="" style="border:0"/></a>
<a href="http://www.odnoklassniki.ru/profile/532836946955" title="Одноклассники" target="_blank" rel="nofollow"><img src="./wp-includes/images/Social/ok.png" alt="" style="border:0"/></a>
<a href="http://lamansky.moikrug.ru" title="Мой Круг" target="_blank" rel="nofollow"><img src="./wp-includes/images/Social/m-k.png" alt="" style="border:0"/></a>
<a href="http://my.mail.ru/mail/lammax/" title="Мой Мир" target="_blank" rel="nofollow"><img src="./wp-includes/images/Social/m-r.png" alt="" style="border:0"/></a>
<a href="http://lammax.ya.ru/" title="Я.Ру" target="_blank" rel="nofollow"><img src="./wp-includes/images/Social/yaru.png" alt="" style="border:0"/></a>

Где <БР> – это переход на новую строчку.

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

Вот собственно и всё. Кому что непонятно, пишите комментарии или письма.

Рекомендую!

Видео в тему


Поделиться


Оставить комментарий