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

Просмотров: 13984 | Комментариев: 3

Итак, есть несколько вариантов реализации данной задачи, расскажу о наиболее простых и эффективных. Поскольку задача вывести социальные кнопки состоит именно в детальной новости битрикс, не буду рассматривать способы вывода в других областях сайта.

Способ первый- возможностями битрикс

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

Итак, открываем любую новость в публичной части сайта в режиме редактирования. Наводим на тело новости, и во всплывшем табе кликаем по шарниру, далее на пункт "Редактировать параметры компонента"

Редактировать параметры компонента

В появившемся окне опускаемся в самый низ и выбираем чекбокс "Отображать панель соц. закладок"

Отображать панель соц. закладок

В общем-то все. После сохранения, во всех новостях данного инфоблока появится вот такая панелька:

панель соц. закладок

Не ахти что, да и сервисов мало. Конечно внешний вид можно оформить по своему вкусу. Но все же перейдем ко второму способу:

Способ второй- быстро и красиво

Заключается в том, что мы подключим панель социальных закладок со стороны. Например, с помощью сервиса "однакнопка" настраиваем внешний вид, которых там несколько. От простой панели по типу моей (в самом низу этой записки), до симпатичной выпадающей менюшки. Минус тут в надежности, если однажды этот сервис умрет, то и кнопки пропадут. Можно сгенерировать кнопки по отдельности, воспользовавшись функционалом самих социальных сетей.

Так или иначе, в итоге, вы получите код примерно такого вида:

<script src="http://odnaknopka.ru/ok1.js" type="text/javascript"></script>
 

Заключаем его в тег <noindex> чтобы не раскидываться внешними ссылками.

Также как и в первом способе, наводим на тело новости в режиме правки, клик по шарниру, и из выпавшего меню выбираем "Новости" → "Редактировать шаблон компонента"

Редактировать шаблон компонента

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

шаблона своего блогнота

Сохраняем и любуемся. Аналогично вставляем коды полученные любым другим способом. В общем, ничего сложного. Успехов.

Важное дополнение

Так как сервис "однаконопка" стал детектироваться антивирусом Яндекса как "вредоносный код". После небольшой переписки с Платоном Щукиным решил им больше не пользоваться.



Вопрос

Базаров Михаил написал:

Здраствуйте.
На моем сайте http://camouf.ru на двух страницах обнаружен вирус. Однако, после полной проверки сайта и сервера на котором он запущен, вирусов обнаружено не было (проверялось антивирусом Касперского и Доктор Веб). Не могли бы подсказать что конкретно определяется Вашим антивирусом на данном сайте? Гипотетически думаю что данной угрозой (Поведенческий анализ) определяется плагин mousewheel который ни какой опасности не представляет (используется для возможности прокручивать изображения колесиком мышки).

Ответ

Здравствуйте, Михаил!
Источником заражения являются js-скрипты сервиса odnaknopka.ru , которые находятся на Вашем сайте. При обращении к odnaknopka.ru/ok2.js с User-Agent мобильного устройства происходит автоматическое перенаправление посетителей на вредоносные цели.
Советую Вам обратиться к владельцам данного сервиса за комментариями относительно присутствия вредоносного кода для пользователей мобильных устройств.

С уважением, Платон Щукин
Служба поддержки Яндекса
http://help.yandex.ru/


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

Кнопки нравится, поделиться и класс, вариант третий безопасный

Как и обещал привожу код для вставки кнопок. Все кнопки сгенерированы с помощью инструментов самих социальных сетей, потому не будут определяться Яндексом как опасные (хочется надеяться).

Данный громадный кусок, вставляем в тоже самое место куда до этого вставляли скрипт сервиса однакнопка. Оформляйте как заблагорассудится, привожу свой пример:

<div style="float:left; margin-left:15px;">
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/ru_RU/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="http://developers.facebook.com/docs/reference/plugins/like" data-send="true" data-layout="button_count" data-width="200" data-show-faces="false" data-action="recommend"></div>
</div>

<div style="float:left; margin-left:10px;">
<!-- Put this script tag to the <head> of your page -->
<script type="text/javascript" src="http://vk.com/js/api/share.js?85" charset="windows-1251"></script>

<!-- Put this script tag to the place, where the Share button will be -->
<script type="text/javascript"><!--
document.write(VK.Share.button(false,{type: "round", text: "Сохранить"}));
--></script>
</div>


<div style="float:left; margin-left:10px;">
<a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>


<div style="float:left; margin-left:0px;">
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone></g:plusone>
</div>


<div style="float:left; margin-left:0px;">
<div id="ok_shareWidget"></div>
<script>
!function (d, id, did, st) {
var js = d.createElement("script");
js.src = "http://connect.ok.ru/connect.js";
js.onload = js.onreadystatechange = function () {
if (!this.readyState || this.readyState == "loaded" || this.readyState == "complete") {
if (!this.executed) {
this.executed = true;
setTimeout(function () {
OK.CONNECT.insertShareWidget(id,did,st);
}, 0);
}
}};
d.documentElement.appendChild(js);
}(document,"ok_shareWidget","http://dev.ok.ru","{width:145,height:30,st:'rounded',sz:20,ck:1}");
</script>
</div>

PS: Вариант- ненадежный

И напоследок, предлагаю вашему вниманию сервис сродни однойкнопки pluso вставлять по инструкции "способ 2". На данный момент не забракован Яндексом, но бдительность никто не отменял, если однажды ваш сайт забракуют антивирусом, данный сервис идет под снос в первую очередь.


17.02.2015
Михаил добрый день, прежде всего хочу сказать спасибо за представленные уроки и советы. У меня на шее 3 сайта и все на битриксе. К сожалению программированием я не владею, но логику данной CMS начинаю потихоньку понимать. У меня вопрос такого характера:
Есть инфоблоки (в т.ч. и новостные) скажем у нас есть раздел "Мероприятия" где выведен список news_list (соответственно) переходя в детальное описание какой либо новости (мероприятия) хочется что бы описание (SEO) данного блока выводилось в описание страницы. На данный момент на любой новости стоит описание раздела в целом, а как сделать что бы по каждой новости было отдельно?
У вас чуть выше есть блок с кнопками соцсетей, так вот при нажатии скажем на ВКонтакте он предлагает поделится с друзьями и имеет ссылку с описанием конкретно этого раздела и заголовком, у меня же в разделе новости он при нажатии этой же кнопки выдает описание раздела в целом, а не отдельной новости.
Прошу прощение за слишком подробное описание, просто я не где так и не нашел решение этого вопроса. Может вы поделитесь как решили данную проблему?
За ранее благодарен.
Михаил 19.02.2015
Цитата
Илья Смирнов пишет:
Михаил добрый день, прежде всего хочу сказать спасибо за представленные уроки и советы. У меня на шее 3 сайта и все на битриксе. К сожалению программированием я не владею, но логику данной CMS начинаю потихоньку понимать. У меня вопрос такого характера:
Есть инфоблоки (в т.ч. и новостные) скажем у нас есть раздел "Мероприятия" где выведен список news_list (соответственно) переходя в детальное описание какой либо новости (мероприятия) хочется что бы описание (SEO) данного блока выводилось в описание страницы. На данный момент на любой новости стоит описание раздела в целом, а как сделать что бы по каждой новости было отдельно?
У вас чуть выше есть блок с кнопками соцсетей, так вот при нажатии скажем на ВКонтакте он предлагает поделится с друзьями и имеет ссылку с описанием конкретно этого раздела и заголовком, у меня же в разделе новости он при нажатии этой же кнопки выдает описание раздела в целом, а не отдельной новости.
Прошу прощение за слишком подробное описание, просто я не где так и не нашел решение этого вопроса. Может вы поделитесь как решили данную проблему?
За ранее благодарен.
Если версия битрикс старая (до 14-ой если память не изменяет) то вам нужно создать свойства инфоблока "Ключевые слова" и "Описание"

Потом просто выбрать их в настройках компанента новостей, в выпадающих списках в секции детальной новости, будут доступны эти свойства к выбору- как ключи и описание элемента

В свежей версии, все это делается на вкладке СЕО, ни как лишних манипуляций не требуется.
26.05.2015
Цитата
Михаил Базаров пишет:
Цитата
Илья Смирнов пишет:
Михаил добрый день, прежде всего хочу сказать спасибо за представленные уроки и советы. У меня на шее 3 сайта и все на битриксе. К сожалению программированием я не владею, но логику данной CMS начинаю потихоньку понимать. У меня вопрос такого характера:
Есть инфоблоки (в т.ч. и новостные) скажем у нас есть раздел "Мероприятия" где выведен список news_list (соответственно) переходя в детальное описание какой либо новости (мероприятия) хочется что бы описание (SEO) данного блока выводилось в описание страницы. На данный момент на любой новости стоит описание раздела в целом, а как сделать что бы по каждой новости было отдельно?
У вас чуть выше есть блок с кнопками соцсетей, так вот при нажатии скажем на ВКонтакте он предлагает поделится с друзьями и имеет ссылку с описанием конкретно этого раздела и заголовком, у меня же в разделе новости он при нажатии этой же кнопки выдает описание раздела в целом, а не отдельной новости.
Прошу прощение за слишком подробное описание, просто я не где так и не нашел решение этого вопроса. Может вы поделитесь как решили данную проблему?
За ранее благодарен.
Если версия битрикс старая (до 14-ой если память не изменяет) то вам нужно создать свойства инфоблока "Ключевые слова" и "Описание"

Потом просто выбрать их в настройках компанента новостей, в выпадающих списках в секции детальной новости, будут доступны эти свойства к выбору- как ключи и описание элемента

В свежей версии, все это делается на вкладке СЕО, ни как лишних манипуляций не требуется.
Спасибо Михаил как всегда выручили!))
Обсудить статью на форуме

Кроме создания сайтов, я так же веду блог с заметками о вебразработке, записываю бесплатные видеоуроки и содержу форум, на котором можно задавать вопросы и просто общаться. Заметки, преимущественно - это короткие или подробные рецепты, по реализации часто требуемого функционала- в рамках разработки сайтов на 1С-Битрикс

Цвета торговых предложений из Highload инфоблоков в списке товаров

Подвернулся на доработку очень старый сайт, работал еще на 11-ой версии Битрикс. Выполнили обновление до 16-ой версии и попутно возникла доработка. Ну...

Вывести компонент новостей на страницу в Битрикс

Посмотрел Яндекс метрику на свой сайт, и решил что буду частенько писать сюда именно то, что ищут люди. Итак за последнюю неделю 8 раз пытались найти ...

Умный фильтр только на последнем уровне разделов каталога.

Если в разработаываемом магазине или в принципе в каталоге на Битрикс, вы выводите умный фильтр в разделах - он выводится во всех разделах и подраздел...

Снять ограничение на 50 элементов в поиске по каталогу Битрикс

Второй раз сталкиваюсь с такой засадой: стандартный поиск по каталогу catalog.search в Битрикс, находит (а точнее выводит) в результат поиска только 5...

Ленивая подгрузка картинок в компоненте, на vue js Битрикс

Если на одну страницу сайта выводится большое количество картинок, которые могут долго подгружаться- либо нужно попасть в зеленую зону Google Page Spe...

Получение местоположений через API Битрикс c поиском по select.

Если нужно получить список городов из модуля "Местоположения" можно воспользоваться API Битрикс. Данные местоположения можно использовать в любом мест...

Показать еще
Авторизация
Напомнить пароль Зарегистрироваться
Быстрый вход через соц. сеть