Сниппет MODX Evolution sRadio - генерация и вывод кнопок "поделись с друзьями" (обновленная версия)

В 2012 году я публиковал топик на MODX.im о сниппете, который сопосбен простым способом выводить кнопки "поделиться" .

За 5 лет в решении практически ничего не поменялось, слега доработал код для SEO и сделал иконки в SVG.

Сарафанное радио - sRadio MODX Evo snippet

В состав сниппета sRadio входит:

Набор иконок в формате SVG

Набор стилей CSS:

#sRadio {
float: right;
line-height: 30px;
}
#sRadio > strong {
margin-right: 10px;
}
#sRadio > a {
vertical-align: middle;
display: inline-block;
margin: 0 10px 0 0;
width: 20px;
height: 20px;
text-indent: -9999px;
overflow: hidden;
background-repeat: no-repeat;
background-position: center center;
background-size: 80% 80%;
border-radius: 2px;
box-shadow: inset 0 -1px 0 0 rgba(0,0,0,.2);
}
#sRadio > a:last-child {
margin-right: 0;
}
#sRadio > a:hover {
width: 30px;
height: 30px;
}
#sRadio > a.fb {
background-color: #3b5998;
background-image: url(../images/social/facebook.svg);
}
#sRadio > a.gp {
background-color: #db4437;
background-image: url(../images/social/googleplus.svg);
}
#sRadio > a.gg {
background-color: #aaa;
background-image: url(../images/social/googlebookmarks.svg);
}
#sRadio > a.od {
background-color: #f5821f;
background-image: url(../images/social/odnoklassniki.svg);
}
#sRadio > a.tw {
background-color: #41abe1;
background-image: url(../images/social/twitter.svg);
}
#sRadio > a.vk {
background-color: #5b7aa8;
background-image: url(../images/social/vkontakte.svg);
}

Код сниппета:

 <?php
/**
* sRadio
*
* Dysplay socialmedia icons
*
* vk = Vkontakte
* od = Odnoklassniki
* gp = Google+
* gg = Google bookmarks
* fb = Faceook
* tw = Twitter
* usage: [[sRadio? &layout=`fb, vk, od` &lng=`en''']]
* Display only Facebook, Vkontakte and Odnoklassniki logos with English titles
*
* @category snippet
* @version 1.1
* @license http://www.gnu.org/copyleft/gpl.html GNU Public License (GPL)
* @internal @properties
* @internal @modx_category
* @author Alexander Sharapov | a-sharapov.com
*
*/

$tpl = (isset($tpl)) ? $tpl : null;
$pre = (isset($pre)) ? $pre : null;

$FACEBOOK_TITLE="Поделиться ссылкой с друзьями в Facebook";
$GOOGLE_PLUS_TITLE="Поделиться ссылкой с друзьями в Google+";
$GOOGLE_LINKS_TITLE="Сохранить персональную закладку в Google";
$ODNOKLASSNIKI_TITLE="Поделиться ссылкой с друзьями на Однокласниках";
$TWITTER_TITLE="Прочирикать об этой странице в Twitter";
$VKONTAKTE_TITLE="Поделиться ссылкой с друзьями в Вконтакте";

$layout = (isset($layout)) ? $layout : "fb, gp, gg, od, tw, vk";
$layoutarray = explode(", ", $layout);

$pagettle = urlencode($modx->documentObject['pagetitle']);
$pageuri = $modx->makeUrl($modx->documentIdentifier, '', '', 'full');

if ($tpl) {
if ($modx->getChunk($tpl)) {
$template = $modx->getChunk($tpl);
} else {
$message .= '<div class="error-msg">Указанный в вызове сниппета <b>sRadio</b> чанк не найден.</div>';
}
}

$smedia = Array(
"fb"=>Array(
"$FACEBOOK_TITLE",
"http://www.facebook.com/sharer.php?u=$pageuri&amp;t=$pagettle"
),
"gp"=>Array(
"$GOOGLE_PLUS_TITLE",
"https://plusone.google.com/_/+1/confirm?hl=ru&amp;url=$pageuri"
),
"gg"=>Array(
"$GOOGLE_LINKS_TITLE",
"http://www.google.com/bookmarks/mark?op=edit&amp;output=popup&amp;bkmk=$pageuri&amp;title=$pagettle"
),
"od"=>Array(
"$ODNOKLASSNIKI_TITLE",
"http://www.odnoklassniki.ru/dk?st.cmd=addShare&amp;st._surl=$pageuri&amp;title=$pagettle"
),
"tw"=>Array(
"$TWITTER_TITLE",
"http://twitter.com/share?text=$pagettle&amp;url=$pageuri"
),
"vk"=>Array(
"$VKONTAKTE_TITLE",
"http://vkontakte.ru/share.php?url=$pageuri"
),
);

$output .= '<!--noindex--><div id="sRadio">'.$pre;
foreach ($smedia as $key => $value) {
if (in_array($key, $layoutarray)) {
if (!$tpl) {
$output .= '<a rel="external nofollow" target="_blank" href="'.$value[1].'" class="'.$key.'" title="'.$value[0].'">'.$value[0].'</a>';
} else {
$fststep = str_replace("", $key, $template);
$sndstep = str_replace("", $value[0], $fststep);
$output .= str_replace("", $value[1], $sndstep);
}
}
}
$output .= '</div><!--/noindex-->';
if (!$message) {
return $output;
} else {
return $message;
}

Результат работы сниппета вы можете видеть чуть ниже справа.

Кстати, если у вас есть идеи по улучшению сниппета - пишите в комментарии.

 

В тему: Социальные сети чем—то напоминают Древний Египет. Все пишут на стенах и поклоняются кошкам.

×
Предложите тему или интересную задачу для следующей статьи:
×

Ждем входящих данных...