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

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

23.05
51
22 265
Подключаем социальные закладки от 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 (но версия тут не играет роли)

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

Комментарии

Razario
Razario 25 мая 2012 15:52
По мне так лучше добавлять кнопочки от Яндекса
ПафНутиЙ
ПафНутиЙ 25 мая 2012 15:58
Цитата: Яндекс
Блок «Поделиться» позволяет вашим посетителям размещать ссылку на страницу вашего сайта в социальных сетях или блогах.

Вы можете установить блок «Поделиться» на любую страницу. Пользователи будут делиться информацией с вашего сайта, а значит, его популярность будет расти.


Тут ни одного слова про многократное использование одной кнопки на одной странице )
Razario
Razario 25 мая 2012 16:03
Не совсем понял вашего ответа. what
Я просто добавляю кнопки поделиться от сервиса яндекс, только для того, что бы потом в метрике смотреть что, кто и чем поделился.
ПафНутиЙ
ПафНутиЙ 25 мая 2012 18:43
В статье описан способ многократного подключения скрипта на страницы сайта. Т.е. если на главной странице 10 новостей, то будет показано 10 наборов соцкнопок, для каждой новости своя. Скрипт от яндекса этого не позволяет.
А вопрос о необходимости использования того или иного способа показывать соцкнопки пользователям - это индивидуально для каждого сайта.
Я например, терпеть не могу сторонние скрипты соцкнопок на сайте, хотя бы по той простой причине, что все эти лайки и твиты никто не нажимает (рунет...) и "напрягать" браузер пользователя этим хламом как то неправильно, лучше эти ресурсы пустить на более нужные вещи.
Вот например вы наблюдаете статистику. Какой процент новостей пользователи опубликовали в твитере или ФБ или ВК?
Razario
Razario 26 мая 2012 08:48
Цитата: ПафНутиЙ
Вот например вы наблюдаете статистику. Какой процент новостей пользователи опубликовали в твитере или ФБ или ВК?

Вот статистика за этот месяц у одного сайта с посещалкой всего 300 уников.
_http://imagepost.ru/images/2/01/2012-05-26.png
Mister Hyde
Mister Hyde 26 мая 2012 11:54
jsbeautifier.org спасибо за сервис. Давно искал, но не мог найти.
ПафНутиЙ
ПафНутиЙ 26 мая 2012 13:39
Это количество за сутки?
Razario
Razario 26 мая 2012 17:14
Цитата: ПафНутиЙ
Это количество за сутки?

Нет, это количество за месяц.
ПафНутиЙ
ПафНутиЙ 26 мая 2012 17:21
итого примерно 2.4% уникальных посетителей тыкают в кнопки, при этом немалая вероятность того, что один посетитель тыкает в несколько кнопок. Так же, если учесть, что админ скорее всего каждую новость постит в однокласники и ВК, получаем ~1-1.5% реальных посетителей жмут эту кнопку.
Оно того стоит?
Razario
Razario 27 мая 2012 09:52
Я думаю стоит :) 1,5% это то же показатель.
Вот я для наглядности сделал вам выборку посещения из соцсетей за тот же период.
_http://imagepost.ru/images/2/01/2012-05-27.jpg
ПафНутиЙ
ПафНутиЙ 27 мая 2012 10:20
У меня такие же показатели, только за год )))
статистика с социалок

В вашем случаи однозначно стоит. И показатели отказов хорошие, и глубина просмотра...
Daiv
Daiv 27 мая 2012 15:52
Не могли бы вы ответить на вопрос по вашему способу реализации ссылка.

Честно у самого тоже не вышло.
ПафНутиЙ
ПафНутиЙ 27 мая 2012 16:22
1. Посмотрите через отладчик, нет ли ошибок js
2. Посмотрите через отладчик исходный (snapshot) код того места, куда выводите блок - возможно просто не подгружаются картинки.
3. Адрес сайта было бы не плохо увидеть.
rocksmart
rocksmart 29 мая 2012 07:53
В готовом виде скрипт должен выглядеть примерно так


Там косячок небольшой.

И еще сервис не дает возможность отправки титла в контакт

Нужно править в ручную

http://vk.com/share.php?url='+u+'&title='+t+'
Aper
Aper 31 мая 2012 17:31
Privet Pafnuty, spasibo za statiu. Vot vaznikaet prablema, dvijok vibiraet ne korektnie izabrajenie kogda pakazivaet v socialnix setyax. Dlia facebook est reshenia, nujno ispolzovat "Open Graph" -i. Naprimer shtob kartinko izabrazilos pravilno nujno stavit v <head></head> metatag: "<meta property="og:image" content="ImageURL"/>". Vot ImageUrl i est ssilka na izabrajenie k novosti. Proboval tegi "xfields" i "image", oni v main.tpl ne rabotayut. Kak mojno reshit etot vapros? ochen nujnaya vesh chtob kartinka pravilno izabrazilos v soc setax. Spasibo!
ПафНутиЙ
ПафНутиЙ 31 мая 2012 17:34
А из полной новости пробовал добавить в фейсбук? картина та же, или он подцепляет правильную картинку. Если не ошибаюсь в FB можно выбирать нужную картинку.
Aper
Aper 31 мая 2012 17:45
ПафНутиЙ,
Da ia dabavliayu tolko iz polnoy novosti, s karotkoy shtob kartinka bila pravilnaia vaabshe budet trudno sdelat. Bivaet chto on podcepliaet pravilnuyu kartinu no ne kajdi raz. Mojno vibirat kartinu esli sam dabavliaesh novost na FB, a esli najimaes na like, to kartinka vstavliaetsa avtomatno. Vot dlia etovo i pridumali "open graph" -i:
http://developers.facebook.com/docs/reference/plugins/like/#ogtags

Naverno shtoto v engine.php ili v index.php nado dabavit?
Aper
Aper 31 мая 2012 18:13
Dumayu mojno reshit s pomoshu vashevo modulia block.pro 2.6.x. v <head> dabavliayu vot eto
{include file="engine/modules/block.pro.2.php?&block_id=fbmeta&template=fbmeta&show_cat=this&news_num=1&last=y"}
Vot tolko peremennaya "&last" nujno pameniat na naprimer "&thisnews", katoraia bi vidal informaciu iz toi novosti gde naxoditsa user. A v shablone dabavliyu vot tak:
<meta property="og:image" content="[xfvalue_image]"/>
. Mojno li dabavit takaya peremannaya v vash modul block.pro ?
ПафНутиЙ
ПафНутиЙ 31 мая 2012 22:17
Попробуйте)) я не вижу решения этой проблемы через модуль block.pro
Wizard2030
Wizard2030 14 июля 2012 17:27
Пафнутий спасибо за инфу очень помогла. Но раскрой секрет как сделать чтоб как у тебя на сайте плавало это окошко только с лева и тож прижималась к левому краю и подымалась до определённой высоты...
Daiv
Daiv 14 июля 2012 17:30
#share42 {
	position: fixed;
	z-index: 1000;
	right: 10px;  
	padding: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	}  

	#share42:hover {
  		background: #fff;
		} 
Wizard2030
Wizard2030 14 июля 2012 17:32
Спасибо щя попробую поставить))) Ваш сайт ток нашёл а уже много интересного узнал)))
Hacker-SoftLab
Hacker-SoftLab 8 августа 2012 03:11
Не работает. Возможно, потому что код для вертикального положения? Вначале, после functions (в js) и там где меняем длинную на короткую тоже.

P.S. Показать не могу, т.к. при заключении кода в тег code, сообщает, что публикация содержит неподустимые теги. Если можете, посмотрите пожалуйста. Отправил сайт в ЛС.
ПафНутиЙ
ПафНутиЙ 8 августа 2012 08:12
а где новости то на сайте?
Hacker-SoftLab
Hacker-SoftLab 8 августа 2012 15:41
Там пока одна (для ориентации), в самом низу по тегам можно найти (в этом шаблоне не могу понять, почему не выводятся категории smile )
ToDoS
ToDoS 15 октября 2012 16:40
Как узнать news id?

В share42 уже нужно указать url и title
<div class="share42init" data-url="[url]" data-title="[title]"></div>
<script type="text/javascript" src="{THEME}/js/share42.js"></script> 


C тайтлом разобрался? (у меня {title})
А как быть с юрл? не могу найти тег...
Где можно посмотреть список всех тегов? если есть такое...

вот код shortstory
        <div class="short">
  <div class="short1"><h3>[full-link]{title}[/full-link]</h3></div>
  <div class="short2"><span>{link-category}</span>Добавил: <em>{author}</em><b>[day-news]{date}[/day-news]</b></div>
  <div class="short5">
    <div id="news-id-169" style="display:inline;">
           {short-story} 
		   <!--<div class="clr"></div>-->
    </div>
    
  </div>
  <div class="bor">
  
    <div class="short4"><div class="short6">Ответов:  <span>{comments-num}</span> | Просмотров: <span>{views}</span> &nbsp &nbsp &nbsp &nbsp &nbsp Поделиться: </div></div> 
    
<div class="share42init" data-url="[URL]" data-title="{title}"></div> 

    <div align="right" class="short3" title="Читать далее">[full-link][/full-link]</div>

  </div> 
</div> 
ПафНутиЙ
ПафНутиЙ 15 октября 2012 16:52
А в документацию религия не позволяет заглянуть? там и id и ссылка и всё, что надо есть.
На худой конец посмотреть 4й пункт инструкции в этой публикации.
ToDoS
ToDoS 15 октября 2012 20:38
Цитата: ПафНутиЙ
А в документацию религия не позволяет заглянуть? там и id и ссылка и всё, что надо есть.
На худой конец посмотреть 4й пункт инструкции в этой публикации.


{news-id} не работает... пробовал...
может это зависит от шаблона?
тогда где в шаблоне посмотреть все теги?
ToDoS
ToDoS 16 октября 2012 10:47
Когда в data-url="" Подставляю {news-id}
и при нажатии на кнопку (допустим вконтакте)
видно сверху что пытается сослаться на
url=147

Хотя сама ссылка выглядит так
147-krasota-spaset-mir-30-foto.html

Пока не разобрался...
вот сайт http://plusani.net/
если это конечно что то даст
ПафНутиЙ
ПафНутиЙ 16 октября 2012 10:50
Вы мне сейчас выносите мозг...
<div id="sh{news-id}" class="share42init" data-url="{full-link}" data-title="{title}"></div>

Это вот я не просто так наверное написал.

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

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

Информация

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