Как сделать социальные закладки

+16
1.93K

Итак задача, нужно вставить ссылки соц. сетей.

Способ №1. На основе Яндекс API Блок «Поделиться»

1. Переходим на страницу api.yandex.ru/share/ и ставим галочки напротив нужных соц. сетей.
2. Выбираем внешний вид ( есть 2 варианта)
3. Будет сгенерирован код. Пример:

  1.  
  2. <script type="text/javascript" src="//yandex.st/share/share.js" charset="utf-8"></script>
  3. <script type="text/javascript">
  4. new Ya.share({
  5. 'element': 'ya_share1',
  6. 'elementStyle': {
  7. 'type': 'button',
  8. 'linkIcon': true,
  9. 'border': false,
  10. 'quickServices': ['vkontakte', 'facebook', 'twitter', 'odnoklassniki', 'lj']
  11. },
  12. 'popupStyle': {
  13. 'copyPasteField': true
  14. }
  15. });
  16. </script>
  17. <span id="ya_share1"></span>
  18.  

4. Открываем файл шаблона. В данном случаи вставляем код после даты поста, значит нам нужен файл
\www\templates\_default_\components\com_content_read.tpl
* открыть этот файл можно с помощью любого блокнота, я использую Notepad++
5. Находим в этом файле

  1. {if $article.showdate}
  2. <div class="con_pubdate">
  3. {if !$article.published}<span style="color:#CC0000">{$LANG.NO_PUBLISHED}</span>{else}{$article.pubdate}{/if} - <a href="{profile_url login=$article.user_login}">{$article.author}</a>
  4. </div>
  5. {/if}

и после вставляем

  1. {* =============== кнопки в соц закладки =============================== *}
  2. <span id="ya_share1"></span>

* Нет, я не ошибся вставляем именно эту часть сгенерированного Яндексом кода
5. Открываем файл \www\templates\_default_\template.php находим </head> и выше вставляем оставшуюся часть кода:

  1. <script type="text/javascript" src="//yandex.st/share/share.js" charset="utf-8"></script>
  2. <script type="text/javascript">
  3. new Ya.share({
  4. 'element': 'ya_share1',
  5. 'elementStyle': {
  6. 'type': 'button',
  7. 'linkIcon': true,
  8. 'border': false,
  9. 'quickServices': ['vkontakte', 'facebook', 'twitter', 'odnoklassniki', 'lj']
  10. },
  11. 'popupStyle': {
  12. 'copyPasteField': true
  13. }
  14. });
  15. </script>

Способ №2. На основе Сервиса addthis.com

1. Переходим по адресу addthis.com
2. В разделе Get AddThis выбираем внешний вид закладок.
3. В разделе Do you want analytics? выбираем верхний пункт, если хотит получить статистику, нижний — если не хотим.
4. Жмем Get Your Button
5. Проходим процедуру регистрации.
6. После регистрации будет доступен код:
* на примере моего кода

  1.  
  2. <!-- AddThis Button BEGIN -->
  3. <div class="addthis_toolbox addthis_default_style ">
  4. <a href="http://www.addthis.com/bookmark.php?v=250&username=rim89" class="addthis_button_compact">Share</a>
  5. <span class="addthis_separator">|</span>
  6. <a class="addthis_button_preferred_1"></a>
  7. <a class="addthis_button_preferred_2"></a>
  8. <a class="addthis_button_preferred_3"></a>
  9. <a class="addthis_button_preferred_4"></a>
  10. </div>
  11. <script type="text/javascript">var addthis_config = {"data_track_clickback":true};</script>
  12. <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=rim89"></script>
  13. <!-- AddThis Button END -->
  14.  

7. Открываем файл шаблона. В данном случаи вставляем код после даты поста, значит нам нужен файл
\www\templates\_default_\components\com_content_read.tpl
* открыть этот файл можно с помощью любого блокнота, я использую Notepad++
8. Находим в этом файле

  1. {if $article.showdate}
  2. <div class="con_pubdate">
  3. {if !$article.published}<span style="color:#CC0000">{$LANG.NO_PUBLISHED}</span>{else}{$article.pubdate}{/if} - <a href="{profile_url login=$article.user_login}">{$article.author}</a>
  4. </div>
  5. {/if}

и после вставляем

  1. {* =============== кнопки в соц закладки =============================== *}
  2. <div class="addthis_toolbox addthis_default_style ">
  3. <a href="http://www.addthis.com/bookmark.php?v=250&username=rim89" class="addthis_button_compact">Share</a>
  4. <span class="addthis_separator">|</span>
  5. <a class="addthis_button_preferred_1"></a>
  6. <a class="addthis_button_preferred_2"></a>
  7. <a class="addthis_button_preferred_3"></a>
  8. <a class="addthis_button_preferred_4"></a>
  9. </div>

9. Открываем файл \www\templates\_default_\template.php находим </head> и выше вставляем оставшуюся часть кода:

  1. <script type="text/javascript">var addthis_config = {"data_track_clickback":true};</script>
  2. <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=rim89"></script>

Вот и все. Всем удачи😊и моё почтение разработчикам системы.

0
bloodflood bloodflood 11 лет назад #
Полезная вещь, спасибо!
0
Anabiotick Anabiotick 11 лет назад #
В качестве опыта неплохо. Плюсы+++++++++++++ Но ведь есть же плагин Одна кнопка, правда там не так много соцсервисов, но кое-какие есть Хотя чем больше решений, тем лучше для развития :)
+2
Fuze Fuze 11 лет назад #
100500-тый бессмысленный пост как вставить ява код закладок в шаблон....
ну хоть бы плагином что-ли оформляли....
+3
r2 r2 11 лет назад #

но зато оформлен хорошо
будем надеяться что это разминочный пост :)

+3
Greener Greener 11 лет назад #
Пост ведь никому не мешает, а для новичков пригодится! Энтузиазм надо поощрять. А то когда дело дойдет до высокого профессионального уровня, человек может уже обломаться делиться опытом только из-за того что когда-то его энтузиазм на корню подрубили...
+4
Fuze Fuze 11 лет назад #
да не кто ж не против)) пост цел и невредим. Я знаю что такое "маленькие победы" по себе. Просто есть такое понятие, как порог "выкладывания в массы".
Может для начала показывать друзьям, знакомым свои минипобеды...
Все это хорошо, но вы поймите есть офсайт проекта InstantCms, мы просто не можем позволять (хотя все равно позволяем) постить тут слишком простые и очевидные вещи.
Так что давайте просто немного прикидывать и думать о целесобразности отдельного поста. Ведь все тоже самое описано на страницах того же яндекса или addthis.com.
Я не в коем случае не хочу заткнуть энтузиазм автора, просто давайте писать действительно полезные посты!
+3
Coolmax Coolmax 11 лет назад #
А мне пост помог. Так что автору спасибо и "+".
+5
ГеймОверСистемХалтед ГеймОверСистемХалтед 11 лет назад #
Хоть и не ново, но для новичков расписано хорошо. +
0
lezginka.ru lezginka.ru 11 лет назад #
а плагин автор еще не сделал ?
+1
Anabiotick Anabiotick 11 лет назад #
Так есть же уже давно "Одна кнопка". Или ее не хватает? Работает и в блогах и в статьях
0
surfer surfer 11 лет назад #
спасибо, вопросы:
1. различия в кодировках не повлияют на работу?
2. скрипт будет подгружаться и на все страницы сайта, не тяжеловато-то будет?
0
11 лет назад #
Мне тоже пригодилось, спасибо!
0
surfer surfer 10 лет назад #
Спасибо, помогло! Хотя скрипт яши уже изменился,единственное как-то можно сделать чтоб не во всех статьях это отражалось, а выборочно? есть такой плагин?
0
Camfrog Camfrog 10 лет назад #
Спасибо!

Еще от автора

CKEditor 3.6 + File Manager
Обновленная версия этого редактора. Скачать CKEditor 3.
CKEditor 3.5.3 + File Manager
Обновленная версия этого редактора. Скачать CKEditor 3.5.
Автообрезание заголовка
Задача: в модуле вывода последних новостей сделать автоматическое обрезание длинных заголовков. Решение: 1.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.