Скрипт блока кнопок социальных сетей

Хотите чтобы посетители рекомендовали Ваш сайт в социальных сетях и хранили закладки на него в сервисах социальных закладок? Это очень просто устроить.

Но для начала определитесь в каком виде будет лучше разместить блок ссылок на Вашем сайте горизонтально или вертикально.

Вертикальный плавающий блок ссылок (пример с лева).

1. Скачайте архив с кодом:

• Перейдите по ссылке и скачайте код вертикалного плавающего блока ссылок:
  
  - для сайтов с кодировкой UTF-8 скачать
  
  - для сайтов с кодировкой Windows-1251 (ANSI) скачать


• Распакуйте и загрузите папку "soc" на ваш сайт по FTP или через панель управления хостингом.

2. Выбрать вариант кода скрипта:

Для любого сайта:

<div class="socinit" data-top1="150" data-top2="20" data-margin="0"></div> <script type="text/javascript" src="http://site.name/soc/soc.js"></script>

Для WordPress:

<div class="socinit" data-url="<?php the_permalink() ?>" data-title="<?php the_title() ?>" data-top1="150" data-top2="20" data-margin="0"></div><br /> <script type="text/javascript" src="http://site.name/soc/soc.js"></script>

Для Drupal:

<div class="socinit" data-url="<?php print $node_url ?>" data-title="<?php print $title ?>" data-top1="150" data-top2="20" data-margin="0"></div><br /> <script type="text/javascript" src="http://site.name/soc/soc.js"></script>

Для прочих CMS:

<div class="socinit" data-url="[url]" data-title="[title]" data-top1="150" data-top2="20" data-margin="0"></div><br /> <script type="text/javascript" src="http://site.name/soc/soc.js"></script>

Здесь [url] замените на код ссылки, а [title] замените на код названия статьи.

Если вы не знаете, какой код нужно вставить вместо [url] и [title] (у каждой CMS он свой), тогда выберите вариант кода для "Для любого сайта".

data-top1="150" - расстояние от начала страницы до плавающей панели (в пикселях);

data-top2="20" - расстояние от верха видимой области страницы до плавающей панели (в пикселях);

data-margin="0" - смещение панели по горизонтали.

Если вы хотите сдвинуть ее влево, например, на 70 пикселей, поставьте значение -70, если же хотите сдвинуть ее вправо, например, на 50 пикселей, поставьте значение 50.

3. Установите код скрипта на свой сайт:

• В выбранном вами коде замените site.name именем вашего сайта


• Вставьте в шаблон вашего сайта выбранный код (прямо перед или сразу после основного текста страницы);


• Для более точного оформления блока ссылок вы можете добавить в файл стилей вашего сайта (файл с расширением .css) следующий код (не обязательно):

#soc {padding: 6px 6px 0; background: #FFF; border: 1px solid #E9E9E9; border-radius: 4px;}<br /> #soc:hover {background: #F6F6F6; border: 1px solid #D4D4D4; box-shadow: 0 0 5px #DDD;}<br /> #soc a {opacity: 0.5}<br /> #soc:hover a {opacity: 0.7}<br /> #soc a:hover {opacity: 1}

Горизонтальный блок ссылок (размещается в удобном месте на сайте).

1. Скачайте архив с кодом:

• Перейдите по ссылке и скачайте код вертикалного плавающего блока ссылок:
  
  - для сайтов с кодировкой UTF-8 скачать
  
  - для сайтов с кодировкой Windows-1251 (ANSI) скачать


• Распакуйте и загрузите папку "soc" на ваш сайт по FTP или через панель управления хостингом.

2. Выбрать вариант кода скрипта:

Для любого сайта:

<div class="socinit"></div><br /> <script type="text/javascript" src="http://site.name/soc/soc.js"></script>

Для WordPress:

<div class="socinit" data-url="<?php the_permalink() ?>" data-title="<?php the_title() ?>"></div><br /> <script type="text/javascript" src="http://site.name/soc/soc.js"></script>

Для Drupal:

<div class="socinit" data-url="<?php print $node_url ?>" data-title="<?php print $title ?>"></div><br /> <script type="text/javascript" src="http://site.name/soc/soc.js"></script>

Для прочих CMS:

<div class="socinit" data-url="[url]" data-title="[title]"></div><br /> <script type="text/javascript" src="http://site.name/soc/soc.js"></script>

Здесь [url] замените на код ссылки, а [title] замените на код названия статьи.

Если вы не знаете, какой код нужно вставить вместо [url] и [title] (у каждой CMS он свой), тогда выберите вариант кода для "Для любого сайта".

3. Установите код скрипта на свой сайт:

• В выбранном вами коде замените site.name именем вашего сайта


• Вставьте в шаблон вашего сайта выбранный код (прямо перед или сразу после основного текста страницы);


• Для более точного оформления блока ссылок вы можете добавить в файл стилей вашего сайта (файл с расширением .css) следующий код (не обязательно):

#soc {display: inline-block; padding: 6px 0 0 6px; background: #FFF; border: 1px solid #E9E9E9; border-radius: 4px;}<br /> #soc:hover {background: #F6F6F6; border: 1px solid #D4D4D4; box-shadow: 0 0 5px #DDD;}<br /> #soc a {opacity: 0.5}<br /> #soc:hover a {opacity: 0.7}<br /> #soc a:hover {opacity: 1}

Учтите, что два блока однвременно работать не будут. Выбирайте только один.