Вопрос или проблема
Я работаю над разработкой плагина для WordPress, чтобы добавить кнопки социальных сетей внутри цитат (для того, чтобы делиться цитируемым текстом в социальных сетях Twitter и Facebook). Чтобы сайты выглядели так:
Вот текущий js:
jQuery(document).ready(function () {
var blockquotes = jQuery('blockquote');
for (var i = 0; i < blockquotes.length; i++) {
var blockQuoteText = jQuery(blockquotes[i]).text();
var currentUrl = window.location;
var textColor = jQuery(blockquotes[i]).css('color');
// добавьте кнопки поделиться (замените TwitterName на ваш ник в Twitter для автоматических упоминаний)
// измените пути к иконкам в соответствии с вашей установкой (ссылка для скачивания ниже)
jQuery(blockquotes[i]).append('<div class="quote-share"><div class="wrapper">' +
'<a class="quote-twitter pop-up" style="color:' + textColor + '"' +
'href="http://twitter.com/intent/tweet?status=" + blockQuoteText + "+' + currentUrl + '+%40' + data.twitter_id + '">' +
'<span class="icon-twitter"/></a>' +
'<a class="quote-facebook pop-up" style="color:' + textColor + '"' +
'href="https://www.facebook.com/sharer/sharer.php?u=' + currentUrl + '&src=sdkpreparse&title=" + blockQuoteText + "">' +
'<span class="icon-facebook"/>' +
'</a></div></div>');
}
// всплывающее окно без блокировки блокировщиками всплывающих окон
jQuery('a.pop-up').live('click', function () {
newwindow = window.open(jQuery(this).attr('href'), '', 'height=640,width=600');
if (window.focus) {
newwindow.focus()
}
return false;
});
});
Но потом я наткнулся на плагин цитирования Facebook: https://developers.facebook.com/docs/plugins/quote
Который был бы идеальным, но я не могу понять, как прикрепить скрипт плагина к иконке, а не так, как они это сделали, выделяя текст. Мог бы кто-нибудь помочь мне, как прикрепить новую функцию “Цитата” для Facebook к кнопке, чтобы она делилась текстом внутри блока цитаты?
Продолжал искать и нашел, что я могу просто добавить параметр url для цитаты (источник):
- URL (конечно) → u
- пользовательское изображение → picture
- пользовательский заголовок → title
- пользовательская цитата → quote
- пользовательское описание → description
Пример:
https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fstackoverflow.com%2Fq%2F20956229%2F1101509&picture=http%3A%2F%2Fwww.applezein.net%2Fwordpress%2Fwp-content%2Fuploads%2F2015%2F03%2Ffacebook-logo.jpg&title=A+nice+question+about+Facebook"e=Does+anyone+know+if+there+have+been+recent+changes+which+could+have+suddenly+stopped+this+from+working%3F&description=Apparently%2C+the+accepted+answer+is+not+correct.
Ответ или решение
Плагин Facebook для блочных цитат: Инструкции по реализации
В условиях растущей важности интеграции социальных сетей в контент, добавление кнопок для совместного использования в блочных цитатах предоставляет пользователям удобный способ делиться интересующей их информацией. Ваша задача заключается в том, чтобы создать настраиваемый плагин для платформы WordPress, который будет включать кнопки для активного совместного использования текста цитат в Twitter и Facebook.
Шаг 1: Определение структуры JavaScript
Исходный код, который вы предоставили, уже содержит основы того, как извлекать текст из блочных цитат и добавлять кнопки для расшаривания. При этом необходимо будет немного изменить код, чтобы интегрировать параметры из Facebook Quote Plugin.
jQuery(document).ready(function () {
var blockquotes = jQuery('blockquote');
for (var i = 0; i < blockquotes.length; i++) {
var blockQuoteText = jQuery(blockquotes[i]).text();
var currentUrl = window.location.href;
var textColor = jQuery(blockquotes[i]).css('color');
// Добавляем кнопки для расшаривания с использованием параметров Facebook
jQuery(blockquotes[i]).append('<div class="quote-share"><div class="wrapper">' +
'<a class="quote-twitter pop-up" style="color:' + textColor + '" href="http://twitter.com/intent/tweet?status=' + encodeURIComponent(blockQuoteText + ' ' + currentUrl + ' @YourTwitterHandle') + '">' +
'<span class="icon-twitter"></span></a>' +
'<a class="quote-facebook pop-up" style="color:' + textColor + '" href="https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(currentUrl) + '&title=' + encodeURIComponent(blockQuoteText) + '">' +
'<span class="icon-facebook"></span>' +
'</a></div></div>');
// Обработчик всплывающего окна без блокировки
jQuery('a.pop-up').on('click', function () {
var newwindow = window.open(jQuery(this).attr('href'), '', 'height=640,width=600');
if (window.focus) { newwindow.focus(); }
return false;
});
}
});Шаг 2: Использование параметров Facebook
Теперь, когда вы собираете данные, важно использовать параметры, которые Facebook предоставляет для улучшения совместного использования. Ваша конструкция ссылки для Facebook должна включать:
u— URL, который вы хотите расшарить.title— текст, который будет отображён с постом.quote— дополнительная цитата, если это необходимо.
Следовательно, в коде выше для кнопки Facebook мы включаем параметры в URL следующим образом:
'<a class="quote-facebook pop-up" style="color:' + textColor + '" href="https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(currentUrl) + '&title=' + encodeURIComponent(blockQuoteText) + '"e=' + encodeURIComponent(blockQuoteText) + '">'Шаг 3: Тестирование и оптимизация
После внесения изменений, убедитесь, что плагин полностью функционален. Проверьте кроссбраузерную совместимость, а также работоспособность кнопок расшаривания на различных устройствах.
Заключительное слово
Совместное использование контента в социальных сетях критически важно для увеличения видимости контента, и правильная настройка вашего плагина для WordPress может значительно улучшить взаимодействие с пользователями. Тщательно тестируйте ваш новый функционал и регулярно собирайте отзывы для дальнейшей оптимизации. Успехов в разработке!