Закладочные ништяки

Главные вкладки

Аватар пользователя Shift-Web Shift-Web 19 сентября 2010 в 22:01

Наткнулся на jquery примочку для реализации плавающей панели с кнопка добавления в твиттеры, соц-закладки и т.д. Собсна сабж тут. Качается тут или тут.

Написано, что надо jQuery 1.4.2, на младших не пробовал.

Установка панели соц-закладок в друпал 6

Сам скрипт можно подключить тимплэйтом, модулем или в инфо темы(как вам нравится). В скрипте покрутить отступы:

var m1 = 140; /* расстояние от начала страницы до плавающей панели */
var m2 = 20; /* расстояние от верха видимой области страницы до плавающей панели */
var f = '/examples/socializ-floating-panel/i/'; /* путь к папке с изображениями кнопок */

В page.tpl.php перед <?php print $content ?> вставляем

<script type="text/javascript">socializ(encodeURIComponent('http://www.SITE.ru<?php if ( (arg(0) == 'node') && is_numeric($nid = arg(1)) ) {echo url('node/'.$nid); } ?>'),encodeURIComponent('<?php if ( (arg(0) == 'node') && is_numeric($nid = arg(1)) ) {echo $title; } else { print $site_name; } ?>'))</script>

, домен заменить своим (_ttp://www.SITE.ru).

Это задёт адрес ноды и тайтл активной странички. Немного непродумано в отношении таксономии ...

В стили темы:

#socializ {
  position: fixed;
  z-index: 1000;
  margin-left: -70px;
  padding: 6px 6px 0;
  border: 1px solid #E5E5E5;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
}
* html #socializ {display: none}
#socializ:hover {
  background: #F6F6F6;
  border: 1px solid #D4D4D4;
  -moz-box-shadow: 0 0 5px #DDD;
  -webkit-box-shadow: 0 0 5px #DDD;
  box-shadow: 0 0 5px #DDD;
}
#socializ a {
  display: block;
  width: 32px;
  height: 32px;
  margin: 0 0 6px;
  background-color: #F6F6F6;
}

#socmore {
  text-align: center;
  cursor: pointer;
  margin: -11px 0 4px;
  width: 32px;
}

Дальше нужно залезти в сам скрипт и поправить первые две строки с координатами автора:

        s.append(
                '<div id="soc1">' +
                '<a href="http://twitter.com/home?status=RT Dimox_ru ' + t + ' - ' + u + '" title="Добавить в Twitter"><img src="' + f + 'twitter.png" alt="" /></a>' +
                '<a href="http://www.google.com/reader/link?url=' + u + '&title=' + t + '&srcURL=http://dimox.name/" title="Добавить в Google Buzz"><img src="' + f + 'google-buzz.png" alt="" /></a>' +

....

..

.

Профит.

Комментарии

Аватар пользователя Shift-Web Shift-Web 20 сентября 2010 в 0:43

"FORTIS" wrote:
в жж постит ссылку а не текст :/ а так ниче :)

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

Аватар пользователя Shift-Web Shift-Web 20 сентября 2010 в 1:19

"Ламер" wrote:
плана авторизаци по апи ?

Для начала было бы неплохо интегрировать в админку с возможностью кастомизации пимпочек

Аватар пользователя graker graker 20 сентября 2010 в 10:38

Помнится, меня когда-то именно эта примочка убедила, что мне нужна такая же Smile
Правда себе я без JS делал, на базе модуля соц. закладок, а по наводке dimox.name только иконки утащил.

Аватар пользователя patator patator 20 сентября 2010 в 10:51

Дальше нужно залезти в сам скрипт и поправить первые две строки с координатами автора:
А на что их править? Просто вообще не пользуюсь соцзакладками, но на одном сайте есть такая опция. А тут такая симпатяга.

Аватар пользователя t3hk0d3 t3hk0d3 20 сентября 2010 в 12:03

Ну кто-же так делает?

<script type="text/javascript">
socializ(encodeURIComponent('<?php echo url($_GET['q'], array('absolute'=>true); ?>'),
encodeURIComponent('<?php echo ($title) ? $title : $site_name; ?>'));
</script>

И вообще это надо выводить не перед $content, а внутри <head>.

UPD

А по хорошему encodeURIComponent надо вынести внутрь socializ():

function socializ(u,t) {
        var m1 = 312; /* расстояние от начала страницы до плавающей панели */
        var m2 = 16; /* расстояние от верха видимой области страницы до плавающей панели */
        /* Экранируем строки для использования внутри URL */
        u = encodeURIComponent(u);
        t = encodeURIComponent(t);

        document.write('<div id="socializ"></div>');

Тогда

<script type="text/javascript">
socializ('<?php echo url($_GET['q'], array('absolute'=>true); ?>', '<?php echo ($title) ? $title : $site_name; ?>');
</script>

И это правильно, ибо размер некешируемого (sic!) контента пользователю, хоть немного, но будет уменьшено.

Аватар пользователя Empiric@drupal.org Empiric@drupal.org 20 сентября 2010 в 12:23

Про реализацию ничего не скажу, но сама идея таких плавающих соцзакладок отвлекающих столько внимания пользователя - ну это из серии крутящихся шариком тегов - выглядит очень прикольно, владельцу сайта радостно, что у него такое есть, но юзеры никогда не пользуются и только отвлекаются. Такие интерактивные ездящие элементы надо делать только в крайних случаях, когда это действительно надо, а не для такой раздражающей мелочи, как закладки.

Аватар пользователя graker graker 20 сентября 2010 в 12:50

<a href="mailto:Empiric@drupal.org">Empiric@drupal.org</a> wrote:
владельцу сайта радостно, что у него такое есть, но юзеры никогда не пользуются и только отвлекаются.
Отслеживание кликов и их последствий показывает, что пользуются. В контакт, в твиттер и в фейсбук регулярно шарят.

Аватар пользователя Shift-Web Shift-Web 20 сентября 2010 в 20:46

"t3hk0d3" wrote:
Ну кто-же так делает?

Первое, что на ум пришло )))

"t3hk0d3" wrote:
document.write('<div id="socializ"></div>');

НЕТ! Вес потечёт

Аватар пользователя t3hk0d3 t3hk0d3 21 сентября 2010 в 14:31

Shift-Web wrote:
"t3hk0d3" wrote:
document.write('<div id="socializ"></div>');

НЕТ! Вес потечёт

Это не я писал Smile Просто вставил чтобы было понятно куда код экранирования вставлять.

Аватар пользователя Shift-Web Shift-Web 20 сентября 2010 в 20:47

"<a href="mailto:Empiric@drupal.org">Empiric@drupal.org</a>" wrote:
владельцу сайта радостно, что у него такое есть, но юзеры никогда не пользуются и только отвлекаются.

Мне кажется, что это просто стереотип определённый

Аватар пользователя Valeratal Valeratal 23 сентября 2010 в 7:30

оно там есть
да так есть что не понятно, что это
элемент оформления (вот хоть осьминого твиттера) или ссылки на сервисы