Найти на сайте

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

+16
2.39K
  2. Блоги
  3. Как сделать социальные закладки

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

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

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

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

Еще от автора

CKEditor 3.6 + File Manager

CKEditor 3.6 + File Manager

Обновленная версия этого редактора. Скачать CKEditor 3.
15
CKEditor 3.5.3 + File Manager

CKEditor 3.5.3 + File Manager

Обновленная версия этого редактора. Скачать CKEditor 3.5.
22
Автообрезание заголовка

Автообрезание заголовка

Задача: в модуле вывода последних новостей сделать автоматическое обрезание длинных заголовков. Решение: 1.
8

InstantCMS Team

Связь с нами
Email dev@instantcms.ru

Делаем полезные Интернет проекты с 2008 года 💫

О проекте

Поддержка

Дополнения

Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.