Cada botón que añadimos supone por una parte más código a cargar y no sólo por esas pocas líneas que ponemos, sino también por todo el contenido que dichas líneas generan al llamar a sus correspondientes funciones JavaScript o al contenido de otras páginas externas para mostrarse mediante iframes.
Por otra parte, cada llamada a esos sitios externos supone una nueva petición para el servidor que siempre es también motivo de algo de demora. Es verdad que para casi todos existen sistemas asíncronos (Google+, Pinterest) que alivian un poco este tema, ya que no cargan todo ese código hasta que el contenido principal de nuestro propio sitio no ha aparecido, pero a la postre, también se cargan y suman.
Un sitio dónde me gusta comprobar esto porque es muy gráfico es en Pingdom Tools. En esa o cualquier otra herramienta similar, fijaros en los ficheros que se cargan y que llevan el nombre fb, twitter o plus, aunque simplemente con una conexión lenta (móvil) ya se puede apreciar perfectamente como esto de los botoncitos es de lo que más tarda en cargar.
Pero pocos
Pues nada, hoy veremos un sistema para que todo eso que se tiene que cargar, sólo se haga cuando el usuario pinche en el botón en cuestión y por otra parte, que este tenga el aspecto que nosotros queramos... dentro de unos límites.
Porque eso sí, esta mejora tendrá un precio y será que tendremos que renunciar a los contadores de los botones. Pero ¿a quién le importan esos números además de a nuestro ego? Recordar que para conocerlos ya existen otras herramientas.
Todo el sistema se basa en usar direcciones específicas que permiten pasar parámetros y que casi todos los servicios tienen para poder remitir artículos. Aquí tenéís una lista de direcciones directas para compartir que incluye las redes más populares y alguna cosilla más por si con las seis que pondré no tenéis bastante.
Teniendo esas direcciones y añadiéndole unas cuantas variables, habremos resuelto el tema del lastre de los botones sociales.
No vamos a cargar nada a priori, ni librerías, ni imágenes externas, ni datos sobre contadores... nada. Todo serán enlaces (casi) simples y será después de que nuestra página haya terminado de cargar -no antes- cuando al pinchar los botones se lanzará una ventana emergente con el servicio escogido y automáticamente se añadirán en ella los datos del artículo: título, resumen, imagen, etc.
Sería algo como esto que podéis probar a continuación, pues los siguientes son botones de ese tipo, totalmente operativos.
Una vez explicado que esto son simples enlaces, para conseguir que se abran en ventana nueva lo que hacemos es añadir un JavaScript básico para generar un pop-up y mediante las variables DATA de Blogger, ya añadimos el resto de datos que en cada caso nos son necesarios. Para otras plataformas el sistema sería el mismo pero utilizando las variables que le sean propias (y que desconozco).
Este sería el código a insertar en la plantilla, allá dónde queramos que aparezcan los botones. Como siempre, los dos sitios que parecen idóneos para Blogger serían dentro del post-header o del post-footer.
<div class='botonera'>
<!-- Google+ -->
<div class='goog'>
<a expr:onclick='"window.open('http://plus.google.com/share?url=" + data:post.canonicalUrl + "&title=" + data:post.title + "','','width=500,height=500');"' href='javascript:void();'>Google+</a></div>
<!-- Twitter -->
<div class='twit'>
<a expr:onclick='"window.open('http://twitter.com/home?status=" + data:post.title + " " + data:post.canonicalUrl + " Vía:@oloman','','width=500,height=500');"' href='javascript:void();'>Twitter</a></div>
<!-- Pinterest -->
<div class='pint'>
<a href='javascript:void((function(){var%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)})());'>Pinterest</a></div>
<!-- Facebook -->
<div class='face'>
<a href='javascript:void();' expr:onclick='"window.open('http://www.facebook.com/sharer.php?m2w&s=100&p[title]=" + data:post.title + "&p[summary]=" + data:post.snippet + "&p[url]=" + data:post.canonicalUrl + "','','width=650,height=450');"'>Facebook</a></div>
<!-- Menéame -->
<div class='mene'>
<a expr:onclick='"window.open('http://www.meneame.net/submit.php?url=" + data:post.canonicalUrl + "&title=" + data:post.title + "','','width=650,height=450');"' href='javascript:void();'>Menéame</a></div>
<!-- Linkedin -->
<div class='link'>
<a expr:onclick='"window.open('http://www.linkedin.com/shareArticle?mini=true&url=" + data:post.canonicalUrl + "&title=" + data:post.title + "&summary=" + data:post.snippet + "&source=Oloblogger','','width=650,height=450');"' href='javascript:void();'>Linkedin</a></div>
</div>
<!-- Google+ -->
<div class='goog'>
<a expr:onclick='"window.open('http://plus.google.com/share?url=" + data:post.canonicalUrl + "&title=" + data:post.title + "','','width=500,height=500');"' href='javascript:void();'>Google+</a></div>
<!-- Twitter -->
<div class='twit'>
<a expr:onclick='"window.open('http://twitter.com/home?status=" + data:post.title + " " + data:post.canonicalUrl + " Vía:@oloman','','width=500,height=500');"' href='javascript:void();'>Twitter</a></div>
<!-- Pinterest -->
<div class='pint'>
<a href='javascript:void((function(){var%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)})());'>Pinterest</a></div>
<!-- Facebook -->
<div class='face'>
<a href='javascript:void();' expr:onclick='"window.open('http://www.facebook.com/sharer.php?m2w&s=100&p[title]=" + data:post.title + "&p[summary]=" + data:post.snippet + "&p[url]=" + data:post.canonicalUrl + "','','width=650,height=450');"'>Facebook</a></div>
<!-- Menéame -->
<div class='mene'>
<a expr:onclick='"window.open('http://www.meneame.net/submit.php?url=" + data:post.canonicalUrl + "&title=" + data:post.title + "','','width=650,height=450');"' href='javascript:void();'>Menéame</a></div>
<!-- Linkedin -->
<div class='link'>
<a expr:onclick='"window.open('http://www.linkedin.com/shareArticle?mini=true&url=" + data:post.canonicalUrl + "&title=" + data:post.title + "&summary=" + data:post.snippet + "&source=Oloblogger','','width=650,height=450');"' href='javascript:void();'>Linkedin</a></div>
</div>
No olvidéis cambiar los dos datos marcados en verde por los vuestros propios. Son en el botón de Twitter el usuario y en el de Linkedin, el de la fuente o source.
Con esto ya tenemos unos enlaces que servirán para compartir, pero como querremos algo un poco más mono, con CSS los animamos y de paso los hacemos adaptables (RWD). Este sería el estilo necesario para que quedaran como visteis antes.
.botonera {margin: 10px auto;text-align: center;font-size: 0;}
.botonera div {overflow: hidden;margin: 0px;display: inline-block;*display: inline; zoom: 1;}
.botonera a {display: inline-block; *display: inline; zoom: 1;width: 62px;height: 20px;margin: 2px;padding: 0 2px;color: white;text-decoration: none;line-height: 20px;text-align: center;font-family: arial;font-size: 12px;cursor: pointer;}
.botonera .face a {background: #3b5998;}
.botonera .twit a {background: #2daae1;}
.botonera .goog a {background: #dd4b39;}
.botonera .pint a {background: #ca2128;}
.botonera .mene a {background: #FF6400;}
.botonera .link a {background: #0079BB;}
.botonera div {overflow: hidden;margin: 0px;display: inline-block;*display: inline; zoom: 1;}
.botonera a {display: inline-block; *display: inline; zoom: 1;width: 62px;height: 20px;margin: 2px;padding: 0 2px;color: white;text-decoration: none;line-height: 20px;text-align: center;font-family: arial;font-size: 12px;cursor: pointer;}
.botonera .face a {background: #3b5998;}
.botonera .twit a {background: #2daae1;}
.botonera .goog a {background: #dd4b39;}
.botonera .pint a {background: #ca2128;}
.botonera .mene a {background: #FF6400;}
.botonera .link a {background: #0079BB;}
¿Los queremos con otra pinta y quizás más gráficos? Pues nada como crear un sprite y usarlo para los botones. Estos también funcionan con el mismo sistema. Probando si eso...
Para los perezosos, el CSS para este otro aspecto sería el siguiente y el sprite que utiliza está al final del post para descargarlo si lo queréis, pero espero que le echéis imaginación y a partir de ahora haya botones ligeros por todas partes con aspectos mil ;)
.botonera {margin: 10px auto;text-align: center;font-size: 0;}
.botonera div {text-indent:-9999px;overflow:hidden;margin:0px;display:inline-block;*display:inline;zoom:1; }
.botonera a { width:32px; height:32px;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFuVjIxPQpquxiJ0a0cP79CFN4dlmuaWx6hZ4QWFMHUBQ9YnVDtqauWtLeIfndjEHrNkU2VjhwVZ_vNoyla7l_iIjMPpgUKuAssgCuTiD0pNaA0EaQDYIpwymcdh921iwSzz0_om2Ol6M/s1600/sprite-redes32.jpg);cursor: pointer;}
.botonera .link a {background-position: 0px 0px;}
.botonera .mene a {background-position: -32px 0px;}
.botonera .face a {background-position: -160px 0px;}
.botonera .twit a {background-position: -192px 0px;}
.botonera .pint a {background-position: -224px 0px;}
.botonera .goog a {background-position: -32px -32px;}
.botonera div {text-indent:-9999px;overflow:hidden;margin:0px;display:inline-block;*display:inline;zoom:1; }
.botonera a { width:32px; height:32px;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFuVjIxPQpquxiJ0a0cP79CFN4dlmuaWx6hZ4QWFMHUBQ9YnVDtqauWtLeIfndjEHrNkU2VjhwVZ_vNoyla7l_iIjMPpgUKuAssgCuTiD0pNaA0EaQDYIpwymcdh921iwSzz0_om2Ol6M/s1600/sprite-redes32.jpg);cursor: pointer;}
.botonera .link a {background-position: 0px 0px;}
.botonera .mene a {background-position: -32px 0px;}
.botonera .face a {background-position: -160px 0px;}
.botonera .twit a {background-position: -192px 0px;}
.botonera .pint a {background-position: -224px 0px;}
.botonera .goog a {background-position: -32px -32px;}
Actualizado el código en lo referente al botón de Facebook para evitar el error que se producía al compartir en esa red desde dispositivos móviles. La magia la hace un simple m2w&
¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.
Y muchos más artículos interesantes si nos sigues en...
estan muy chulos ;)
ResponderEliminaroloman estan perfectos, pero ahi un problema y es que ha los usuarios que accesen a nuestros blogs desde navegadores como firefox al hacer click en compartil le abrira una segunda pagina en blanco aparte de la emergente apareciendo el codigo [object Window] y puede resultar incomodo para un usuario que quiera seguir navegando en nuestro blog.
ResponderEliminarGracias por la observación Kelvin. Prueba ahora que creo que ya lo he solucionado y corregido en el código
EliminarYo también he notado ese problema en Firefox.
EliminarSe podría solucionar cambiando de lugar el código javascript: en lugar de incuirlo en el atributo href, escribirlo en el atributo onclick:
<div class='botonera'>
<!-- Google+ -->
<div class='goog'>
<a href="javascript:" expr:onclick='"window.open('http://plus.google.com/share?url=" + data:post.canonicalUrl + "&title=" + data:post.title + "','','width=500,height=500');"'>Google+</a></div>
<!-- Twitter -->
<div class='twit'>
<a href="javascript:" expr:onclick='"window.open('http://twitter.com/home?status=" + data:post.title + " " + data:post.canonicalUrl + " Vía:@oloman','','width=500,height=500');"'>Twitter</a></div>
<!-- Pinterest -->
<div class='pint'>
<a href="javascript:" onclick='void((function(){var%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)})());'>Pinterest</a></div>
<!-- Facebook -->
<div class='face'>
<a href="javascript:" expr:onclick='"window.open('http://www.facebook.com/sharer.php?s=100&p[title]=" + data:post.title + "&p[summary]=" + data:post.snippet + "&p[url]=" + data:post.canonicalUrl + "','','width=650,height=450');"'>Facebook</a></div>
<!-- Menéame -->
<div class='mene'>
<a href="javascript:" expr:onclick='"window.open('http://www.meneame.net/submit.php?url=" + data:post.canonicalUrl + "&title=" + data:post.title + "','','width=650,height=450');"'>Menéame</a></div>
<!-- Linkedin -->
<div class='link'>
<a href="javascript:" expr:onclick='"window.open('http://www.linkedin.com/shareArticle?mini=true&url=" + data:post.canonicalUrl + "&title=" + data:post.title + "&summary=" + data:post.snippet + "&source=Oloblogger','','width=650,height=450');"'>Linkedin</a></div>
</div>
Muy bien Jorge. Precisamente estaba experimentando con una pequeña función pero esa idea me parece mucho más sencilla. Gracias. Lo pruebo y lo incorporo, porque estoy viendo que falla en Facebook.
EliminarHola amigo nuevamente, te escribo para informarte que el boton de facebook en miviles no funciona, espero y me puedas ayudar saludos.
Eliminar¿Qué es lo que ocurre en móviles exactamente?
Eliminaral darle a compartir en facebook desde movil abre una ventana emergente que tira error, puedes accesar a este articulo desde un movil y darle a compartir y veras.
EliminarPues hasta aquí llego Kelvin. Ya no sé cómo solucionar eso. Sin embargo a mí me pasa algo distinto; lo hace todo bien (sin errores) pero no carga la dirección a compartir :(
Eliminardisculpa por mi mala explicacion, pero es exactamente lo mismo que me pasa ami.
EliminarOloman, le he dado clic al boton de Pinterest para compartir la imagen y no sale la ventana emergente para poder compartirla.
ResponderEliminar¿En ninguno de los cuatro que hay (cabecera post, demo1, demo2, pie post) te funciona? Yo lo acabo de probar y me va en todos. A veces demora un poquito en cargar, porque piensa que el truco consiste precisamente en que no está pre-cargado.
EliminarTe explico: yo he querido compartir la imagan de tu post y cuando le doy clic a tu botón de Pinterest me sale otra pagina, en donde se muestran hasta las imagenes de los comentarios de este post.
EliminarY en un blogg de pruebas que tengo cuando le doy clic al boton de Pinterest no sale nada. En ese blog tambien le puse lo que mencionas en este post http://www.oloblogger.com/2013/05/boton-pin-hover.html
Los demás botones me funcionan muy bien. Espero haberme explicado. Saludos Oloman "no te pierdas"
Ahora sí entendí Jhonny, pero es que es así como funciona el botón de Pinterest: se pincha en él y un marco se solapa sobre la página mostrando todas las imágenes disponibles para que el usuario pueda compartir la que desea. No sé si habrá otro tipo de botón, pero si hay más de una imagen ¿cómo marcamos la que queremos?
EliminarOloman parece que las comillas sencillas que tiene el titulo de este post en la palabra misterio bloquean todos los botones sociales ligeros, lo mismo que este otro en la palabra flyout. Si las cambias por comillas dobles funcionan sin problemas.
ResponderEliminarSi al comienzo del texto de la entrada del post se utiliza alguna palabra con comilla sencilla se bloquea el botón de Facebook únicamente. Si se utiliza comilla doble en el texto no se bloquea. (En resumen, mejor utilizar comillas dobles tanto para el titulo como para el texto de la entrada.
OK Roudy. Gracias.
EliminarYo sabía que las comillas dobles en los títulos daban problemas en algunos sistemas de sumarios hechos con JavaScript, pero no había caído que eso podía ser problema también para este tipo de botones.
Tú dices que mejor comillas dobles, pero como digo, yo he comprobado que eso genera otro tipo de problemas así que mi conclusión es: MEJOR SIN NINGÚN TIPO DE COMILLAS en los títulos
Me sale esto en FB =O
ResponderEliminar¿Me puedes ayudar?
Blogger
accounts.google.com
Free weblog publishing tool from Google, for sharing text, photos and video.
No entiendo qué es eso porque no sé en qué contexto estamos hablando. Si pudieras darme más detalles...
EliminarEntiendo lo que pasa, debes habiltar el blog como publico, la ruta es: Configuración > Lo basico > Permisos > Lectores del blog y cambiar de privado a público, eso lo debe solucionar
EliminarGracias Mario, pero yo sigo sin entender nada. Esperemos que tu inspiración sea efectiva ;)
EliminarBusca en la plantilla...
ResponderEliminar.main-inner {
padding-top: 30px;
}
...y cambia ese 30px por un 0px. Si no lo tienes entonces inserta un...
.main-inner {
padding-top: 0 !important;
}
Hola Oloman me gustaron mucho los botones, pero me gustaria ponerle el efecto como de opacidad como los tienes tu, me podrias decir como por favor?
ResponderEliminarun saludo!
Muy observador ;) Eso se me ocurríó después.
EliminarPara conseguirlo añade a ".botonera a" un "opacity: .8;" y luego añade una nueva línea que sea
.botonera a:hover {opacity: 1;}
Hola Oloman.
ResponderEliminarGuardaré ese codigo de los botones por si algún dia me animo a utilizarlos.
Bueno quería preguntarte algo que no va sobre el tema de los Botones.
Sabes como podría areglar este pequeño problema?:
http://4.bp.blogspot.com/-14whxIoHLRs/U_qoRQKgf7I/AAAAAAAAA2w/NLmvLOSI480/s1600/Sin%2Bt%C3%ADtulo.png
Para que entiendas mejor la imgen: Dividí en tres columnas la columna de post, nose si me explico. Bueno el problema es que quedan muy separados unos post de otros.
Los codigos que tengo son:
.post-outer {display: inline-block;}
.post {
border:2px solid #BFBFBF;
background:#FAFAFA;
float:left;
width:240px;
margin:7px;
padding:0px 5px 5px 5px;
overflow:hidden;
}
Y otra pregunta.
Bueno tengo este script:
***************
summary_txt = 50;img_thumb_width = 95;
original de Anhvofunction removeHtmlTag(strx,chop){if(strx.indexOf("<")!=-1){var s = strx.split("<");for(var i=0;i")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length);}
}strx = s.join("");}chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;strx = strx.substring(0,chop-1);return strx+'...';}
function createSummaryAndThumb(pID, pURL){
var div = document.getElementById(pID);var imgtag = "";
var img = div.getElementsByTagName("i m g");
if(img.length<=0)
;summ = summary_txt;}
var summary = imgtag + '+ removeHtmlTag(div.innerHTML,summ) + ;
div.innerHTML = summary;
*****************************(borre algunas cosas a este codigo por que sino no se puede publicar en comentario XD)
Script que sirve solo para imágenes. ¿Sabes de algún script pero para videos?
Saludos...
Cambiaste de plantilla y ya no existen esos problems ¿No, José?
EliminarLa plantilla la tengo en este blog de pruebas http://1abril1983.blogspot.com/
EliminarBueno el primer problema lo solucione con algo llamado Masonry.
Masonry es una biblioteca de diseño de cuadrícula JavaScript. Funciona mediante la colocación de elementos en la posición óptima basada en el espacio vertical disponible.
Pero aún no encuentro el script para hacer video thumbnail.
Conozco Masonry, pero gracias por indicarlo para otros que puedan necesitarlo.
EliminarLo que no conozco es ningún script para capturas de vídeos, pero si estás dispuesto a reducir el tamaño de los resúmenes de texto a cambio de una mayor velocidad, este sistema sí que te captura bien la miniatura de los vídeos gracias al data:post.thumbnailUrl de Blogger.
Luego sólo es cuestión de redimensionarla y hacerla cuadrada con este otro truco.
Este codigo lo encontre unas horas después de hacerte la pregunta
Eliminarhttp://www.oloblogger.com/2012/03/miniaturas-para-sumarios-mas-grandes.html
Auque un poco diferente
http://2.bp.blogspot.com/-LMCLqzD66k0/VAU8zpEHZ7I/AAAAAAAAA6s/0pKQnanGlKk/s1600/Sin%2Bt%C3%ADtulo.png
Y sobre los codigos de
http://www.oloblogger.com/2013/03/sumarios-rapidos-blogger-resumenes.html
Me intero el de:
Intentaré agregar eso del primer post completo a ver si sale.
OK
Eliminar- alguien usó mi truco de redimthumb :) -
"alguien usó mi truco de redimthumb" XD
EliminarAún no consigó agregar el truco del Primer post completo y
tras varias vueltas en mi cabeza, el codigo sigue lo mismo
http://2.bp.blogspot.com/-LMCLqzD66k0/VAU8zpEHZ7I/AAAAAAAAA6s/0pKQnanGlKk/s1600/Sin%2Bt%C3%ADtulo.png
XD XD. En tú post:
http://www.oloblogger.com/2013/03/sumarios-rapidos-blogger-resumenes.html
Ví el codigo:
Pero nose que otro codigo le faltará, es que quiero agregarle estilo, nose si me explico.
El primer post, que tenga un ancho más grande que los demás post.
"Ví el codigo:
Eliminarb : if cond = ' data : post . is FirstPost ' >
< data : post . body / >
< b : else / >
"
De todos los del enlace de sumarios rápidos, el que te interesa creo que es marcado como "SUMARIOS. PRIMER POST COMPLETO EN TODO TIPO DE PAGINAS. RESTO CON SNIPPET AUTOMATICO"
EliminarPruébalo (funcionará seguro) y luego ya añades el redimthumb.
Ok, gracias...
EliminarHola Oloman, Se ven muy bien, los probaré en alguno de mis blogs. ¡Gracias! ¡Un abrazo!.
ResponderEliminarNo lo veo... ¿está arreglado?
ResponderEliminarOloman tengo una duda, estas lineas de código no funcionan con Blogs que utilizan las Plantillas Dinámicas de Blogger, lo he probado en un blog de prueba y no me abren las ventanas emergentes, puedes ayudarme, http://blogdepruebaderafomorales.blogspot.com/2014/08/prueba-botones-de-compartir.html
ResponderEliminarHola. Si observas el código ya interpretado con el inspector de tu navegador, verás que el problema es que las comillas se "tradujeron" mal. Desafortunadamente ese tipo de plantillas son tierra extraña para mí y no te sabría decir qué pasa.
EliminarConste que lo he intentado, pero ni siquiera he logrado que los botones (ni funcionando mal) salieran.
Eso es porque las etiquetas data de Blogger (de donde se obtienen los datos de los botones) y el atributo expr: solo se interpretan en la parte de la plantilla.
EliminarPara que funcionen en un post, cambia el atributo expr:onclick por onclick y cambia los valores data por variables de javascript como document.title para el título del post o location para la URL.
Hola Oloman resulta que al momento de compartir en Facebook aparecen partes que no tienen nada que ver con la plantilla. ¿Que crees que deba modificar? https://imagizer.imageshack.us/v2/650x405q90/537/GUBGnY.jpg
ResponderEliminarFacebook obtiene los datos de tu página (resumen e imágenes) mediante las etiquetas <meta> de tu sitio.
EliminarAsegúrate de incluirlas correctamente.
Gracias Jorge, pero aparte de eso conviene tener otras cosillas en cuenta:
Eliminarhttp://www.oloblogger.com/2014/05/problema-imagen-compartir-enlace-facebook.html.
A mi me pasa algo similar, ocupa las mismas 3 imágenes que no tienen nada que ver con el post, entre a developers de Facebook y me menciona esto
ResponderEliminarhttp://1.bp.blogspot.com/-yjhoA0DOdJg/VAlKzq7dvQI/AAAAAAAAAxE/RSxTvW5S_vY/s1600/Captura%2Bde%2Bpantalla%2B2014-09-05%2Ba%2Bla(s)%2B00.29.54.png
¿Qué puedo hacer?
Lee los detalles de la captura de pantalla que indicas: la imagen del post para Facebook (og:image) debe tener una medida mínima de 200x200px y debe estar pública en la red para que Facebook pueda acceder a ella.
EliminarActualmente el mínimo es de 600x315px para que todo vaya bien. Os remito de nuevo al enlace que puse en 12.2.
EliminarBuenas. Te haré una pregunta algo tonta pero es que ando un poco perdida. ¿Dónde exactamente hay que colocar el código para que se vea al final de una entrada? He probado lo que tú dices pero no me funciona. Un saludo.
ResponderEliminarHay que escribir el código justo donde quieras que aparezca. En tu caso, después de: <div class='post-footer'> que es el pie de la entrada.
EliminarMuchas gracias!! Me ha quedado perfecto. Un saludo.
EliminarGracias, simple pero rápido ;D
ResponderEliminarComo gadget nunca funcionará, pues como tal no se capturan los valores que tengan las variables DATA de Blogger (dirección página, título, etc.), pero en la plantilla, si lo pones dónde se indica sí te debería funcionar. Quizás lo estás poniendo en otra sección Ericka.
ResponderEliminarComo dije, ahí no los vas a poder colocar (fácilmemte) con este sistema.
ResponderEliminarLa otra pregunta no la entiendo...
Este comentario ha sido eliminado por el autor.
ResponderEliminarEste comentario ha sido eliminado por el autor.
ResponderEliminarEs que creo que esa URL para compartir ya no está operativa. La he probado y nada... Incluso busqué a ver si había otra distinta actualmente y no encontré nada que funcionara.
EliminarEste comentario ha sido eliminado por el autor.
EliminarHola oloman, Hola iván, encontré la solcuión y funciona en todos los navegadores, (eso creo) y la solución es muy sencilla y es poniendo el código de una ventana pop up... lo ves en: http://www.ciudadblogger.com/2009/05/crear-ventanas-popup.html y en ésta parte: t:popUp('URL del documento')">Abrir ve ponen la URL de tumblr de modo que quede así: cript:popUp('http://www.tumblr.com/share?')" y voiala! espero les sirva, oloman siempre me a ayudado bastante, espero sirva mi pequeño aporte. Un saludo desde Colombia, y si quieren ver funcionando el botón entren en: kangutingo el boton tumblr está junto con los "botones ligeritos de peso de oloman" al final de la entrada bajo el botón de WHATSAPP
EliminarOK Kangutingo. Muchas gracias.
EliminarHola Oloman, he leido tu post por que tengo problemas al compartir en Facebook resulta que no me sale la descripcion de cada articulo, espero puedas ayudarme tengo el un codigo:
ResponderEliminarHola. En esta entrada hablaba de cómo poner la imagen para que no fallara, pero de paso también expliqué otras METAs necesarias para otros datos. Échale un vistazo
EliminarGracias por los botones Oloman, me funcionan bien, el de fb además muestra la imagen y descripción que asignamos con open graph cosa que el botón oficial no hace, me alegra no tener que pasar horas buscando cómo configurar un botón para que muestre bien los datos.
ResponderEliminarSólo una cosa, no he puesto el botón de twitter porque no tengo usuario al no tener cuenta. ¿Se puede poner sin usuario?.
Iba a responderte a lo del CSS y he visto que lo habías borrado. Con respecto a lo de Twitter, sí, sin problemas. Elimina la parte que genera el "Vía" y listo. NO tienes que tener Twitter para que tus lectores compartan en esa red.
EliminarGracias!, qué bonitos quedan, jujuju
EliminarHola oloman quisiera saber como haces para poner los botones de redes sociales dentro de la entrada, he buscado y re buscado en tu blog pero no consigo ningun post sobre eso (a lo mejor no he buscado bien, no se) y tambien quiero saber como podria hacer para poner tambien los botones de redes sociales estaticos pero del lado izquierdo del blog :3 no se si me explico bien, si sabes algo de esto por favor dime, estoy sufriendo profundamente por el diseño de mi blog
ResponderEliminar¿Dentro de la entrada? No sé si te refieres a como yo los tengo, justo al principio del post flotando a la izquierda, al principio pero sin flotar, al final (esto es lo normal) o lo que pretendes es poner unos botones que siempre estén visibles aún al hacer scroll
ResponderEliminar>.< como los tienes tuuu! es que me gustan MUCHOOOO! <3
EliminarVale. A ver si cuando tenga tiempo para un próximo post, ese es el tema que puedo tratar
EliminarHola Oloman! No puedo ponerlo, ya probé con varios botones distintos y no hay caso, no funciona ninguno.
ResponderEliminarPodrías fijarte si no tengo algún código que imposibilita cambiar los botones sociales?? Los ponga donde los ponga, los haga como los haga no me funcionan.
Muchas gracias!
Podría echar un vistazo, pero no te garantizo nada. Dime dónde mirar.
EliminarHola, Oloman,
ResponderEliminar¿Qué es el source del linkedin (source=Oloblogger)? ¿Cuál es su significado y cómo se configura en Linkedin?
Muchas gracias,
CZD.
Vendría a ser como el "Vía" en Twitter. Simplemente hay que poner el nombre del sitio de dónde proviene el artículo a compartir.
EliminarMuchas gracias.
EliminarEh colocado los botones sociales, Y solo solo me funciona el de twitter ala perfección y los botones que eh agrados son Facebook, Twitter, Google + Y Pinterest. Ayuda los mas pronto posible.
ResponderEliminarTendría que verlos Wilbert y en tu perfil no aparece blog alguno. Si lo tienes privado ese puede ser un motivo de que no funcionen
EliminarCreo que voy a probar esto. Usare Fontawasome en vez de poner el nombre de los botones. Espero que me funcione.
ResponderEliminarSí que te va a funcionar Teleri, pero ten presente que cargar Awesome también produce una demora. Si es que ya lo tienes para otras cuestiones, bien, pero si lo pones expresamente para estos botones, perderás una parte de lo conseguido.
EliminarHola como inserto estos botones al inicio de mi blog para que los usuarios den compartir antes de ver los articulos. gracias
ResponderEliminarSe cita en el post Tito. Sería insertando el código en el div que lleva la clase "post-header".
EliminarHey Oloman saludos, solo una pregunta...
ResponderEliminar¿Cómo se podria insertar en un blog un popup flotante con con tu fanpage de facebook.
Me gustaría que quede como esta pagina tiene este popup flotante para suscribirse por correo. http://musicacristiana-online.blogspot.com/
gracias anticipadas. :)
Hola Emanuel
EliminarEsta sería la forma de hacer eso. Sólo tienes que rellenar la caja "floatbox" en el HTML con lo que quieras, en tu caso, con el código de la fanpage.
Los que yo tengo, tanto arriba como abajo, son estos mismos, cada unos con un estilo (CSS) distinto.
ResponderEliminarY los de este tipo no pueden llevar contadores o dejarían de ser ligeros.
Buenas Oloman quisiera agregar estos tipos de botones a mi blog pero no se como seria el proceso lo quiero en la parte inferior de cada entrada que se publique y en forma horizontal podrias decirme como hacer eso..
ResponderEliminarHola Jesús
EliminarLo de la forma horizontal ya está definido en ese código. La primera parte es HTML y la tienes que poner directamente en la plantilla (editándola). En el post se indica dónde, dentro del DIV con nombre post-footer.
El resto es CSS y por tanto lo tienes que añadir entre las etiquetas SKIN, también en la plantilla (más info)
Hola Oloman, me gustaría saber como poner la botonera al final de las entradas (prefiero encima de los comentarios) pero sobre todo que salga solamente en las entradas y no en todas las páginas del blog. Si pudieses ayudarme estaría muy agradecido.
ResponderEliminarUn saludo.
Hola Capin
EliminarSólo tendrías que encerrar todo ese código dentro de una condición para que sólo salga en páginas tipo "item".
En esta otra entrada se explica con más detalle cómo hacer eso.
Vale, muchas gracias Oloman, me ha servido de gran ayudar.
EliminarAhora también me he dado cuenta que en mi plantilla no aparecen las fechas en las Entradas, ¿cómo puedo hacer visible la fecha?
Empieza por aquí ;)
EliminarLa miré hace poco tiempo esa página, probé a hacerlo pero seguía sin aparecer nada.
EliminarAdemás, me he dado cuenta que el lugar donde debería aparecer en la página principal está debajo de:
Donde deberían aparecer la fecha, las etiquetas y los comentarios, pero no aparece nada. Y luego además tampoco aparece en la entrada.
Te dejo un enlace a la demo de mi plantilla de blogger:
http://www.premiumbloggertemplates.com/norma-premium-blogger-template/
Muchas gracias de antemano. :)
No ha salido jaja, debajo de:
Eliminardiv class='post-header-line-1'/>
La fecha funciona perfectamente en la demo a la que me remites, por lo que es imposible arreglar algo que no está roto.
EliminarDespués de investigar un poco conseguí arreglar el tema de la fecha, pero como observaste en la demo, aparece la fecha, las etiquetas o categorías y los comentarios. A mi no me salía ninguna de las tres, ahora que he conseguido la fecha, no consigo las otras dos. Te dejo mi página web para que veas lo que he conseguido con la fecha y las otras dos que no aparecen. Muchas gracias de antemano, se aprende mucho contigo.
Eliminarhttp://www.ctvtelevision.es/
Pues esos dos que dices están en el mismo sitio que la fecha: o las tienes desactivadas (edita bloque Entradas del Blog en Diseño para comprobarlo) y/o están con un condicional que impide que se vean y/o están ocultas con un display:none en el CSS y/o no está el código que las genera en esa plantilla. Sólo pueden ser esas causas.
Eliminarhola Oloman muchas gracis por comaprtir este codigo, pero tengo una problema y nose si se podra resolver, mi problema surge cuando comparto la entrada en twitter y la venta de de emergencia (pop-up) no se cierra automaticamente si no que esta queda avierta lo cual es muy molesto... espero que me puedas ayudar... Saludos!!!
ResponderEliminarNo sé cual es el problema exactamente Wilmer. En principio el gadget funciona bien.
EliminarPuede que tengas algún JavaScript que interfiere o algo así. Quizás alguno que hace que los enlaces externos se abran en ventana nueva.
Hola Oloman
ResponderEliminarLo he puesto en mi blog, y la carga de la pagina se ha reducido bastante. Ahora carga más rápido.
Una consulta, intento implementar el botón de whatsapp a este código... lo he conseguido, pero no tengo cojones de alinearlo bien, ni de que salga el texto que diga whatsapp...
Hecha un vistazo en este post: http://www.dparaguay.com/2015/11/gatito-quedo-atrapado-en-cemento-mira.html
Bueno al final lo conseguí, era solo una cuestión de lógica:
ResponderEliminarMejor, porque si llegas a tener que esperar a que yo contestara ;)
EliminarOloman el de facebook no funciona podrias echarme la mano con ello
ResponderEliminarPues si es lo que otros han dicho sobre que en móviles no les funciona bien, no te voy a poder ayudar, ya que a mí si me funciona. Estoy empezando a sospechar que va a ser problema de ciertos dispositivos y/o la configuración del navegador.
EliminarAnte todo muchisimas gracias por tan buen tutorial y explicación de como implementar éstos botones tan livianos para nuestros Blogs de blogger, de veras gracias Oloman.
ResponderEliminarPor otra parte, le dí algo de diseño extra a los botones y quería dejar aqui mi aporte para los demás, aunque no me permite insertar código DIV ,con lo cual no puedo ayudaros.
os quedaría un poco más personalizados y poniendo el raton encima diria eso de Compartir en Facebook, Compartir en Twitter, etc...
Os dejo imágen ya que no me deja poner código:
Botonera:
http://www.upimages.net/xc.png
CSS botonera:
http://www.upimages.net/wc.png
Como veis en las imágenes es prácticamente los códigos de Oloman, pero algo modificado para darle otro diseño, quedaría así:
http://www.upimages.net/yc.png
De nuevo gracias Oloman por tan buen tutorial y ayuda.
OK Gamerbyg. Gracias.
EliminarUna de las ventajas que tienen precisamente estos botones es que les puedes dar el diseño que quieras.
Estimado Oloman: empecé a tunear uno de mis blogs, y tu blog resultó consulta permanente, así que gracias! Estoy en este punto, en cambiar un poco el tema de los botones sociales. Pero me gustaría que queden como los tuyos. Que entradas me recomendarías leer para ello? Gracias!
ResponderEliminarLos míos actuales son precisamente los que expliqué en esta entrada ¿o te refieres a los del principio de cada post? Esos otros son también los mismos pero con el CSS algo cambiado para que salgan en vertical y la manera de insertarlos dentro de la entrada la expliqué aquí.
EliminarAl hilo de los comentarios, he probado cantidad de codigos, adthis, sharethis, y te doy las gracias por tu aporte, pero a mí no me sale nada. Dejo tal cual tu codigo en el post header. Mi blog es http://www.webquepymes.com
ResponderEliminarEn el post-header no hay nada ahora mismo, Germán. No es que no te salga, es que no hay código ahí. Posiblemente lo hayas puesto en el post-header equivocado. En las plantillas normalmente hay dos, uno para la plantilla móvil y otro para la de escritorio y como decía, es posible que la hayas puesto en la móvil. Busca otro post-header en tu plantilla y coloca el código allí.
EliminarDefinitivamente quitaré los botones de addthis que ya tengo, me alentan un poco la carga y además los bloqueadores de anuncios los quitan, así que ya no valen tanto la pena para mi. ¿Existe alguna manera de agregar un botón para copiar el enlace de la entrada? La botonera de addthis tiene uno así que me pareció bien. Si no lo hay, igual no importa mucho.
ResponderEliminarSaludos! Y mil gracias por ayudarnos a mejorar nuestros blogs
Hola Rocío. Si existe y precisamente estoy con ello. Cuando lo tenga lo publico.
EliminarBuenos días Oloman,
ResponderEliminarRealmente tu post me sirvió muchísimo, gracias por el tutorial tan detallado.
Pero ahora tengo un problema, en el caso en el que en el título del post tiene un # se corta en ese punto al compartir el twitter. Me explico.
Digamos que tiene que poner un tweet diciendo:
"Reseña de #HarryPotter url-del-post via @Stiby"
Pues lo que realmente sale es:
"Reseña de "
Y se corta justo al llegar al #.
He leído en los comentarios que hay problemas cuando existen comillas en el título del post, ¿ocurre igual con los #? ¿Se puede solucionar de alguna manera?
Muchas gracias :D
(en el botón de Facebook también me da problemas cuando el titulo del post tiene un # y sólo sale un popup diciendo "Enter URL to share")
EliminarAl final he quitado los # de los títulos de las entradas y funciona genial, salvo que el botón de FB no funciona desde el móvil pero creo que he visto ese problema solucionado por los comentarios así que otro día me pondré a solucionarlo.
EliminarMUCHISIMAS GRACIAS DE VERDAD :D tanto por el tutorial como por responder mis dudas por twitter.
Pues tuviste suerte con Twitter, porque normalmente me demoro bastante en poder contestaros... como estás viendo ahora mismo
EliminarDe nada.
¿Cómo consigues que una imagen tan grande se inserte entera en una publicación? a mi me quedan recortadas, sobre todo las del What App. Por favor y Gracias.
ResponderEliminarOtra vez se me olvidó dar al botoncito... ¿No hay manera de aligerar el peso de los vídeos?
ResponderEliminarEsto no lo entiendo:
ResponderEliminar"No olvidéis cambiar los dos datos marcados en verde por los vuestros propios. Son en el botón de Twitter el usuario y en el de Linkedin, el de la fuente o source."
Lo hice tal como Dios me dió a entender... ¿Y ahora cómo se yo si ha salido bien? Por que los botones con ayuda de otro tutorial si han salido de momento... Por favor y Gracias
Bueno... he dado mas vueltas que un tío vivo pero al final he puesto los botoncitos. Eso si sigo sin saber que es la source de linkedin. Y creo que encima para usarlo tengo que actualizar el navegador de la biblioteca. Vaya con la informática... Espero no volverte muy loco, de todas formas no me vas a ganar... Por favor y Gracias.
ResponderEliminarPor cierto han quedado precioooosos Muack!
EliminarSi tienes algo de cómo exactamente publicar en las redes sociales y además escribir negrita, subrrayado y bla bla bla me lo dices. Por favor y Gracias.
ResponderEliminar¿Tienes para Instamgram? Por favor y Gracias.
ResponderEliminarPara averiguar mi sourcee de Linkendin me exige actualizar el navegador y eso creo que no se puede hacer en la biblioteca. Por favor y Gracias.
ResponderEliminarYujuuuu!!!! Dios me ha venido a ver. Por fin tengo todos los botoncitos insertados en el blog definitivo. Hoy es día de fiestaaaaa!!!!
ResponderEliminarMUCHAS GRACIAS
Solo falta hacerme a manubrio un botón de Instagram y ponerlo al lado. Junto a todos los demás que añadiré con el tiempo...
MUACK!!!
¿Entonces qué? ¿Sólo te falta lo de Instagram? Si es así ya terminaste porque, que yo sepa, no hay botones para poder compartir contenidos en Instagram.
EliminarTú sola te despachaste con el problema :)
Este comentario ha sido eliminado por el autor.
ResponderEliminarHola Andys. El segundo código es sólo CSS, es decir, estilo o lo que le da el aspecto "bonito" a los botones-enlaces. Tienes varios sitios dónde añadirlo y para que resuelvas para siempre este tipo de dudas, por favor lee este otro tutorial.
EliminarSobre la "lista de direcciones directas para compartir", no te preocupes porque ya las incluí en el código. Esa explicación era para que se entendiera lo que estáis haciendo y no se trate sólo de copiar y pegar.
Y sobre lo de Twitter te tengo que mandar a otro artículo... este.
De todos los post que he visto el único que me ha funcionado ha sido el suyo. Y además tuve un accidente y los volví a poner sin problemas. Muchísimas Gracias.
ResponderEliminar