Динамически изменять url-адрес AddThis с помощью jQuery
Я пытаюсь динамически изменить URL-адрес, отправленный addthis. Когда пользователь изменяет элемент, он обновляет текстовую область, содержащую пользовательский url-адрес, чтобы они могли вернуться к этому url-адресу и продолжить/просмотреть свою работу.
Я создаю кнопку addthis так (из их документов API):
var addthis_share = {url:"http://www.johndoe.com"}
$(document).ready(function(){
var tbx = document.getElementById("toolbox"),
svcs = {email: 'Email', print: 'Print', facebook: 'Facebook', expanded: 'More'};
for (var s in svcs) {
tbx.innerHTML += '<a class="addthis_button_'+s+'">'+svcs[s]+'</a>';
}
addthis.toolbox("#toolbox");
});
затем, когда url-адрес обновляется, я пытаюсь обновить URL-адрес общего ресурса addthis следующим образом:
function updateURL(){
...get some variables here and generate a new url
var newURL="http://the.url.i.want.to.share.com";
$('#tagUrl').val(newURL);
//addthis_share = {url:newURL}
addthis_share = {url:newURL}
addthis.toolbox("#toolbox");
}
исходные кнопки генерируются и содержат правильный url-адрес, но когда функция обновления url-адреса выполняет url-адрес общего ресурса addthis не обновляется. Как я могу заставить его обновить url-адрес addthis?
6 ответов
Если вы хотите изменить url addthis после загрузки html (в случае ajax или некоторых событий пользователя), пожалуйста, используйте ниже hack . API Addthis разбиты как на
[09/04/13 11:42:24 AM]
солнечный jhunjhunwala:
addthis.update('share', 'url', 'http://www.sourcen.com');
addthis.url = "http://www.sourcen.com";
addthis.toolbox(".addthis_toolbox");
http://www.sourcen.com ---> новый url
это так просто:
addthis.update('share', 'url', "http://www.example.com");
addthis.update('share', 'title', "Example Domain Title");
addthis.update('share', 'description', "Hello, I am a description");
Ура, Гэри!--2-->
модуль AddThis предоставляет модуля AddThis.функция update ("share"," url", value) (но это функция багги в IE8); попробуйте это:
for(var i = 0; i < addthis.links.length; i++){
addthis.links[i].share.url= "new url";
}
<span id="share-obj" addthis:url="" addthis:title=""></span>
<script type="text/javascript">
var shareConfig = {url: '', title: ''};
addthis.button('#share-obj', {}, shareConfig);
addthis.addEventListener('addthis.menu.open', function(event){
if ( ! event.data.element.isSameNode($('#share-obj')[0])) {
return;
}
event.data.share.title = shareConfig.title;
event.data.share.url = shareConfig.url;
});
// in updateURL() or any other place during runtime...
function updateURL() {
shareConfig.url = 'http://different.url';
shareConfig.title = 'Title changed dynamically...';
}
</script>
я использовал глобальную переменную shareConfig
для отслеживания конфигурации URL и заголовка. У меня есть несколько кнопок addthis на веб-странице, каждый из которых использует разное содержимое. Поэтому я добавил isSameNode
чтобы убедиться, что я только обновляю кнопку, которую я хочу.
хотя URL и заголовок изменяются динамически,addthis:url
и addthis:title
атрибуты должны присутствовать в кнопку (<span>
), иначе это не сработает.
Шаг-1: Подготовка содержимого ajax для загрузки с другим HTML;
<div class="addthis_sharing_toolbox-CUSTOM" data-url="<?php my_dynamic_link(); ?>" data-title="<?php my_dynamic_title(); ?>">
<a class="addthis_button_email" style="cursor:pointer"></a>
<a class="addthis_button_facebook" style="cursor:pointer"></a>
<a class="addthis_button_twitter" style="cursor:pointer"></a>
<a class="addthis_button_linkedin" style="cursor:pointer"></a>
</div>
Шаг-2: Подготовка моей настройки fancybox ajax;
$('.popUpBtn').fancybox({
//....other fancybox settings can go here...
//....
afterShow : function(current, previous){
//addthis.init();
addthis.update('share', 'url', $('.fancybox-inner .addthis_sharing_toolbox-CUSTOM').data('url'));
addthis.update('share', 'title', $('.fancybox-inner .addthis_sharing_toolbox-CUSTOM').data('title'));
//addthis.update('share', 'description', "Hello, I am a description");
addthis.toolbox('.addthis_sharing_toolbox-CUSTOM'); //-->Important: this selector should not be anything from the addthis settings page; We can choose any other names like normal selectors;
}
});
вышеуказанные строки внутри функции "afterShow ()" важны для сохранения заметки;
настроить кнопку:
<a class="addthis_button_compact" >
<img src="./images/share.png" width="36" height="36" border="0" alt="Share" />
</a>
Головной Части:
<meta property="og:title" content="YOUR TITLE" />
<meta property="og:description" content="YOUR DESCRIPTION" />
<meta property="og:image" content="YOUR IMAGE URL" />
Body Part: в моем случае я использую php, я устанавливаю атрибуты тела так.
<body
data-url="<?php echo basename($_SERVER['REQUEST_URI']); ?>"
data-title="<?php echo $info->record_info->brand; ?>"
data-description="<?php echo $info->record_info->description; ?>"
data-media="<?php echo ./uploads/logos/<?php echo $info->record_info->logo; ?>"
>
для динамического обновления содержимого (часть JS):
<script>
addthis.update('share', 'url', $('body').data('url')); // will set the URL
addthis.update('share', 'title', $('body').data('title')); // will set the title
addthis.update('share', 'description', $('body').data('description')); // will set the description
addthis.update('share', 'media', $('body').data('media')); // will set the image if you are sharing
</script>