Скрипт добавления статьи в социальные закладки и сервисы

24.07.2010 - ,

После прочтения статейки Dimox’a о его новом скрипте добавления в различные сервисы статей, решил что тоже пора бы добавить на сайт подобные кнопочки. Да только вот его вариант к сожалению мне не подходил. Пришлось переделать скрипт под себя, что я в принципе и сделал.

Скрипт весит меньше 3-х килобайт, плюс несколько строчек в ваших css стилях. К тому же легко встраивается в ваш сайт. Ссылочка на скрипт в конце статьи, а сейчас поговорим как…

Вставить скрипт на сайт

Первым делом берем картинки из папки images и копируем их в нужную папку на сервере. Теперь открываем файл social.js блокнотом и редактируем следующую строчку:

var f = 'images/';

Лучше всего указать полный путь к папке. Переходим ко вставке кода в шаблон. Подключаем jQuery(если он у вас не подключен) и сам скрипт, следующим кодом, между тегами <head> </head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="путь_до_папки_со_скриптом/social.js"></script>

Теперь выбираем место куда будет выводиться наш блок с кнопочками. и вписываем туда:

<script type="text/javascript">
social(encodeURIComponent('ссылка на статью'),encodeURIComponent('Заголовок статьи'))
</script>

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

Для Textpattern так:

<script type="text/javascript">
social(encodeURIComponent('<txp:permlink />'),encodeURIComponent('<txp:title />'))
</script>

Для Wordpress так:

<script type="text/javascript">
social(encodeURIComponent('<?php the_permalink() ?>'),encodeURIComponent('<?php the_title(); ?>'))
</script>

Переходим к стилям. Тут у нас два выхода, смотря как будет выводится блок с кнопками, либо горизонтально либо вертикально. Смотря как вам больше подходит, то и выбираем.

Для горизонтального вывода:

.social {
	position:absolute;
	padding: 8px 0px 8px 8px;
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	background:#fff;
}
.social a {
	display:inline-block;
	margin: 0 7px 6px 0;
}
.soc2 {
	visibility:hidden;
}

И для вертикального вывода:

.social {
	position:absolute;
	margin-top:10px;
	padding:8px 8px 0;
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
}
.soc1 {
	float:right;
	margin-left:6px;
}
.soc1 a {
	display:block;
	padding: 0px 8px 8px 0;
}
.soc2 a {
	display:block;
	padding: 0px 0px 8px 0;
}
.soc2 {
	float:left;
	visibility: hidden;
}

Ну вот и всё, со вставкой мы закончили. Так же можете корректировать положение блоков если это понадобится, добавлением к стилю .social параметров margin.

Скачать скрипт.

Скачать скрипт Социализации

Параметры у скрипта те же что и у Dimox’a. А именно, цитирую (= :
Работает кроссбраузерно (за минусом IE6). Проверял в Opera, FireFox, Chrome, Safari (есть косячок), IE8, IE7.

Теги: ,
Добавить в: