share42 и LiveStreet

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

Отступление: На справедливый вопрос «а зачем это вообще нужно?» у меня нету готового ответа. Это SEO. Но базовая интеграция с социальными сетями в каком-то виде, есть в шаблонах изначально. На мой взгляд этого мало, но даже в рамках команды нашего сайта, мы долго обсуждали необходимость дополнительных усилий в этом направлении, и целесообразность применения share42, в частности. Тема глубоко субъективная.

Так вот, плагин для подобной задачи кажется мне слишком тяжёлым решением, а ручная модификация tpl-ей шаблонов — слишком грубым.

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

Достоинств у такого подхода несколько:
  1. Это, относительно, просто.
  2. Это дает возможность решить вопрос ничего не меняя в .tpl-ках шаблона, что большой плюс.
  3. Это, естественный для LiveStreet, способ гибко настраивать наличие и расположение элемента на любой странице.

Для начала нужно получить скрипт share42.соm (линк верху). Там нет ничего сложного:
  • Тип панели с иконками: вертикальная «плавающая»
  • Кодировка вашего сайта: UTF-8
  • К вашему сайту подключен jQuery: Да
Остальное — не суть.
Скачиваем share42.zip, а предложенный там же (в пункте 6) стиль — сохраняем в файл: share42.css

Разбрасываем полученные файлы по концептуально правильным местам:
share42.css -> /templates/skin/MYSKIN/css/share42.css
share42.js -> /templates/skin/MYSKIN/js/share42.js
icons.png -> /templates/skin/MYSKIN/images/share42/icons.png

Добавляем CSS и JS в конфигурацию шаблона (которая тут: /templates/skin/MYSKIN/settings/config/config.php ), в массивы $config['head']['default']['css'] и $config['head']['default']['js'].

Берусь утверждать, что работа с этими массивами есть в конфигурации любого шаблона, но вот в каком виде… Все что нужно сделать — найти эту самую работу с этим самым массивом, и после нее добавить соответствующую строку для первого массива:
$config['head']['default']['css'][] = "___path.static.skin___/css/share42.css";
и, для второго:
$config['head']['default']['js'][] = "___path.static.skin___/js/share42.js";

Теперь, собственно, делаем простенькую tpl-ку для блока /templates/skin/MYSKIN/blocks/block.share42.tpl со следующим содержимым:
<div class="share42init" data-top1="{$params.datatop1}" data-top2="{$params.datatop2}" 
data-margin="{$params.datamargin}" data-path="{cfg name='path.static.skin'}/images/share42/"></div>

Всё. У нас есть блок. Осталось его где-то показать.

Чтобы показать нужно воткнуть наш модный, новый блок в какую-либо, уже существующую в шаблоне, группу блоков. Желательно присутствующую на нужных страницах. И желательно такую, от которой будет удобно позиционироваться. Конечно, много от шаблона зависит, но что-то к чему удобно привязаться, найтись должно. Шаблон нашего сайта основан на synio, и я выбрал группу блоков sidebar-a — «right». Можно было воткнуться в toolbar. Можно было попробовать привязаться к основному контексту страницы. Вариантов, в общем, не один.

Отступление: как вариант, можно создать новую группу блоков, просто добавив
{include file="blocks.tpl" group="share42"}
в нужное место содержимого «body» тега в header.tpl. Это, в частности, даст возможность прилепить блок к левой границе браузера. Однако это всё же, хоть и незначительное, но изменение tpl шаблона, чего хочется избежать.


Опять в конфигурации шаблона (/templates/skin/MYSKIN/settings/config/config.php ) добавляем(добавлять в самый конец конфигурации, но ДО return $config; ) новое правило для блока:
$config['block']['rule_share42'] = array(
	'action'  => array('index','blog','tag','feed','search'),
	'blocks'  => array(
			'right' => 
			array('blocks/block.share42.tpl'=>
				array('priority'=>5000,
					'params'=>array('datatop1'=>'8',
							'datatop2'=>'8',
							'datamargin'=>'282')
							) 
					)
				),
	'clear' => false,
);
Значения datatop1 & datatop2 и datamargin придётся подгонять по вкусу.

Всё. Чистим кэш и должно заработать.

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



P.S. Выражаю огромную благодарность господину Dimox за великолепный скрипт. И господину ort за исключительно полезный ScreenCast по теме блоков.

P.P.S. Что получилось в итоге, как всегда, можно посмотреть на MMOзговед

13 комментариев

avatar
Все-таки кнопки социалок должны стоять под топиком, дочитал-понравилось-кликнул, а не где-то в стороне в блоке.
  • aex
  • 0
avatar
Если единицей выступает заметка — да. Но у нас большое количество «Миров», а еще есть тематические блоги. Очень разноплановые. Одним людям нравится одно, другим — другое. И человек может захотеть поделиться миром, как ресурсом, как единицей информации.

Собственно, я был тем, с кем автор заметки больше всех сражался из-за этих кнопок. Я долгое время был против. Но меня убедили.
avatar
А чё сражаться? :) Хорошие кнопки, у меня на некоторых сайтах стоят. Грубоватее только яшиных, зато свои, не надо откуда подгружать.
avatar
Я сражаюсь против любого лишнего элемента на странице. Так удалось в свое время отстоять запрет на появление социальных кнопок по умолчанию под каждой заметкой в ленте блога или главной страницы. Но в борьбе рождаются интересные решения. И мы пришли к тому, что реализовали автоматическое раскрытие стандартной панели с социальными кнопками в конце текста на странице заметки. Стало удобнее, на мой взгляд. И более очевидно.

В обсуждаемом случае меня убедили в том, что блог или мир выступают отдельной информационной единицей и могут представлять явный интерес для расшаривания.
avatar
Ну так кнопки всегда должны быть открыты, по-другому никак, никто париться не будет их искать. Надо бы еще счетчик поставить, сколько раз по какой кнопке и с какого топика кликнули :)
avatar
Ну так кнопки всегда должны быть открыты, по-другому никак, никто париться не будет их искать.

Не согласен. Семафоры из кнопок под каждым вступительным текстом заметки на главной, на мой взгляд, не нужны. И правильно, что они в том же synio спрятаны по умолчанию. Но они также спрятаны и на странице заметки. Вот как здесь. А это уже не очень правильно. Все это субъективно, конечно же.
avatar
Не, ну зачем под каждым словом и на каждой странице, тем более главной. Только один раз, под полным текстом на странице топика.
avatar
Угу. Но в стандартных шаблонах LS они по умолчанию закрыты. И, мы случайно обнаружили, что многие пользователи просто не догадывались, что там есть кнопка, которая открывает социальный шаринг. Был сюрприз, да…
avatar
Одно другому не мешает!
avatar
Мне нравится как на fishki.net сделано! Там рядом с каждой фото, сбоку есть вертикальная панель!
avatar
А по моему как раз плохо. Получается страница перегруженная одними и теми же элементами. Особенно на больших экранах. Не красиво…
avatar
Зато удобно делиться именно определенной картинкой. Это, конечно, от тематики ресурса зависит…
avatar
В их случае это можно было намного изящней реализовать, например привязать к on-mouse-move событию на картинке проявление это элемента. А так… грубо и прямолинейно.
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.