Выезжающие боксы Facebook +Twitter +Вконтакте

+60
2.51K
Данная модификация шаблона (по другому наверное и не назвать) добавляет два выезжающих бокса Facebook и Twitter и Вконтакте.

Демо тут: Перейти

Для того, чтобы установить эти боксы нужно:


Если собираетесь ставить сразу 3 бокса то:

1. Скачать 3 картинки и залить их в ваш_сайт.ру/templates/ваш_шаблон/images

Иллюстрация
Иллюстрация
Иллюстрация

2. Открыть в вашем шаблоне файл styles.css и добавить в самый низ:


  1.  
  2. .twitbox {
  3. float:right;
  4. width:288px;
  5. height:345px;
  6. background: url(../images/twitbox.png) no-repeat !important;
  7. display:block;
  8. right:-250px;
  9. padding:0;
  10. position:fixed;
  11. top: 270px;
  12. z-index:1002;
  13. border-radius:10px;
  14. -moz-border-radius:10px;
  15. -webkit-border-radius:10px;
  16. }
  17. div.twitboxwrap {
  18. margin-top:2px;
  19. margin-left:-5px;
  20. background: #fff;
  21. width:238px;
  22. height:325px;
  23. overflow:hidden;
  24. border-radius:10px;
  25. -moz-border-radius:10px;
  26. -webkit-border-radius:10px;
  27. }
  28. div.twitboxwrap iframe {margin:-1px}
  29.  
  30.  
  31.  
  32.  
  33. .s_likebox {
  34. float:right;
  35. width:288px;
  36. height:345px;
  37. background: url(../images/fbslide.png) no-repeat !important;
  38. display:block;
  39. right:-250px;
  40. padding:0;
  41. position:fixed;
  42. top: 130px;
  43. z-index:1002;
  44. border-radius:10px;
  45. -moz-border-radius:10px;
  46. -webkit-border-radius:10px;
  47. }
  48. div.likeboxwrap {
  49. margin-top:2px;
  50. margin-left:-5px;
  51. background: #fff;
  52. width:238px;
  53. height:325px;
  54. overflow:hidden;
  55. border-radius:10px;
  56. -moz-border-radius:10px;
  57. -webkit-border-radius:10px;
  58. }
  59. div.likeboxwrap iframe {margin:-1px}
  60.  
  61.  
  62. .vkbox {
  63. float:right;
  64. width:288px;
  65. height:345px;
  66. background: url(../images/vk.png) no-repeat !important;
  67. display:block;
  68. right:-250px;
  69. padding:0;
  70. position:fixed;
  71. top: 10px;
  72. z-index:1002;
  73. border-radius:10px;
  74. -moz-border-radius:10px;
  75. -webkit-border-radius:10px;
  76. }
  77. div.vkboxwrap {
  78. margin-top:2px;
  79. margin-left:-5px;
  80. background: #fff;
  81. width:238px;
  82. height:325px;
  83. overflow:hidden;
  84. border-radius:10px;
  85. -moz-border-radius:10px;
  86. -webkit-border-radius:10px;
  87. }
  88. div.vkboxwrap iframe {margin:-1px}
  89.  
3. Добавляем Facebook.

В моем случае я использую Likebox но для этого нужна страница в Facebook, сейчас для примера я использую страницу www.facebook.com/platform разработчиков.
Итак, переходим на страницу developers.facebook.com/docs/plugins/ и выбераем LIkeBox, в настройках ставим как нам нравится, но ширину нужно поставить 250. Нажимаем "Get Code" в окне выбераем "Iframe" код.
Теперь оставим на минуту это окно, и перейдем в наш стиль. Откроем template.php и в самый низ, перед тегом </body> добавим:

  1.  
  2.  
  3. <script type="text/javascript">
  4. jQuery(function (){
  5. jQuery(".s_likebox").hover(function(){
  6. jQuery(".s_likebox").stop(true, false).animate({right:"0"},"medium");
  7. },function(){
  8. jQuery(".s_likebox").stop(true, false).animate({right:"-250"},"medium");
  9. },500);
  10. return false;
  11. });
  12. </script>
  13.  
  14. <div class="s_likebox"><div style="color: rgb(255, 255, 255); padding: 8px 5px 0pt 50px;"><span><div class='likeboxwrap'>[b]СЮДА ВСТАВИТЬ СВОЙ ИФРЕЙМ КОД[/b]</div></span></div></div>
  15.  
  16.  
Теперь перейдите на фейсбук, скопируйте код и вставьте вместо слов"СЮДА ВСТАВИТЬ СВОЙ ИФРЕЙМ КОД"
Все, можете перейти на сайт и посмотреть, что получилось.

4. Добавляем twitter

Для этого переходим по ссылке twitter.com/settings/widgets, входим в аккаунт, настраиваем виджет, прописываем свой доммен в список разрешенных. Внимание! Чтобы твитер влез весь, в настройках виджета поставьте высоту 350. Внизу справа появиться код.
Переходим к нашему шаблону, открываем template.php И в самый конец, перед тегом </body> добавляем:

  1.  
  2.  
  3. <script type="text/javascript">
  4. jQuery(function (){
  5. jQuery(".twitbox").hover(function(){
  6. jQuery(".twitbox").stop(true, false).animate({right:"0"},"medium");
  7. },function(){
  8. jQuery(".twitbox").stop(true, false).animate({right:"-250"},"medium");
  9. },500);
  10. return false;
  11. });
  12. </script>
  13. <div class="twitbox"><div style="color: rgb(255, 255, 255); padding: 8px 5px 0pt 50px;"><span><div class='twitboxwrap'>ЗДЕСЬ ВАШ КОД</div></span></div></div>
  14.  
После чего в твитере копируем код и вставляем.



5. Добавляем Вконтакте[/b]

Переходим на страницу vk.com/developers.php?oid=-1&p=Groups Виджет для сообществ выставляем ширину 250 высота 290. Идем в ваш шаблон открываем template.php и перед тегом </body> вставляем:

  1. <script type="text/javascript">
  2. jQuery(function (){
  3. jQuery(".vkbox").hover(function(){
  4. jQuery(".vkbox").stop(true, false).animate({right:"0"},"medium");
  5. },function(){
  6. jQuery(".vkbox").stop(true, false).animate({right:"-250"},"medium");
  7. },500);
  8. return false;
  9. });
  10. </script>
  11. <div class="vkbox"><div style="color: rgb(255, 255, 255); padding: 8px 5px 0pt 50px;"><span><div class='vkboxwrap'>[b]ЗДЕСЬ КОД ВАШЕГО ВИДЖЕТА[/b]</div></span></div></div>
Копируем код вашего виджета и вставляем. И все готово.

Если вставляем один какой-нибудь бокс незабудьте в файле css атрибут top выставить где-то 130 px

Ну вот, вроде бы нечего не забыл. Модификация на любителя, но может кому пригодится. А так как это моя первая запись, то нужно было с чего-то начинать, не пинайте сильно :)



UPD_3 Все исправленно, удаленно лишнее подключение Квери, все работает, проверил.
0
omarov omarov 9 лет назад #
Можно немного инфы относительно "для чего это? что там выводится?"?)) Заранее спасибо!
+1
artscripts artscripts 9 лет назад #
В Facebook боксе обычно выводят людей которые поставили лайки на вашу страницу (страницу в Facebook)
В твитер бокс ввыводится последнее из аккаунта Твитера. Например если создан аккаунт для городскийх событий в твитере, то там и показывается, все что вы твитнули.
+1
letsgo letsgo 9 лет назад #
Это называется интеграция в социальные сети, но заход не с того бока. Однако сделано симпатично.
+3
artscripts artscripts 9 лет назад #
Можно и так назвать smile Тут как бы на любителя. Задумка была не вставлять банальные блоки плагинов предлогаемые соц сетями, а сделать их немного попривлекательней.
0
Dost Dost 9 лет назад #
Классно сделано!Спасибо+
0
Tagil-Rulit Tagil-Rulit 9 лет назад #
Интерестное решение +, для каких версий движка?
+1
artscripts artscripts 9 лет назад #
К версиям не привязанно, к любой подойдет в принципе.
0
reload reload 9 лет назад #
@iskusatel
)
не кусайтесь сильно) но там вкладка фейсбука перекрывает скрол в твитере!.. и фрейм твитера желательно сделать по высоте блока указанного в ваших стилях, иначе скрол заезжает за блок, ну и всех твитов не увидишь) или сам блок увеличить - хотя если для пантов то и так сойдет - красиво)
0
MiMoHOD MiMoHOD 9 лет назад #
Что до скролла, можно и колесиком пользоваться. Но последний (нижний) в списке твит и правда не видно, надо бы доработать.

@Искус
+ за старания.
+1
artscripts artscripts 9 лет назад #
Чтобы влазили все твиты, в настройках виджета поставьте высоту 350.
+2
artscripts artscripts 9 лет назад #
Да, я видел что наезжает. Постараюсь, что небудь придумать.
0
picaboo picaboo 9 лет назад #
Дважды одна и та же версия jquery подключается, может хватило бы одной на оба виджета? Не тестили, может и вообще не надо подключать и хватит штатной 1.7 что в движке стоит?
+1
artscripts artscripts 9 лет назад #
ТАм же русским языком написанно)) Если стоит какойлибо бокс второй раз квери подклюать ненадо)) 1.7 хватит
0
Ramin Ramin 9 лет назад #
Еще бы для VK такой блок))
0
hydraq hydraq 9 лет назад #
Тоже хотел написать
0
Def Def 9 лет назад #
да, для ВК поактуальнее будет , чем для фейсбука
+1
reload reload 9 лет назад #
разве проблема сменить код фейса на код вк?)
кнопочку перерисовать или в нете найти - полно)
тема, грубо говоря, про "Выезжающие боксы" вставить во внутрь можно и видеоплеер с ютуба)
+1
artscripts artscripts 9 лет назад #
Совершенно верно.
+1
reload reload 9 лет назад #
можно и позицию модульную прописать и модули выводить...
0
eoleg eoleg 9 лет назад #
+
+3
artscripts artscripts 9 лет назад #
Если получиться, сегодня и для ВК сделаю.
0
Mr_Freeman Mr_Freeman 9 лет назад #
автору зачет, классно сделано
0
Серега Серега 9 лет назад #
+ очень симпотно получилось!
+1
artscripts artscripts 9 лет назад #
Добавил Бокс Вконтакте рисовал на скорую руку, я думаю, что кто сильно захочет. перерисует под себя.
0
lezginka.ru lezginka.ru 9 лет назад #
Искус ,аналогично вывести "я.погоду" или чат можно ?
+1
artscripts artscripts 9 лет назад #
Да впринципе можно вывести все что угодно. Чат только неудобно будет, когда убераешь мышку он скрывается.
0
mr.Z mr.Z 9 лет назад #
Искус: я замечал что при попытке подключить jquery/1.5.2/jquery.min.js перестают работать кнопки настройки модуля с фронтеда.
Здесь такого не наблюдается?
0
artscripts artscripts 9 лет назад #
Вроде работает у меня. Если кто еще у себя проверит буду рад.
0
mr.Z mr.Z 9 лет назад #
Забыл уточнить на версии 1.10
0
artscripts artscripts 9 лет назад #
Дак вы проверьте, просто в шаблон вставьте <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>; и сразу все покажет, работает или нет :)
0
toropa toropa 9 лет назад #
"1. Скачать 2 картинки и залить их в ваш_сайт.ру/templates/ваш_шаблон/images" откуда скачать?
0
artscripts artscripts 9 лет назад #
Посмотрите в пост, эти картинки прям в пост вставлены. С него и скачайте. Уже 3 картинки, поправлю сейчас.
0
artscripts artscripts 9 лет назад #
UPD: Данная модификация работает с любой версией jquery от версии 1.5.2+ Тоесть если у вас где нибудь в шаблоне уже загружен допустим jquery/1.6.2 не нужно отсюда грузить библиотеку. Модификация подхватит ту что вами загружается. Это чтобы избежать кривотоков.
+1
iParovoz iParovoz 9 лет назад #
+
0
Strong Strong 9 лет назад #
Красиво то красиво!

НО...

может кто решил проблему или кто подскажет! версия 1.10

если вставляю все и с одним <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>;

то не работает допустим отправить сообщения. окно открывает, но при отправке ничего не происходит! тоже самое и с комментариями и с созданием клубов и т.п.

Как решить проблему?
0
artscripts artscripts 9 лет назад #
Да, проблему увидел, на 1.9 вроде таких проблем небыло. Я завтра не смогу, но послезавтра постараюсь решить проблему.
0
Strong Strong 9 лет назад #
ок! будем ждать! спс
0
artscripts artscripts 9 лет назад #
Конфликт идет с этим скриптом в template.php

Код PHP:
  1. <script type="text/javascript">
  2. $(document).ready(function(){
  3. $('#topmenu .menu li').hover(
  4. function() {
  5. $(this).find('ul:first').show();
  6. $(this).find('a:first').addClass("hover");
  7. },
  8. function() {
  9. $(this).find('ul:first').hide();
  10. $(this).find('a:first').removeClass("hover");
  11. }
  12. );
  13. });
  14. </script>
0
Strong Strong 9 лет назад #
и каким образом исправить? или пока еще смотрите?
0
artscripts artscripts 9 лет назад #
Надо смотреть тщательно, послезавтра посмотрю в чем проблема.
0
lesterkey lesterkey 9 лет назад #
+ и в закладки...
0
Дмитрий Дмитрий 9 лет назад #
Круто получилось! И главное полезно.
0
Дмитрий Дмитрий 9 лет назад #
Дабвлю, что с твиттер надо что-то сделать, поскольку не дело, что кнопка Follow скрыта за блоком вконтакте.
Ну и выше вроде уже отметили, про прокрутку, хотя второстпенно. Думаю, эти вопросы можно решить, путём перемещения открытого блока чуть левее, чем все остальные.
0
artscripts artscripts 9 лет назад #
Исправил вроде бы проблему и обновил код в посте. Теперь можно работать на http://yandex.st/jquery/1.9.0/jquery.min.js проверилЮ коменты работают, если еще кто увидет косяки буду благодарен. За всем не уследить.
0
admirus admirus 9 лет назад #
Сделано все как написано но блок внизу появлется
0
artscripts artscripts 9 лет назад #
Если ставите 1 блок в css ставьте top:13opx
0
Николай (asd43) Николай (asd43) 9 лет назад #
косяк был, у меня перестали отправляться комменты и сообщения на стену
0
Николай (asd43) Николай (asd43) 9 лет назад #
с новым кодом табы в профиле перестали работать, все удалил ивсе нормально
0
Николай (asd43) Николай (asd43) 9 лет назад #
вкладки, вообщем ну его нафиг, а так красиво было
0
Николай (asd43) Николай (asd43) 9 лет назад #
очень хочется применить к сайту
0
artscripts artscripts 9 лет назад #
Я думаю, я пока не могу понять что не так, любое подключение квери ломает вкладки профиля... Думаю как обойти, спасибо что заметили.
+1
Pasha Pasha 9 лет назад #
А че там думать, просто не подключайте. Весь этот код будет прекрасно работать и на версии 1.5, которая уже подключена
0
artscripts artscripts 9 лет назад #
Да я уже увидел, сейчас переделаю.
0
artscripts artscripts 9 лет назад #
Спасибо Паша за наводку, все исправлено, и проверенно, убрано лишнее подключение, теперь все работает. Для тех кто ставил уже переставьте коды скриптов или удалите в блоках подключение скриптов квери.
0
Дмитрий Дмитрий 9 лет назад #
Оффтоп.
А справа вверху отрывной уголок, это как реализовано?
0
Николай (asd43) Николай (asd43) 9 лет назад #
Установил все работает, спасибо
0
FlaZa FlaZa 9 лет назад #
У вас в демо наводим на нужный ярлык и всплывает нужное меню, у меня почему-то даже если наводим на меню, что чуть выше то открывается нижнее, и так пока не закончиться высота нижнего, и потом только более высокое...
Тоисть нижний твиттер, навожу на него, всплывает окошко, оно доходит до средины вконтакте, я навожу на файсбук и ниже средины вконтакте, открывается твиттер, но если я навожу выше средины вконтакте открывается фейсбук, а что-бы открылся вконтакте необходимо вообще почти в самом верху навести, где надписей нет...
В чем может быть проблема?
+1
artscripts artscripts 9 лет назад #
Попробуйте коды поставить в таком порядке сначала твитер, потом фейсбук, потом вконтакте. Если у вас другой порядок, нужно менять параметры top в css

Еще от автора

Бекап вашего сайта на локальный компьютер
Наверно нет особой необходимости напоминать каждый раз, что бекап своего проекта должен делаться ежедневно!
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.