jquery - plugin - addthis script
Cambiar AddThis url dinámicamente con jQuery (6)
AddThis proporciona la función addthis.update ("compartir", "url", valor) (pero es una función con errores en IE8); prueba este
for(var i = 0; i < addthis.links.length; i++){
addthis.links[i].share.url= "new url";
}
Estoy tratando de cambiar dinámicamente la URL enviada por addthis. Cuando un usuario altera un elemento, actualiza un área de texto que contiene una url personalizada para que pueda volver a esa url y continuar / ver su trabajo.
Estoy creando un botón adicional así (a partir de sus documentos 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");
});
Luego, cuando se actualiza la url, estoy tratando de actualizar la URL de compartir de addthis así:
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");
}
Los botones originales se están generando y contienen la url correcta, pero cuando la función de actualización de url ejecuta el addthis, la url de compartir no se está actualizando. ¿Cómo puedo obligarlo a actualizar la URL de addthis?
Es tan simple como esto:
addthis.update(''share'', ''url'', "http://www.example.com");
addthis.update(''share'', ''title'', "Example Domain Title");
addthis.update(''share'', ''description'', "Hello, I am a description");
Saludos gary
Paso 1: preparar el contenido ajax para cargarlo con otro 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>
Paso 2: Preparando mi configuración de 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;
}
});
Las líneas anteriores dentro de la función "afterShow ()" son importantes para mantener una nota;
Si desea cambiar la URL de addthis después de que se haya cargado el html (en caso de ajax o algunos eventos de usuario), utilice el siguiente truco. Los apis de Addthis están rotos como el [09/04/13 11:42:24 AM] sunny jhunjhunwala:
addthis.update(''share'', ''url'', ''http://www.sourcen.com'');
addthis.url = "http://www.sourcen.com";
addthis.toolbox(".addthis_toolbox");
http://www.sourcen.com ---> new url
Para personalizar el botón:
<a class="addthis_button_compact" >
<img src="./images/share.png" width="36" height="36" border="0" alt="Share" />
</a>
Parte de la cabeza:
<meta property="og:title" content="YOUR TITLE" />
<meta property="og:description" content="YOUR DESCRIPTION" />
<meta property="og:image" content="YOUR IMAGE URL" />
Parte del cuerpo: En mi caso, estoy usando php, establezco los atributos del cuerpo de esta manera.
<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; ?>"
>
Para actualizar el contenido dinámicamente (Parte 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>
<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>
Utilicé una variable global shareConfig para realizar un seguimiento de la URL y la configuración del título. Tengo varios botones adicionales en una página web, cada uno comparte contenido diferente. Por lo tanto, he agregado un isSameNode para asegurarme de que solo actualizo el botón que quiero.
Aunque la URL y el título se cambian dinámicamente, los atributos addthis:url y addthis:title deben estar presentes en el botón ( <span> ), o de lo contrario no funcionará.