Кнопки «Поделиться новостью» для DLE

Красивая реализация кнопок «Поделиться новостью» для DataLife Engine. При клике на кнопку \»Поделиться\» выскакивает окно с ссылками на новость.

Как реализовать:

1. В шаблоне полной новости fullstory.tpl после тега

{full-story}

Добавляем этот код:

<noindex>
<div class="news_btn">
<hr />
<div class="vk_btn"><a href="http://vk.com/share.php?url={full-link}" target="_blank"><span><img src="{THEME}/images/soc_icon/vk.png" title="Поделиться новостью: {title} в Вконтакте" alt="Вконтакте" />Мне нравится</span></a></div>

<div class="tw_btn">
<script type="text/javascript">
document.write('<a href="https://twitter.com/intent/tweet?source=webclient&text=' + encodeURIComponent('{title} {full-link}') + '" target="_blank"><span><img src="{THEME}/images/soc_icon/tw.png" title="Твитнуть новость: {title}" alt="Твиттер" />Tweet</span></a>');
</script>
</div>
<div class="ya_btn"><a href="http://www.facebook.com/share.php?u={full-link}" target="_blank"><span><img src="{THEME}/images/soc_icon/fb.png" title="Поделиться новостью: {title} в Facebook" alt="Facebook" />Поделиться</span></a></div>
<div class="google_btn"><a href="https://www.google.com/bookmarks/mark?op=add&bkmk={full-link}&title={title}" target="_blank"><span><img src="{THEME}/images/soc_icon/google.png" title="Добавить в закладки: {title}" alt="Google" />В Закладки</span></a></div>
<div class="code_btn">
<script type="text/javascript">
	//<![CDATA[
	$(function() {$( "#LinksPublication" ).dialog({autoOpen: false, show: 'fade', hide: 'fade', width: 650});
	$('#LinksPublication-link').click(function(){$('#LinksPublication').dialog('open'); return false;});
	});
	//]]>
</script>
<a id="LinksPublication-link" href="#"><span><img src="{THEME}/images/soc_icon/g.png" title="Скопировать ссылку и поделиться новостью с друзьями" alt="" />Поделиться</span></a>
<div id="LinksPublication" title="Поделитесь новостью с друзьями" style="display:none; " >
<table align="center" cellpadding="2" cellspacing="1" width="100%">
<tbody>
<tr>
<td class="txtw">Прямой адрес:</td><td><input onclick="this.select()" value="{full-link}" type="text" style="width:100%" readonly="readonly" /></td>
</tr>
<tr>
<td class="txtw">BB-code:</td><td><input onclick="this.select()" value="[url={full-link}]{title}[/url]" type="text" style="width:100%" readonly="readonly" /></td>
</tr>
<tr>
<td class="txtw">HTML ссылка:</td><td><input onclick="this.select()" value='<a href="{full-link}" target="_blank">{title}</a>' type="text" style="width:100%" readonly="readonly" /></td>
</tr>
</tbody>
</table>
</div>
</div>
</div></noindex>
<div class="news_btn"><hr /></div>

2. Добавим стили CSS — В самый конец файла engine.css

#LinksPublication td { padding: 3px 0; }
.news_btn {overflow:hidden; clear:both; margin:0px 0 0 0;}

.news_btn hr { height: 0; border: 0; border-top: 1px solid #eeeeef;  -moz-box-sizing: content-box; box-sizing: content-box; margin: 10px 0; }

.vk_btn {font-size:11px; display:block; float:left; margin:0 5px 0 0;}
.vk_btn a {color:#2b5e81;}
.tw_btn {font-size:11px; display:block; float:left; margin:0 5px 0 0; }
.tw_btn a {color:#2b5e81;}
.ya_btn {font-size:11px; display:block; float:left; margin:0 5px 0 0;}
.ya_btn a span:first-letter {color:#ee4348;}
.google_btn {font-size:11px; display:block; float:left; margin:0 5px 0 0;}
.google_btn a {color:#2b5e81;}
.code_btn {font-size:11px; display:block; float:right;}
.code_btn a {color:#72990e;}
.news_btn a, .news_btn a span {float:left; max-width:290px; overflow:hidden; height:30px; padding: 0 0 0 5px; background: url('../images/soc_icon/soc_btn.png') no-repeat; }
.news_btn a span {display:block; line-height:27px; padding: 0 8px 0 0; background-position: 100% 100%;}
.news_btn a span img {vertical-align:middle; margin:0 5px 0 0;}
.news_btn a:hover {text-decoration:none;}
@media (max-width: 980px) {.news_btn { display: none; } }

3. В целом готово, осталось только загрузить иконки соц-сетей:

Папку soc_icon загружаем в папку images в вашем шаблоне.

Готово.