Визуальные закладки
Визуальные закладки, установленные, на вашем сайте помогут вашим пользователям делиться интересными публикациями с пользователями сети. Это поможет привлечь дополнительных читателей на ваш сайт, блог. Опишу подробно, как установить на сайте визуальные закладки.
Современная среда обмена информацией через интернет сегодня уже достигла таких рубежей, что уже стало трудно сделать свой выбор, на каком-то одном источнике обмена. Уже не достаточно просто сидеть в одноклассниках и делится новостями со своими друзьями. Если вы действительно хотите что бы ваши публикации в интернете доходили до максимального количества читателей вам нужно делиться и в твиттере и в моем круге и в лайв интернет.
Но как то неудобно и долго рассылать по отдельности ваши публикации по всем социальным сетям, микроблогам и тд. Для решения этой задачи удобней разместить на сайте специальный код обмена так называемые кнопки социальных сред.
Сегодня в интернете можно найти массу таких решений, но я хочу поделиться с вами одним очень удобным сервисом. Называется он конструктор скрипта социальных сетей и закладок.
Посмотреть его работу можно на моем сайте он расположен в конце каждой публикации. Выглядит он так.
Получение кода
Для установки таких визуальных закладок на сайте нужно получить код этих закладок. Для этого перейдем на сайт конструктора визуальных закладок http://share42.com/.
Выбираем вверху размер визуальных закладок по умолчанию можно выбирать размеры из трех вариантов 32x32, 24x24, 16x16. На мой взгляд, этого вполне достаточно для большинства сайтов.
Теперь выберем, просто кликнув по иконкам закладок те визуальные закладки, которые вам необходимы. Или можно выбрать все, нажав на ссылку сверху” Выбрать/снять все”.
Порядок отображения иконок можно поменять, просто перетащив их мышкой в нужном порядке.
Теперь, когда все закладки выбраны и правильно расположены, переходим к выбору опций. Выберите тип расположения иконок либо горизонтальная фиксированная, либо плавающая вертикальная. У вертикального варианта можно выбрать количество отображаемых иконок. Выберите кодировку вашего сайта. Выберите язык, вставьте, если есть ссылку на RSS ленту вашего сайта.
Теперь выберите, скачайте готовый скрипт. Распакуйте скачанный архив на свой компьютер. Теперь загрузите в корень вашего сайта папку Share42 в ней должно быть два файла сам файл скрипта и картинка с иконками.
Установка кода
Для установки кода на сайт для облегчения перейдите на сайте во вкладку установка. В третьем пункте впишите полный путь до папки, которую вы загрузили в корень сайта. Выберите вариант вашего сайта статический или на основе CMS у меня сайт сделан на основе Drupal 6 поэтому покажу как установить на основе этой CMS.
Для начала нужно на всех страницах вашего сайта подключить сам файл скрипта. Отроем файл page.tpl.php и вставим внутри тэга <head> подключение скрипта такой код ( для примера так сделано у меня) <script type="text/javascript" src="../share42/share42.js"></script>
Сохраните все это дело и для надежности проверим, откройте ваш сайт и просмотрите, исходный код страницы в ней должен быть подключенный скрипт
при нажатии, на который должен выдаваться код javascript
Следующим шагом нужно вставить вызов скрипта в том месте сайта, где вам нужно. Так как я использую, Drupal 6 то для вызова открываем файл node.tpl.php (это если у вас нет своих типов материала) и в нужном месте (обычно после вывода основного контента) вствляем вот такую строчку
<!-- script share 42-->
<script type="text/javascript">share42('http://www.jaans.info/share42/')</script>
Подключение стилей
Следующее это подключаем стили для этого в файле style.css используемого вами шаблона дописываем следующие строки
#share42 {
display: inline-block;
padding: 6px 0 0 6px;
background: #FFF;
border: 1px solid #E9E9E9;
border-radius: 4px;
}
#share42:hover {
background: #F6F6F6;
border: 1px solid #D4D4D4;
box-shadow: 0 0 5px #DDD;
}
#share42 a {opacity: 0.5;}
#share42:hover a {opacity: 0.7}
#share42 a:hover {opacity: 1}
теперь все должно работать. Вы можете сами подправить рассположение блока с визуальными закладками используя CSS.
Для установки на статичный сайт принцип тот же только имена файлов будут другими. Так же на сайте автора конструктора есть описание как установить код на другие движки.
Комментарий написал Костя (не проверено)
Спасибо, статья пригодилась! сейчас перешел на визуальные Atavi, вполне доволен.