Продолжаю отвечать на письма. В прошлом посте я рассказал, как сделать продвинутую форму комментирования, используя материалы этого блога, а сейчас расскажу, как сделать панель с кнопками на социальные сервисы и закладки, о которой меня тоже спрашивали в одном из писем. Почему я пишу об этом посты, а не отвечаю лично? Потому что лучше один раз написать об этом всем, чем каждый раз отвечать одно и то же каждому. Надеюсь, что мой опыт пригодиться еще кому-нибудь.
Кстати, я уже писал, как добавить ссылки на социальные закладки и сервисы в посте Социализация блога – можете почерпнуть информацию из него. Для остальных показываю рецепт быстрого приготовления панели с кнопками социальных закладок.
1. Для начала открываем файл single.php, и находим в нём строчку, содержащую [code inline=”yes” lang=”php”] – это функция вывода содержимого поста. Вот после нее и нужно вывести кнопки.
2. Для того, чтобы кнопки не разбрелись по странице, я использовал старинный, но действенный способ – заключил их в таблицу, жестко распределив по ячейкам. Привожу пример такой таблицы со всеми ссылками, подписями и оформлением:
<table cellpadding="0" cellspacing="0"><tr> <td align="right" valign="center" style="margin:0;padding:0"> <span style="border-right:#eee 1px solid;margin-right:5px;padding-right:5px">Подписаться</span></td> <td valign="center" align="left" style="margin:0;padding:0"> <span style="text-align:left"> </span> </td> <td align="right" valign="center" style="margin:0;padding:0"> <span style="border-right:#eee 1px solid;margin-right:5px;padding-right:5px">Запомнить</span></td> <td valign="center" align="left" style="margin:0;padding:0"> <span style="text-align:left"> <a class="browser-bookmarks" title="Добавить в Избранное браузера" rel="sidebar nofollow" href=""></a> <a class="google-bookmarks" rel="nofollow" target="_blank" href="http://www.google.com/bookmarks/mark?op=add&bkmk=&title=" title="Добавить в Google Bookmarks"></a> <a class="delicious-bookmarks" rel="nofollow" target="_blank" href="http://del.icio.us/post?url=&title=" title="Добавить в Delicious"></a> <a class="yandex-bookmarks" rel="nofollow" href="http://zakladki.yandex.ru/userarea/links/addfromfav.asp?bAddLink_x=1&lurl=&lname=;" title="Добавить в Яндекс.Закладки"></a> </span> </td> <td align="right" valign="center" style="margin:0;padding:0"> <span style="border-right:#eee 1px solid;margin-right:5px;padding-right:5px">Поделиться</span></td> <td align="left" valign="center" style="margin:0;padding:0"> <span style="text-align:left"> <a class="twitter-ad" rel="nofollow" target="_blank" href="http://twitter.com/share?text=&url=" title="Отправить в Twitter"></a> <a class="facebook-ad" rel="nofollow" target="_blank" href="http://www.facebook.com/sharer.php?u=&t=" title="Отправить в Facebook"></a> <a title="Отправить в Вконтакте" class="vkontakte-ad" href="http://vkontakte.ru/share.php?url=" target="_blank" rel="nofollow"></a> <a title="Отправить в LiveJournal" class="livejournal-ad" target="_blank" rel="nofollow" href="http://www.livejournal.com/update.bml?event=&subject=" ></a> <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> <a title="Отправить в Мой Мир Mail.ru" class="mailru-ad" target="_blank" rel="nofollow" href="http://connect.mail.ru/share?share_url="></a> </span> </td> </span> </tr></table>
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, и вместо того, чтобы вставлять код каждый раз целиком, использовать вставку этого файла в нужном месте:
Пользуйтесь!
Спасибо…!
Пожалуйста!
У тебя на кнопочке с фейсбуком подсветка не пашет :)
А за способ спасибо, упру к себе)
Спасибо, исправлено.
Спасибо!
Пожалуйста! Пользуйтесь.
Спасибо, очень классно реализовал!
Нажатие на кнопку Твиттера не добавляет новость в Твиттер, только переход на главную страницу.
а как сделать так чтобы при нажатии она соц окно открывалось в маленьком окошке а не в новом
и можно ли изменить картинку которая берется для заметки
Спасибо полезно!
p.s.
to tiaurus –