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

Как сделать панель с социальными кнопками | n-wp.ru
Инструкция, показывающая, как самостоятельно, без использования дополнительных плагинов, создать панель с социальными кнопками.
👍 Научим бесплатно правильно создавать сайты на WordPress. Подробнее →

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

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

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

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, и вместо того, чтобы вставлять код каждый раз целиком, использовать вставку этого файла в нужном месте:


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

Создай свой первый сайт на WordPress

tiaurus

Автор n-wp.ru — блога о WordPress для новичков.

Оцените автора
Добавить комментарий

  1. nikola

    Спасибо…!

    Ответить
    1. Пожалуйста!

      Ответить
  2. Sk8er

    У тебя на кнопочке с фейсбуком подсветка не пашет :)
    А за способ спасибо, упру к себе)

    Ответить
    1. Спасибо, исправлено.

      Ответить
  3. openid.yandex.ru/traktorilla…

    Спасибо!

    Ответить
    1. Пожалуйста! Пользуйтесь.

      Ответить
  4. Дмитрий

    Спасибо, очень классно реализовал!

    Ответить
  5. CaptainMoney

    Нажатие на кнопку Твиттера не добавляет новость в Твиттер, только переход на главную страницу.

    Ответить
  6. tvenjoy

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

    Ответить
  7. zetrider

    Спасибо полезно!
    p.s.
    to tiaurus

    UPDATE wp_posts
    SET post_content = REPLACE (post_content, '[code inline="yes" lang="php"]', '< code lang="php">') 
    Ответить