Toda red social o agregador que se precie, tiene sus propios botones oficiales para que los sitios que generan contenido puedan instalarlos y así facilitar la transmisión de enlaces a través de ellos. Pero se conoce que cuanto más caché tienen o pretenden, más complican las cosas para aumentar su propio control y el resultado no es otro que el que conocemos los que tenemos más de un cacharrito de estos.
Supongo que alguno que otro tendrá el Me gusta de Facebook y/o el +1 de Google Plus y no creo que quepa duda que uno y otro son farragosos en cuanto a código y lentos en cuanto a carga.
Existen opciones asíncronas que permiten mitigar sus efectos, pero lo único que conseguimos en realidad es amontonar el problema para el final, no solucionarlo. Sin embargo no es esta la única alternativa.
Casi nadie lo publicita, pero también existen cargadores sencillos que con una URL simple y unos pocos parámetros, realizan una tarea equivalente y si no todas, las mayoría de las redes disponen de ellos.
La desventaja de usarlos es que en algunos casos no dispondremos de contadores ni otras utilidades que pudieran incorporar esos botones y lo mismo ocurrirá con los gráficos originales. Sin embargo tendremos una carga mucho más rápida y podremos personalizar las imágenes cómo queramos, pudiendo integrarlos perfectamente en nuestro sitio.
Estos son los que he encontrado en una pequeña batida y creo que no deben faltar muchos, pero no hay inconveniente en que propongáis más para aumentar la lista. En cada icono podréis ver una demo de cómo funcionan y si confirmáis el envío pues estupendo ;)
Bitácoras
http://bitacoras.com/anotaciones/LINK
(Si el post ya está en esta red, enlaza con la página para votar)Delicious
http://del.icio.us/post?url=LINK&title=TÍTULO
Digg
http://digg.com/submit?url=LINK&title=TÍTULO
Divoblogger
http://divoblogger.com/submit.php?url=LINK
Divúlgame
http://www.divulgame.net/submit.php?url=LINK
http://www.facebook.com/sharer.php?u=LINK&t=TITULO
http://www.facebook.com/sharer.php?s=100&p[title]=TÍTULO&p[summary]=TEXTO&p[url]=LINK
Fresqui
http://fresqui.com/post?url=LINK&title=TÍTULO
Google+
https://plus.google.com/share?url=LINK
http://www.linkedin.com/shareArticle?mini=true&url=LINK&title=TÍTULO&summary=TEXTO&source=ORIGEN
Menéame
http://www.meneame.net/submit.php?url=LINK&title=TÍTULO
Orkut
http://promote.orkut.com/preview?nt=orkut.com&du=LINK&tt=TÍTULO
http://pinterest.com/pin/create/button/?url=LINK&media=URL_IMAGEN&description=TEXTO
http://reddit.com/submit?LINK&title=TÍTULO
Stumbleupon
http://www.stumbleupon.com/submit?url=LINK&title=TÍTULO
Tuenti
http://www.tuenti.com/share?url=LINK
http://twitter.com/home?status=TEXTO
(En TEXTO se pueden incluir links o nicks de usuarios con @)Bonus
Añadir enlace a Google Bookmarks
http://www.google.com/bookmarks/mark?op=add&bkmk=LINK&title=TÍTULO
Imprimir página
javascript:window.print();
Convertir a PDF/Imprimir
http://www.printfriendly.com/print?url=LINK
Seguir desde escritorio
http://www.blogger.com/follow-blog.g?blogID=xxxxxxxxxxxxxxxxxxx
¿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.
¡Pedazo recopilación!
ResponderEliminarGracias Oloman
Estupendo post, igual peco de torpe pero si quiero poner alguno al pie de las entradas, donde debo ponerlo y con que url para que cambie segun el articulo? quisiera poner el de convertir en pdf
ResponderEliminarun saludo amigo
En alguno de los post-footer-line-x
Eliminar<a expr:href='"http://www.printfriendly.com/print?url="+data:post.url'>Convertir en PDF</a>
(Suprimida contestación anterior y reescrita. Se me olvidó un símbolo +)
Te vuelvo a escribir porque creo que no se ha enviado bien mi comentario, primero decirte que el anterior comentario lo elimine porque me equivoque jaja
Eliminary ahora me gustaria que me ayudaras en esta duda..
lo he puesto como me has dicho y queda bien pero me gustaria que solo estuviera en las entradas individuales y justo debajo de donde tengo el enlace para imprimir ¿es posible hacerlo asi?
Muchas gracias por tu inestimable ayuda
un saludo
Ya he visto que lo conseguiste por tu cuenta. Sólo era cuestión de poner el código justo detrás del que generaba el "imprimir" ¿cierto?
EliminarCierto jjaja, no veas como estoy aprendiendo contigo, pero me queda un pequeño detalle, como veras, el icono que he puesto me queda un poquito mas arriba del texto ¿se puede alinear y ya alineado, ponerlo todo debajo de mi imprimir?
EliminarYa he conseguido ponerlo tambien debajo de donde yo queria pero necesito que me ayudes a alinear el icono del pdf con el texto )me gustaria que el texto quedara en el borde inferior del icono)y que quede un poquito mas a la izquierda
EliminarSaludos amigo
En el mismo lugar que marcas un margin-bottom para el icono, añade un padding:0; Es que tu CSS fuerza un padding 8px genérico para las imágenes, así que tendrás que anularlo así.
EliminarGraciaaaas, ya hemos conseguido poner el texto y la imagen alineados pero no soy capaz de dar con la tecla(y creeme que lo he intentado antes de molestarte de nuevo), pero necesito pegar el icono un poquito mas a la izquierda y separarlo un poco del texto, como veras soy bastante torpe jajja
Eliminar¿¿Por favor dime como puedo hacerlo??
Suprimido el anterior por error
Vale. Cambia ese padding:0; por un padding:0 6px 0 0; de esa manera dejará espacio sólo por la derecha. Ya no se puede ajustar más porque ese icono es de 22px y el de arriba de sólo 16.
EliminarSi lo cambias por uno de 16px, tendrás que incrementar el padding derecho de nuevo.
Gracias Oloman, uffffffffff cuanto trabajo te estoy dando...no se si estara bien..he reducido el icono ¿para pegarlo un pelin mas hacia la izquierda esta bien asi?
Eliminarte dejo como lo tengo ahora
Gracias, uffff cuanto trabajo te estoy dando por Dios
Eliminarno se si estara bien, he reducido el icono y queda mejor, para pegarlo un pelin hacia la izquierda es asi?
te dejo como lo tengo ahora..
https://4349542429287882846-a-1802744773732722657-s-sites.googlegroups.com/site/teofermi1/fotos/pdf2.jpg' style='margin-bottom:100px margin-left:5px;padding:0 5px 0 0;
EliminarEl problema es que la imagen es de 18x18 y lleva una franja negra a cada lado. Ya está totalmente pegada a la izquierda pero ese trozo negro hace parecer que no. Recórtala quitando ese color negro y verás como la cuadras sin tanto problema.
EliminarPor Dios, ves cuanta torpeza??? jjajja
EliminarTienes razon, la he recortado y ha quedado perfecta
Muchisimas gracias por tu ayuda, tu atencion y por tu paciencia conmigo
un saludo amigo oloman
¡Bestial, bestial! ¡Justo lo que buscaba! Muchísimas gracias :)
ResponderEliminarEl caso es que quiero poner estos iconos pero con la función de compartir la entrada. No quiero ponerlos todos, sólo quería poner el de Twitter, el de Facebook y el de Google+
ResponderEliminarHe intentado hacerlo yo, pero no me sale, no sé qué estoy haciendo mal.¿Podrías explicarme cómo se hace? Gracias.
Lo único que tienes que modificar con respecto a lo que explican en Compartidisimo, es la parte HTML. Dónde pone un #, tú tienes que poner el enlace que corresponda de entre los citados en el post. Sólo eso.
EliminarMuchas gracias por tu contestación. Mi problema es que no sé como hacer para que se comparta justo la entrada donde está colocado. Por ejemplo: 'data:post.url', esas cosas son las que no entiendo. Automatizar cosas en Blogger es un tema que tengo pendiente, y más que decirme cómo se hace, me gustaría que, si no es molestia, me dijeras algún artículo o alguna web donde aprender sobre el tema. Muchas gracias, de verdad, es un gusto que la gente ayude desinteresadamente, saludos! :)
EliminarFíjate en el comentario 2.1. Ahí hay un ejemplo de uso de data:post.url. Se trata de sustituir lo que yo marco en la entrada como LINK por esa variable. Para otros destino sería exactamente igual, pero cambiando la dirección por la que corresponda según el contenido de esta entrada.
EliminarY cuando ponga TITULO, pues se sustituye por data:post.title. Aquí tienes más info sobre las variables data de Blogger.
Para que además salga una imagen (botón) en lugar del texto, habría que cambiar Convertir en PDF por...
<img src='URL_IMAGEN' />
(más info sobre cómo construir enlaces)
Muchas gracias, Oloman, he aprendido muchísimo con tu respuesta y con la entrada de las variables de Blogger, ya te enseñaré el resultado cuando modifique el código de los iconos. ¡Saludos, compañero! :)
Eliminarincreíble la rapidez y ademas de las cosas útiles que ni siquiera conocía, como siempre encantado, muchas gracias.
ResponderEliminarBuenisimo Oloman!! xD Saludos gente!
ResponderEliminarun saludo Oloman, tengo una pregunta que hacerte (no es referida a este post) y no sabia donde hacerlo asi que te la comento aqui, espero que no te importe :)
ResponderEliminarMira lo que acaba de aparecer en mi blog:
http://imgur.com/sBkW5
Es una iframe muy extraño que no tengo ni idea de donde ha salido. Tiene este código:
http://i.imgur.com/Pg1Cw.jpg
Es algo muy raro... ¿sabes que es?
vaya, parece que tiene que ver con los botones de ShareThis...
EliminarSí, eso acabo de leer en este foro http://forums.sharethis.com/topic.php?id=78879
EliminarHabrá que esperar a ver qué dicen
Sí, a ver que pasa... gracias!!!!
EliminarExcelente entrada Oloman =)
ResponderEliminarYo solía tener muchos de los botones de estas páginas pero si que la carga era lenta, hasta este momento no se me había ocurrido poner enlaces de texto para cumplir con la función de enviar los enlaces de las entradas a algún sitio, pero ahora gracias a que nos has facilitado los códigos creo que lo haré. Un saludo.
Hola Oloman, yo se que no tiene nada que ver con el Post pero te hago Una pregunta, se puede dar un estilo diferente al post de las entradas principales, que al de las entradas cuando se muestre una Etiqueta X, si se puede como seria???.
ResponderEliminar¿Y el post tiene varias etiquetas, cual elige el sistema? Con etiquetas es más complicado, pero si es fácil distinguir entre página principal, páginas de navegación, páginas de archivo y páginas individuales (entradas). Sucintamente se explica en esta entrada. Luego puedes buscar una serie de entradas que publiqué con una "guía de condiciones", para ver los casos posibles.
EliminarOk gracias por responder voy a revisar el enlace.
ResponderEliminarSaludes
A ver si me estoy enterando... Puedo publicar el twitter o tuenti las entradas de mi blog y con un solo click? y se comprime la url de mi blog para que no ocupe? o cómo está el asunto?? ajajjaj
ResponderEliminarNo exactamente. Con un enlace que lleve como dirección de destino una de estas URL que se citan, lo que podrá hacer CUALQUIERA será compartir un artículo de tu blog en la red social correspondiente.
EliminarSi pruebas a pinchar en algunos de los iconos de las entradas, verás lo que ocurre exactamente.
Alguien sabe como es el link de G+?
ResponderEliminarLo tienes entre el de Fresqui y Linkedin...
Eliminarmuy bien todo, pero la barra esta lateral que aparece todo el rato a la izquierda la tienes por algún lado esta que salen los iconos en este orden: facebook, G+, Twitter, Bitacoras, DivoBlogger, Haz Pin, Enviar entrada por correo electrónico y Imprimir articulo, el código como funciona?
ResponderEliminarEs simplemente una caja (div) con un position:fixed; y unos enlaces con imágenes para los botones. Y los enlaces están precisamente hechos con estas direcciones que se explican en el post.
EliminarHola Oloman,
ResponderEliminarSe que es algo viejito el post, pero intente buscar uno que tubiese que ver con lo que te pregunto, y fue lo mas parecido que vi (vale, lo admito, no me mate buscando LOL)
veras tengo una duda:
Bueno al tema, que imagino que estaras liado. Que me falta o sobra, para que cuando comparto en facebook, mis post, me enseñe el título de cada uno, e igual en las url pegadas.
Antes lo hacia, pero ahora solo se "pega" el nombre del blog, el resumen de la entrada, y la foto. Pero el título del post, no aparece. Me imagino que es una tonteria, pero no la pillo...=)
mi blog es http://futbolbarsayotrashistorias.blogspot.com/ si puedes decirme lo que pasa, te lo agradecere mucho, con lo que me curro los títulos...=)
GRACIAS!!
PS. RECUERDA PLEASE LA EXPLICACION PARA ANALFABETOS HTMLIANOS =)
No sé lo que pasa, porque últimamente me estáis contando cosas por el estilo y cuando yo pruebo, no existe el menor problema.
EliminarAcabo de probar con http://futbolbarsayotrashistorias.blogspot.com/2013/08/Jonathan-dos-santos-oportunidad.html y en Facebook salió todo bien: título, miniatura y resumen.
Hey Oloman,
ResponderEliminarDisculpa tendria que haberte dejado una nota. En Mi caso logre solucionarlo anoche. Tenia unas meta tags que parece ser que estaban de mas, y estorbaban. las quite y volvio a la normalidad. Si es cierto, que "creo" que algo falla con el editor de plantillas, porque aplico cambio que no salen o que tardan en salir... veremos
gracias y disculpa que no te avisara, se me paso..
Hola.
ResponderEliminarTengo dos preguntas:
Estoy intentando colocar los botones para compartir en las entradas individuales, ¿las variables como las estoy colocando están bien?:
<a expr:href='"http://twitter.com/home?status=" + data:post.url + "&source=tweetbutton&url=" + data:post.url + "&via=DKes&text=" + data:post.title'> Twitter </a>
<a expr:https://plus.google.com/share?url=" + data:post.url + "&title=" + data:post.title | Nombre de mi blog'> Google + </a>
<a 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.url + "&&p[images][0]=" + data:post.thumbnailUrl + "\",\"sharefb\",\"toolbar=0,status=0,width=548,height=325\");"' href='javascript: void(0)'> Facebook </a>
(El de Facebook se abre en una ventana pop-up)
Y dos: ¿Cómo puedo cambiar la frase "0 comentarios" cuando no haya comentarios, sin modificar el resto cuando haya comentarios?
Gracias =)
En un principio sí, pero las comillas dobles debes sustituirlas por " para que funcione bien la cosa en la plantilla.
ResponderEliminarSe me olvidó lo otro. Prueba con esto: http://www.oloblogger.com/2013/02/ocultar-numero-cero-comentarios.html
EliminarGracias Oloman.. me sirvió para aplicarlo incluso en mi nueva web montada en wordpress !!!
ResponderEliminar