Кнопки «Подписаться»
-
Здравствуйте. Хочу разместить кнопки «подписаться», «нравится», для Фейсбук, ВК и ОК, в начале и конце каждого поста. Максимум, что мне удалось, это поместить кнопку от Фейсбук в сайдбар с помощью iframe. Прочитал кучу инструкций о вставке кода и скриптов в header.php и single.php, никак не удается их отобразить в посте. Я повторюсь, нужно вставить кнопки подписаться/нравится, а не поделиться. Подскажите правильно решение пожалуйста.
- Тема изменена 4 года, 9 месяцев назад пользователем shugogo.
Страница, с которой нужна помощь: [войдите, чтобы увидеть ссылку]
-
shugogo, привет.
А плагины не рассматривали как вариант решения вопроса?
@vladvector это совершенно не то. Эти плагины предлагают разместить, кнопки «share», «like» по всему сайту, а мне нужны кнопки подписаться. Есть мануалы, в которых описано как это делается, но кнопка не появляется, чтобы я не делал.
shugogo, плагины для функционала соц. сетей разные есть, ссылка выше была лишь как пример. Второе — в некоторых плагинах вы сами выбираете места размещения кнопок + обычно есть шорткод, если не устраивают предустановленные опции.
@vladvector как пример, на сайте adme точка ру, перед началом поста есть желтая кнопка «поделиться», вот что-то типа этого хочу и в этом же месте. Это чтобы было понятно, чего я хочу.
shugogo, «Подписаться на AdMe», то есть? Других жёлтых кнопок не вижу там.
@vladvector да, она
shugogo, а в чём конкретно проблема возникла? Все 3 сервиса дают простой код для внедрения, и
iframe
там нет. Заверните все 3 кода в шорткод, задайте стили, чтобы отображались кнопки в строчку, и выводите шорткод в нужных местах.@vladvector вот в этом и проблема. У меня не получается внедрить. Внедрение состоит из двух этапов: 1. поместить сrрипт в header.php 2. поместить кнопку в single.php.
single.php у меня выглядит так:
<?php get_header(); global $content_width; $content_width = 1068; ?> <div class="td-main-content-wrap td-container-wrap"> <div class="td-container"> <div class="td-crumb-container"> <?php echo tagdiv_page_generator::get_breadcrumbs(array( 'template' => 'single', 'title' => get_the_title(), )); ?> </div> <div class="td-pb-row"> <div class="td-pb-span12 td-main-content"> <div class="td-ss-main-content"> <?php get_template_part('loop-single' ); comments_template('', true); ?> </div> </div> </div> </div> </div> <?php get_footer(); ?>
и куда бы я не вставлял кнопку, она у меня не отображается.
shugogo, а как пытались саму кнопку внедрить? Каким кодом?
@vladvector вот например код фейсбука:
Step 2: Include the JavaScript SDK on your page once, ideally right after the opening body tag. <div id="fb-root"></div> <script async defer crossorigin="anonymous" src="https://connect.facebook.net/ru_RU/sdk.js#xfbml=1&version=v6.0&appId=2832938703487425&autoLogAppEvents=1"></script> Step 3: Place this code wherever you want the plugin to appear on your page. <div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-width="" data-layout="standard" data-action="like" data-size="small" data-share="true"></div>
shugogo, у ВК аналогично (у ОК, думаю, тоже). логично было бы разбить решение на 3 части: 1 — это шорткод с кодом самих кнопок, т.е. часть:
Step 3: Place this code wherever you want the plugin to appear on your page. <div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-width="" data-layout="standard" data-action="like" data-size="small" data-share="true"></div>
; 2 — это код подключения скриптов (можно ограничить их подключением только на страницах через is_single() ); 3 — стили (если нужны).
@vladvector а можно поподробней об этой схеме? не силен я в этом.
shugogo, попробую. В предыдущем сообщении код некорректно отобразился.
Код добавляйте либо в дочернюю тему, либо в функциональный плагин. Итак, файл functions.php:
function social_follow_buttons() { if( is_single() ){ ?> <!-- VK --> <script type="text/javascript" src="https://vk.com/js/api/openapi.js?167"></script> <script type="text/javascript">VK.init({apiId: API_ID, onlyWidgets: true});</script> <!-- OK --> <script>... <?php } } add_action( 'wp_head', 'social_follow_buttons' );
Это код для добавления виджета VK (API_ID надо заменить на свой, разумеется). Туда же запишите код от OK (под строчкой
<!-- OK -->
).С FB чуть неприятнее, потому что их код надо располагать сразу после
<body>
, так что это уже надо будет делать непосредственно в файле темы, отвечающем за записи. Сам код такой:<div id="fb-root"></div> <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v6.0"></script>
—-
Далее, создадим шорткод (всё в том же functions.php) [sociallikebuttons]:
function social_likes_shortcode() { if( is_single() ){ $string .= '<div class="social-follow-buttons"><div id="vk_like"></div><script type="text/javascript">VK.Widgets.Like("vk_like", {type: "mini", height: 30});</script><div id="ok_shareWidget"></div><div class="fb-like" data-href="https://ваша_ссылка.ru/" data-width="" data-layout="button_count" data-action="like" data-size="small" data-share="false"></div></div>'; return $string; } } add_shortcode('sociallikebuttons', 'social_likes_shortcode');
Это все 3 кнопки: ВК, ОК, ФБ, обёрнутые в
<div class="social-follow-buttons">
.Последний шаг — вывод шорткода в нужном вам месте:
<?php echo do_shortcode("[sociallikebuttons]"); ?>
(к примеру, для темы TwentyTwenty этот код надо записать в файл /wp-content/themes/twentytwenty/template-parts/content.php).shugogo, забыл добавить, что потом можно (по желанию) добавить уже стили ко всему этому делу.
@vladvector большое спасибо за подробную инструкцию! С фейсбуком я не стал замарачиваться, сайт предлагает вставку с помощью iframe, я просто поместил его в блок предложенный вами и все заработало. Но проблема вставки осталась. В сайдбар шорткод вставляется, а в запись никак. У меня стоит тема Newspaper и если я правильно понимаю, то за вывод записи отвечает single.php. Я уже пробовал вставлять по все возможные места, но результата нет. Я даже ради интереса попытался в ставить в хэдер и футер, но кнопки все равно не выводятся.
- Тема «Кнопки «Подписаться»» закрыта для новых ответов.