Как сделать панель с социальными кнопками

Как сделать панель с социальными кнопками | n-wp.ru

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

Как сделать панель с социальными кнопками

Кстати, я уже писал, как добавить ссылки на социальные закладки и сервисы в посте Социализация блога – можете почерпнуть информацию из него. Для остальных показываю рецепт быстрого приготовления панели с кнопками социальных закладок.

1. Для начала открываем файл single.php, и находим в нём строчку, содержащую [code inline=”yes” lang=”php”] – это функция вывода содержимого поста. Вот после нее и нужно вывести кнопки.

2. Для того, чтобы кнопки не разбрелись по странице, я использовал старинный, но действенный способ – заключил их в таблицу, жестко распределив по ячейкам. Привожу пример такой таблицы со всеми ссылками, подписями и оформлением:

Подписаться Запомнить <a class="google-bookmarks" rel="nofollow" target="_blank" href="http://www.google.com/bookmarks/mark?op=add&bkmk=&title=" title="Добавить в Google Bookmarks"> <a class="delicious-bookmarks" rel="nofollow" target="_blank" href="http://del.icio.us/post?url=&title=" title="Добавить в Delicious"> <a class="yandex-bookmarks" rel="nofollow" href="http://zakladki.yandex.ru/userarea/links/addfromfav.asp?bAddLink_x=1&lurl=&lname=;" title="Добавить в Яндекс.Закладки"> Поделиться <a class="twitter-ad" rel="nofollow" target="_blank" href="http://twitter.com/share?text=&url=" title="Отправить в Twitter"> <a class="facebook-ad" rel="nofollow" target="_blank" href="http://www.facebook.com/sharer.php?u=&t=" title="Отправить в Facebook"> <a title="Отправить в Вконтакте" class="vkontakte-ad" href="http://vkontakte.ru/share.php?url=" target="_blank" rel="nofollow"> <a title="Отправить в LiveJournal" class="livejournal-ad" target="_blank" rel="nofollow" href="http://www.livejournal.com/update.bml?event=&subject=" > <a title="Отправить в Blogger" class="blogger-ad" target="_blank" rel="nofollow" href="http://www.blogger.com/blog_this.pyra?t&u=&n=&a=ADD_SERVICE_FLAG&passive=true&alinsu=0&aplinsu=0&alwf=true&hl=ru&skipvpage=true&rm=false&showra=1&fpui=2&naui=8"> <a title="Отправить в Мой Мир Mail.ru" class="mailru-ad" target="_blank" rel="nofollow" href="http://connect.mail.ru/share?share_url=">

3. Кнопка – это обычная картинка, за которой скрывается ссылка. Вы можете использовать те, которые использую и я, можете поискать себе что-то другое. Для каждой кнопки я создал класс, определяющий то, как она выглядит, записав все это в style.css. С помощью этого оформления я сделал так, чтобы при наведении курсора на кнопку, она изменяла свою яркость – так более наглядно.

.mail-add, .facebook-page, .twitter-page, .rss-add, .allfav, .browser-bookmarks, .google-bookmarks, .delicious-bookmarks, .yandex-bookmarks, .twitter-ad, .facebook-ad, .vkontakte-ad, .ya-ad, .mailru-ad, .liveinternet-ad, .livejournal-ad, .blogger-ad {opacity:1.0 !important; filter:alpha(opacity=100) !important;zoom: 1;} 
.browser-bookmarks:hover, .google-bookmarks:hover, .delicious-bookmarks:hover, .yandex-bookmarks:hover, .twitter-ad:hover, .facebook-ad:hover, .vkontakte-ad:hover, .ya-ad:hover, .mailru-ad:hover, .liveinternet-ad:hover, .livejournal-ad:hover, .blogger-ad:hover, .rss-add:hover, .allfav:hover, .mail-add:hover, .facebook-page:hover, .twitter-page:hover {opacity:0.8 !important; filter:alpha(opacity=80) !important;zoom: 1;}

По аналогии вы можете расширить эту панель своими кнопками – не бойтесь экспериментировать. Можно записать весь код этой панели в отдельный файл, например, social.php, и вместо того, чтобы вставлять код каждый раз целиком, использовать вставку этого файла в нужном месте:


Пользуйтесь!

Автор tiaurus 2182 Articles
Являюсь создателем n-wp.ru — блога о WordPress для новичков. Мне интересно многое, поэтому еще я сделал 123-box.ru — блог о программах для Windows, и tiaurus.info — блог о красоте.

10 Комментарии

  1. а как сделать так чтобы при нажатии она соц окно открывалось в маленьком окошке а не в новом
    и можно ли изменить картинку которая берется для заметки

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

Ваш электронный адрес не будет опубликован.


*