» » » Подключаем социальные закладки от share42.com в shortstory.tpl DLE

Подключаем социальные закладки от share42.com в shortstory.tpl DLE

23.05
51
32 058
Подключаем социальные закладки от share42.com в shortstory.tpl DLE


Сегодня я расскажу как легко и непринуждённо, без правок php и плясок с бубнами, добавить кнопки социальных сервисов от share42.com в короткие новости DLE.
Статья будет интересна прежде всего новичкам, поэтому я постарался расписать всё немного подробнее, чем это необходимо.

Главное условие - прямые руки

Идём на share42.com и генерируем там скрипт с удобными для себя параметрами.
Я выбрал G+, Twitter, OK, FB, ЖЖ и ВК. Думаю для примера этого вполне достаточно.

Подключаем социальные закладки от share42.com в shortstory.tpl DLE


Важные опции

  • Тип панели с иконками: "Горизонтальная"
  • К вашему сайту подключен jQuery: "Да" (т.к. DLE есть ужа давно библиотека jQuery)


Нужно сделать полученный скрипт читабельным. Для этого идём на jsbeautifier.org, вставляем содержимое файла share42.js в большое текстовое поле и жмём единственную кнопку.

Подключаем социальные закладки от share42.com в shortstory.tpl DLE


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

Подключаем социальные закладки от share42.com в shortstory.tpl DLE


Это будет наш основной код.

Для примера я возьму стандартный шаблон DLE - Gemini (Default уже приелся smile)
Скрипт можно вставлять куда угодно и как угодно, главное правильно.
  1. Поэтому, чтобы защитить неподготовленный мозг от нелепых ошибок, лучше создадим файл social.js и положим его в папку js шаблона.
    В файле пишем:
    $(document).ready(function(){
    //в это место вставляем наш основной код, скопированный ранее
    });

  2. Кладём картинку из архива (который скачали с share42.com) в папку images.
  3. Подключаем скрипт в шаблон. Для этого откроем main.tpl и после
    <script type="text/javascript" src="{THEME}/js/libs.js"></script>
    прописываем
    <script type="text/javascript" src="{THEME}/js/social.js"></script>

  4. С простым разобрались, теперь немного посложнее (для неподготовленного мозга - очень сложно).
    После "обрезания" скрипта нам более не нужна отдельная его инициализация, но для корректной работы скрипта ему нужен id блока, в который он будет вставлять кнопки соцсервисов и получать необходимые данные (заголовок и ссылку на новость), мы можем использовать стандартный тег {news-id} для присвоения уникальных идентификаторов для каждого блока. Поэтому блок в файе shortstory.tpl, куда будут вставляться кнопки будет выглядеть примерно так:
    <div id="sh{news-id}" class="share42init" data-url="{full-link}" data-title="Подключаем социальные закладки от share42.com в shortstory.tpl DLE"></div>
    где id="sh{news-id}" может быть в принципе любым, главное наличие тега {news-id} и какого-либо текста рядом с ним (чтобы не дублировать id новостей).
    Стоит отметить, что data-url и data-title - это HTML5-атрибуты и валидацию на старых доктайпах они не пройдут (хотя когда DLE проходил валидацию...)
  5. Ну а наш скрипт теперь нуждается в несложной доработке, а именно: нужно дать понять скрипту в какой блок какие ссылки-кнопки вставлять.
    Для этого:
    Перед (или после или на строчку ниже, разницы нет)
    u = $(this).attr('data-url');
    Вставить
    shareId = $(this).attr('id');

    Далее найти
    $(this).html('<span id="share42">' + l + '</span>');
    и заменить на
    $(this).html('<span id="share42_'+shareId+'">'+l+'</span>');

    Это нехитрое телодвижение научит скрипт "различать блоки друг от друга".
  6. Внимательный человек сразу увидит, что вместе с "обрезанием" скрипт утратил переменную f (она отвечала за путь к картинке), поэтому мы ещё немного причешем скрипт, заодно избавимся от не уместных в нашем случаи инлайн-стилей (не люблю я их).
    Для этого просто заменим длинную строку:
    for (j = 0; j < s.length; j++) l += '<a rel="nofollow" style="display:inline-block;vertical-align:bottom;width:24px;height:24px;margin:0 6px 6px 0;outline:none;background:url(' + f + 'icons.png) -' + 24 * j + 'px 0" href=' + s[j] + ' target="_blank"></a>';
    на более изящную и короткую:
    for (j = 0; j < s.length; j++) l += '<a rel="nofollow" class="sharelink" style="background-position: -' + 24 * j + 'px 0" href=' + s[j] + ' target="_blank"></a>';


    Внимание!

    не забудьте поменять размер иконок на свой (в данном случаи это циферка 24).

  7. Осталось только добавить воды стилей.
    Открываем любой css файл (например styles.css) и в любом месте пишем:
    .sharelink {
    display: inline-block;
    vertical-align: bottom;
    width: 24px;
    height: 24px;
    margin: 0 6px 6px 0;
    outline: none;
    background-image:url(../images/icons.png);
    }

    Естественно не забываем указать нужный размер иконок.


В готовом виде скрипт должен выглядеть примерно так




Вот и всё!



P.S. Проверено на DLE 9.6 (но версия тут не играет роли)

Похожие материалы

Комментарии

ToDoS
ToDoS 16 октября 2012 10:55
ПафНутиЙ,
Спасибо... заработало...
Abdula
Abdula 14 января 2013 01:01
Будьте любезны, подскажите, как выровнять блок с кнопками по горизонтали по центру?
Уже что только не делал, выравнивается только по левому краю горизонтали (((
ПафНутиЙ
ПафНутиЙ 14 января 2013 01:13
самый простой вариант - завернуть блок в контейнер с фиксированной шириной и margin: 0 auto;
Abdula
Abdula 14 января 2013 01:21
спасибо за ответ!
я прописал это в файле share42.js
но к сожалению, не получилось, кнопки так и остались слева (((
Danil
Danil 17 января 2013 17:57
Abdula,
Как бэ это в css файле нужно
Abdula
Abdula 17 января 2013 19:21
Ну как бэ, это понятно! )))
Через css не получалось.
Дело тогда было вечером...
Мозги кипели. Утром сделал банально, через <div align="center"></div>
Danil
Danil 23 января 2013 15:27
Денис, а куда лучше - в краткую новость или полную? По-моему в полную, все в полную ставят...
ПафНутиЙ
ПафНутиЙ 23 января 2013 23:29
все подключают в полную, потому что в краткую не подключается. ))) А куда подключать - дело вкуса/желания/возможностей админа.
Димка_87
Димка_87 15 апреля 2013 23:33
Проблема с неправильным отображением картинки в одноклассниках, фейсбуке, моем мире, вконтакте и т.д. не решилась?
не думаю что пользватель решивший нажать на кнопку, будет сидеть и перелистывать еще картинки дабы подобрать правильну. в итоге получается фигня(
ПафНутиЙ
ПафНутиЙ 15 апреля 2013 23:39
зайдите на сайт share42.com - там есть уже давно эти настройки.
Abdula
Abdula 22 декабря 2013 13:20
Можно ли эти кнопки подключить на главной странице сайта?
ПафНутиЙ
ПафНутиЙ 23 декабря 2013 02:14
конечно!
Abdula
Abdula 5 февраля 2014 14:22
Павел, при добавлении в соцсети shortstory по умолчанию скрипт выводит в описание родительской категории. Нужно, чтобы при добавлении в соцсети выводило описание полной новости, находящейся в этой категории. На share42 в документации есть такой параметр, который отвечает за вывод description (<div class="share42init" data-description="Описание страницы">). Но какой тег в движке DLE отвечает за вывод описания description, в документации я не нашёл. Есть ли какое-то решение этого вопроса?
ПафНутиЙ
ПафНутиЙ 6 февраля 2014 23:51
по умолчанию в dle нет тега, выводящего описание новости. можно вывести лишь текст новости.
Abdula
Abdula 6 февраля 2014 23:54
Хотя бы так...Можно ли тогда указать его максимальный размер?
Димка_87
Димка_87 29 мая 2014 01:45
на share42.com поменялись коды, данная инструкция не работает, можете обновить ее? заранее спасибо
ПафНутиЙ
ПафНутиЙ 29 мая 2014 02:28
Делайте по аналогии. суть в том, чтобы не дублировать id, не более.
Димка_87
Димка_87 30 мая 2014 12:35
не получается почему то. можете помочь пожалуйста? вот мой код с шаре http://yadi.sk/d/IPBWcWXoRgr5A заранее спасибо
ПафНутиЙ
ПафНутиЙ 30 мая 2014 14:05
https://gist.github.com/7d74a17c6b0ccce78f52
не забывайте в блок добавлять атрибут
data-id="{news-id}"

при этом атрибут id не нужен.
DimkaG
DimkaG 17 октября 2015 20:55
Уже как мес, при добавлении публикации в фейсбук перестало передавать текст. Передаёт только фото, ссылку, а текст нет...
Apelisin
Apelisin 27 ноября 2015 20:37
хорошая статья, мне пригодилось. Но вот хотелось бы как-то сделать, что бы эти кнопки работали с отдельными картинками из статьи. То есть, наведя мышку на картинку появятся кнопки, что бы опубликовать только эту одну картинку, а не ссылку на весь пост. Нсть решение какое то рабочее для DLE 10.4? Буду крайне благодарен.

Добавить комментарий

Комментировать могут только зарегистрированные пользователи

Информация

Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.