Начнем с главного, вы должны определится со структурой блока, в котором будут ваши кнопки.В идеале, как считаю я, она должна быть такой: Самое сложное будет это не генерация и вставка кнопок, а выравнивание и подгонка их под страничку.. Свои я так до конца и не доделал, у меня не хватило нервов. Теперь о структуре. Должен быть главный блок, в котором будут располагаться дочерние блоки. Может с точки зрения верстальщика я не прав, но мне было так удобно и я так могу что-то посоветовать. Кстати, вышло практически кроссбраузерно, только почему-то в хроме и сафари "спасибо" улетает вниз =\Ну да ладно, вернемся к главному блоку<div id="soc">..</div>я его делал для того, чтоб легко задать расположение и отступы, то есть поставивfloat: right;так же можно выставить padding и все остальное, что кому потребуется.Дальше требуется внутрь главного блока по вставлять дочерние блоки, выглядеть должно примерно так:<div id="soc"><div class="button_1">..</div><div class="button_2">..</div><div class="button_3">..</div><div class="button_4">..</div></div>и уже в ваши дочерние блоки вставляете коды, нужных вам кнопок.пусть первой будет кнопка "Мне нравится" Вконтакте. Для получения ее кода и заполняем такую форму В итоге вы получите код, на подобие:<!-- Put this script tag to the <head> of your page --><script type="text/javascript" src="http://userapi.com/js/api/openapi.js?22"></script><script type="text/javascript">PPVK.init({apiId: 2217122, onlyWidgets: true});</script><!-- Put this div tag to the place, where the Like block will be --><div id="vk_like"></div><script type="text/javascript">VK.Widgets.Like("vk_like", {type: "full"});</script>Проверьте чтоб в вашем коде была похожая строчка apiId: 2217122, естественно ваш apiId будет другим. Теперь что куда вставлять... Открываете Ваш main.tpl и в раздел<head>..</head>вставляете Ваш код, похожий на этот:<script type="text/javascript" src="http://userapi.com/js/api/openapi.js?22"></script><script type="text/javascript">PPVK.init({apiId: 2217122, onlyWidgets: true});</script>Далее, открываете Ваш fullstory.tpl, где у вас уже прописана структура блока соц. кнопок, и вставляете код кнопки, у меня такой:<div id="vk_like"></div><script type="text/javascript">VK.Widgets.Like("vk_like", {type: "mini"});</script>чтоб общая картина, была примерно такая:<div id="soc"><div class="button_1"><div id="vk_like"></div><script type="text/javascript">VK.Widgets.Like("vk_like", {type: "mini"});</script></div><div class="button_2">..</div><div class="button_3">..</div><div class="button_4">..</div></div>Хотя, можете для кнопки "Мне нравится" и не делать отдельный div, так как весь ее код, будет содержаться в<div id="vk_like"></div>то есть для всех своих настроек css будете использовать #vk_like {} или #vk_like iframe {}. Лично я использовал у себя для этой кнопки такие стили:#vk_like {PPPPdisplay: inline;}Так же советовал бы почитать Далее к кнопке от facebook Like. , для генерации кода кнопочки. Заполняете эту форму: В поле URL to Like (?) вписываете {full-link}, width ставите 75 (ну или другое значение, какое вам нужно), после завершения заполнения формы, жмете на GET CODE после нажатия перед вами выскочит такое окошко:Выбирайте что хотите, я выбрал второе. Если вы так же выбрали второе, то добавьте в тот код после width="75" значение высоты, у меня это height="23" и так же можете добавить туда такое id="button_2" у меня же это id="face_like" и для настройки в css писать такое:#face_like {PPPPvertical-align: top;PPPPwidth: 80px;}в итоге в Ваш блок с id="soc" нужно вставить примерно такое:<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like id="face_like" href="{full-link}" layout="button_count" show_faces="true" width="75" height="23"></fb:like>Идем дальше к кнопкам твиттера, их может быть две:1. Первая кнопка от tweetmeme Для вставки кнопки как на первой картинке, в нужно место вставьте этот код:
Ничего сложного нету, но потерянные люди могут и не сделать. Это так же не идеальное решение, просто расписываю как это делал я. Как видите, у меня 4 кнопки: контакт, фейсбук, твиттер и спасибо.
Кнопочки социальных сетей DLE
Данный материал предоставлен сайтом исключительно в ознакомительных целях. Администрация не несет ответственности за его содержимое.
Не пропустите комментарии к .
Это материал доступен по следующим словам - .
У нас вы можете скачать бесплатно Кнопочки социальных сетей DLE... .
Загрузка. Пожалуйста, подождите...
Кнопочки социальных сетей DLE » DLE Solutions - бесплатные модули, Переходы 9.6, шаблоны и советы для CMS DataLife Engine 9.4, скачать DLE
Комментариев нет:
Отправить комментарий