Найти на сайте

В который раз - социальные кнопки [дизайн]

+37
2.62K
  2. Блоги
  3. В который раз - социальные кнопки [дизайн]
Доброго времени суток.

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

Вот так выглядят мои:
Иллюстрация


При hover они становятся из серых цветными.

Расшариваем в Твиттер, Вконтакте, Facebook, Google+, Мой Мир, MySpace, LiveJournal, Sirfingbird, Одноклассники.
Может еще что-нибудь добавлю (покопайтесь в коде и поймите, что да как, и тогда сами добавляйте), может уберу. Не суть. Главное — стиль всех кнопок выдержан в одном стиле. Чего, собственно, я и хотел.))

Готовый плагин/хак компоновать лень, расскажу так. Может, кому-то и полезней будет joke

Итак, начнем.
1. Вот эти изображения выкладываем в /images.
2. В сааамый конец templates/_default_/components/com_blog_view_post.tpl, после 
  1. {$tag_bar}
вставляем
  1. {literal}
  2. <script  type="text/javascript">
  3. function asd()
  4. {
  5. window.open("https://twitter.com/intent/tweet?text="+ encodeURIComponent(document.title)+"&url="+encodeURI(location.href),"name","top=200,left=400,toolbar=no,width=600,height=300,location=no,directories=no,resizable=0,menubar=no,status=no");
  6. }
  7.  
  8. function face()
  9. { a=location.href;
  10. b='http://www.facebook.com/sharer/sharer.php?u=';
  11. window.open(b+a,"name","top=200,left=400,toolbar=no,width=700,height=400,resizable=0,menubar=no,status=no");
  12. }
  13. function gogoogle(){
  14. window.open("https://plusone.google.com/_/+1/confirm?hl=ru&url="+location.href+"&title="+encodeURIComponent(document.title),"name","top=200,left=400,toolbar=no,width=700,height=400,resizable=0,menubar=no,status=no");
  15. }
  16. function mai(){
  17. window.open("http://connect.mail.ru/share?url="+location.href,"name","top=200,left=400,toolbar=no,width=700,height=400,resizable=0,menubar=no,status=no");
  18. }
  19. function mysp(){
  20. window.open("http://www.myspace.com/Modules/PostTo/Pages/?u"+location.href+"&t="+document.title,"name","top=200,left=400,toolbar=no,width=700,height=400,resizable=0,menubar=no,status=no");
  21. }
  22. function sb(){
  23. window.open("http://surfingbird.ru/share?url="+location.href+"&title="+document.title,"name","top=200,left=400,toolbar=no,width=700,height=400,resizable=0,menubar=no,status=no");
  24. }
  25. </script>
  26. {/literal}
  27. <center>
  28. <table>
  29. <tr>
  30. <td>
  31. <div id="twitt" >
  32. <a  onclick="asd()" data-via="Kesha_Pudelev" data-lang="ru" data-size="large" data-related="Kesha_Pudelev" data-hashtags="bymind" >
  33. <img src="/images/0.png" >
  34. </a>	
  35. </div>
  36. </td>
  37. <td>
  38. <div id="vkon" >
  39. {literal}
  40. <script type="text/javascript" src="http://vk.com/js/api/share.js?11" charset="windows-1251">
  41. </script>
  42. <script type="text/javascript">
  43. document.write(VK.Share.button(false,{type: "custom", text: "<img src=\"/images/0.png?1\"  />"}));
  44.  
  45. </script>
  46. {/literal}
  47. </div>
  48. </td>
  49. <td><div id="faceb">
  50. <a  onclick="face()" >
  51. <img src="/images/0.png" >
  52. </a>
  53. </div>
  54. </td>
  55. <td>
  56. <div id="goog">
  57. <a  onclick="gogoogle()">
  58. <img src="/images/0.png">
  59. </a>
  60. </div>
  61. </td>
  62. <td>
  63. <div id="mail">
  64. <a onclick="mai()"  >
  65. <img src="/images/0.png" >
  66. </a>
  67. <script src="http://cdn.connect.mail.ru/js/loader.js" type="text/javascript" charset="UTF-8"></script>
  68. </div>
  69. </td>
  70. <td>
  71. <div id="mysp">
  72. <a onclick="mysp()"  >
  73. <img src="/images/0.png">
  74. </a>
  75. </div>
  76. </td>
  77. <td>
  78. <div id="lj">
  79. <a href="{literal}javascript:void((function(){var%20u='http://www.livejournal.com/',w=window.open('','','toolbar=0,resizable=1,scrollbars=1,status=1,width=730,height=500');if(window.LJ_bookmarklet){return%20LJ_bookmarklet(w,u)};var%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.onload=function(){LJ_bookmarklet(w,u)};e.setAttribute('src',u+'js/bookmarklet.js');document.getElementsByTagName('head').item(0).appendChild(e)})()){/literal}">
  80. <img src="/images/0.png">
  81. </a>
  82. </div>
  83. </td>
  84. <td>
  85. <div id="sb">
  86. <a onclick="sb()"  >
  87. <img src="/images/0.png" >
  88. </a>
  89. </div>
  90. </td>
  91. <td>
  92. <div id="klass">
  93. <a href="{literal}javascript:void((function(){
  94. window.open('http://www.odnoklassniki.ru/dk?st.cmd=addShare&st._surl='+location.href,'name','top=200,left=400,toolbar=no,width=700,height=400,resizable=0,menubar=no,status=no');
  95. })()){/literal}" ><img src="/images/0.png" ></a>
  96.  </div>
  97. </td>
  98. </tr>
  99. </table>
  100. </center>
3. Теперь нам нужны стили для всего этого дела. Не претендую на предельную грамотность, но мой вариант работает везде*, кроме, SeaMonkey и, естественно, IE — там иконки с серой на цветную меняются мгновенно.

*Везде = Chrome, Opera, Safari, FireFox. laugh

Итак, стили (можно добавить в /templates/_default_/css/styles.css) :
  1.  
  2. #twitt{
  3. opacity:0.7;
  4. width:40px;
  5. height:40px;
  6. background:url(/images/21.png) left top no-repeat;
  7. -webkit-transition-property: opacity;
  8. -webkit-transition-duration: 600ms;
  9. -o-transition-property: opacity;
  10. -o-transition-duration: 600ms;
  11. -moz-transition-property: opacity;
  12. -moz-transition-duration: 600ms;
  13. }
  14. #twitt:hover{
  15. opacity:1;
  16. background:url(/images/21.png) -40px top no-repeat;
  17. }
  18. #klass{
  19. opacity:0.4;
  20. width:40px;
  21. height:40px;
  22. background:url(/images/klass.png) -40px top no-repeat;
  23. -webkit-transition-property: opacity;
  24. -webkit-transition-duration: 600ms;
  25. -o-transition-property: opacity;
  26. -o-transition-duration: 600ms;
  27. -moz-transition-property: opacity;
  28. -moz-transition-duration: 600ms;
  29. }
  30. #klass:hover{
  31. opacity:1;
  32. background:url(/images/klass.png) left top no-repeat;
  33. }
  34. #sb{
  35. opacity:0.7;
  36. width:40px;
  37. height:40px;
  38. background:url(/images/sb.png) left 0px no-repeat;
  39. -webkit-transition-property: opacity;
  40. -webkit-transition-duration: 600ms;
  41. -o-transition-property: opacity;
  42. -o-transition-duration: 600ms;
  43. -moz-transition-property: opacity;
  44. -moz-transition-duration: 600ms;
  45. }
  46. #sb:hover{
  47. opacity:1;
  48. background:url(/images/sb.png) -40px 0px no-repeat;
  49. }
  50. #vkon{
  51. opacity:0.5;
  52. width:40px;
  53. height:40px;
  54. background:url(/images/11.png) left top no-repeat;
  55. -webkit-transition-property: opacity;
  56. -webkit-transition-duration: 600ms;
  57. -o-transition-property: opacity;
  58. -o-transition-duration: 600ms;
  59. -moz-transition-property: opacity;
  60. -moz-transition-duration: 600ms;
  61. }
  62. #vkon:hover{
  63. opacity:1;
  64. background:url(/images/11.png) -40px top no-repeat;
  65. }
  66. #mysp{
  67. opacity:0.4;
  68. width:40px;
  69. height:40px;
  70. background:url(/images/myspace.png) left -1px no-repeat;
  71. -webkit-transition-property: opacity;
  72. -webkit-transition-duration: 600ms;
  73. -o-transition-property: opacity;
  74. -o-transition-duration: 600ms;
  75. -moz-transition-property: opacity;
  76. -moz-transition-duration: 600ms;
  77. }
  78. #mysp:hover{
  79. opacity:1;
  80. background:url(/images/myspace.png) -40px -1px no-repeat;
  81. }
  82. #faceb{
  83. opacity:0.5;
  84. width:40px;
  85. height:40px;
  86. background:url(/images/31.png) left top no-repeat;
  87. -webkit-transition-property: opacity;
  88. -webkit-transition-duration: 600ms;
  89. -o-transition-property: opacity;
  90. -o-transition-duration: 600ms;
  91. -moz-transition-property: opacity;
  92. -moz-transition-duration: 600ms;
  93. }
  94. #faceb:hover{
  95. opacity:1;
  96. background:url(/images/31.png) -40px top no-repeat;
  97. }
  98. #lj{
  99. opacity:0.5;
  100. width:40px;
  101. height:40px;
  102. background:url(/images/lj.png) left top no-repeat;
  103. -webkit-transition-property: opacity;
  104. -webkit-transition-duration: 600ms;
  105. -o-transition-property: opacity;
  106. -o-transition-duration: 600ms;
  107. -moz-transition-property: opacity;
  108. -moz-transition-duration: 600ms;
  109. }
  110. #lj:hover{
  111. opacity:1;
  112. background:url(/images/lj.png) -40px top no-repeat;
  113. }
  114. #goog{
  115. opacity:0.3;
  116. width:40px;
  117. height:40px;
  118. background:url(/images/41.png) left -1px no-repeat;
  119. -webkit-transition-property: opacity;
  120. -webkit-transition-duration: 600ms;
  121. -o-transition-property: opacity;
  122. -o-transition-duration: 600ms;
  123. -moz-transition-property: opacity;
  124. -moz-transition-duration: 600ms;
  125. }
  126. #goog:hover{
  127. opacity:1;
  128. background:url(/images/41.png) -40px -1px no-repeat;
  129. }
  130. #mail{
  131. opacity:0.45;
  132. width:40px;
  133. height:40px;
  134. background:url(/images/mail.png) left 0px no-repeat;
  135. -webkit-transition-property: opacity;
  136. -webkit-transition-duration: 600ms;
  137. -o-transition-property: opacity;
  138. -o-transition-duration: 600ms;
  139. -moz-transition-property: opacity;
  140. -moz-transition-duration: 600ms;
  141. }
  142. #mail:hover{
  143. opacity:1;
  144. background:url(/images/mail.png) -40px 0px no-repeat;
  145. }
  146.  
Всем спасибо, все свободны))

Кто первый поставит, напишите, как встало. А то боюсь, как бы я не забыл чего..

З.Ы. Поиграться с кнопочками можно, например, тут. Демо
Звук для p_newmessage от SJen (одно сообщение - один звук)
К теме о георгиевских ленточках
дизайнкнопка социальных сетейсоциальные
+1
Алексей Алексей 12 лет назад #
+ кому то понадобится, Вот кто нибудь лучше изобрел бы типо своей кнопки для статусов или альбомов и т.д "МНЕ НРАВИТСЯ" ИЛИ "КЛЁВО" =)
+1
ByMind ByMind 12 лет назад #
согласен
надо заняться этим
все хотят высказать свое мнение, а вот писать многим лень))
+1
Алексей Алексей 12 лет назад #
Ждем с нетерпением. =)
0
Роман Роман 12 лет назад #
+ в корзинку :)
возьму на вооружение
0
Amurland Amurland 12 лет назад #
поставил. на опере полёт нормальный. в других попробую чуть позже.

спасибо!
0
Джехутимери Джехутимери 12 лет назад #
Спасибо smile

+

0
st.Puh st.Puh 12 лет назад #
Спасибо,клас.
0
Finder Finder 12 лет назад #
А чтобы в статьях (объявлениях, каталоге, карте) ... по аналогии? Не подскажете чайнику пути, чтобы не напартачить чего, а то после обновления движка, Яндекс.Поделиться слетели, а заново их ставить нехоца (такое ощущение, что теперь во всем интернете только я-кнопки, даже на гос.сайтах).
Ваши лучше +:)
0
Finder Finder 12 лет назад #
картинки нужно ложить в /public_html/templates/_default_/images а то я вначале положил в /images, не сработало, кнопки были невидимыми, теперь все ок :)
0
Finder Finder 12 лет назад #
В объявлениях правил /public_html/templates/_default_/components/com_board_item, в конце файла нельзя, иначе кнопки будут после комментариев, вставил перед <div class="bd_links">{if $user_id}
вот что вышло:
0
Finder Finder 12 лет назад #
"... а почему бы не поговорить с умным человеком?"

В картах правил com_inmaps_item, вставку сделал в конце как и в случае с блогами, получилось здорово. Еще раз спасибо аутору.
0
Finder Finder 12 лет назад #
заметка для таких же чайников как и я, перед правкой файла, переименуйте подлинник файла.
0
ByMind ByMind 12 лет назад #
вообще-то странно
в стилях-то адреса картинок прописаны как, например, "/images/11.png", это значит "http://site.ru" + "/images/11.png"
вот если б было "../images/11.png", то тогда да, на 1 уровень наверх(выходим в папку "_default_") и ищем папку images.

у меня картинки лежат в корневой /images
и все работает
0
• Mike • • Mike • 12 лет назад #
если в styles.css прописываетe? то путь вычисляется от нее т.е., если, заливали иконки не в корень /images а в /template/_default_/images например то и прописано должно быть url(../images/***
0
ByMind ByMind 12 лет назад #
нутк я о том же
если Finder ставил данные мной стили в styles.css то картинки должны лежать в корневой /images
0
Finder Finder 12 лет назад #
кстати, второй раз на другом сайте, та же песня, пока не закинул иконки в картинки шаблона, ничего не работало, делаю все по инструкции smile хорошо нашел эту тему и прочитал свои комменты :)
0
oscar oscar 12 лет назад #
Сделал в статье: компонент com_content_read.tpl после
Код PHP:
{* ================ Теги статьи =============================== *}
{if $article.showtags}
	{$tagbar}
вставляйте код .
Результат тут
0
oscar oscar 12 лет назад #
Да автору респект ..... ЗЫ блин смайлы в мазиле не работают
0
mk727 mk727 12 лет назад #
Не все выводят тэги. Если не используются, то код вставлять после
Код PHP:
{* ================ Теги статьи =============================== *}
{if $article.showtags}
	{$tagbar}
{/if}
+2
ByMind ByMind 12 лет назад #
ребят, как-бы очевидно, что засунуть эти кнопки можно где угодно))
одна лишь разница - при вставке в файл php удалите из этого куска кода все {literal} и {/literal}
0
Helg Helg 12 лет назад #
Подскажите для одаренного программиста. В каком месте styles.css ставить указанный автором код?
0
bondar bondar 12 лет назад #
ставьте в самом конце
0
Helg Helg 12 лет назад #
спс.
0
ByMind ByMind 12 лет назад #
пофигу, где ставить))
главное, не разрывайте уже созданные стили)

Еще от автора

Звук для p_newmessage от SJen (одно сообщение - один звук)

Звук для p_newmessage от SJen (одно сообщение - один звук)

Всем доброго времени суток.
9
К теме о георгиевских ленточках

К теме о георгиевских ленточках

Еще один вариант вставки ленточки. Навеяно этим. Это вариант с прикрепленной ленточкой в левом верхнем углу экрана(при прокрутке остается на экране).
12

InstantCMS Team

Связь с нами
Email dev@instantcms.ru

Делаем полезные Интернет проекты с 2008 года 💫

О проекте

Поддержка

Дополнения

Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.