Tutorial para insertar botón "meneame" en blogger
Sé que es un cambio un poco extraño de temática del blog. No suelo hablar de mis inquietudes informáticas. Pero como anoche le dediqué un buen rato a esto y creo que puede haber bastante gente interesada en esto, os pongo cómo lo he hecho en cuatro sencillos pasos para que lo incluyáis en vuestro blog de blogger.
Para los que no se hayan fijado, he hecho un pequeño cambio en el widget de los botones para compartir de modo que en vez de salir el botón "Buzz" sale el elefantito de meneame.net. Para ponerlo así he tenido que hacer un poco de investigación, buscarme el código fuente y echar un poco de mano al photoshop. Como muchos sabéis, Buzz es un servicio de google bastante fallido, y a los webmasters más bien nos interesa poco que nos compartan una entrada por esa vía, sobre todo comparado con meneame.
Así que os pongo el tutorial, hecho por mí, para el que le interese hacerlo, que lo tenga más fácil que yo:
Y ya lo tenéis. Con esto ya tendréis lo suficiente para poder insertar un botón de meneame.net en el panel de enlaces de compartición de blogger.
Para los que no se hayan fijado, he hecho un pequeño cambio en el widget de los botones para compartir de modo que en vez de salir el botón "Buzz" sale el elefantito de meneame.net. Para ponerlo así he tenido que hacer un poco de investigación, buscarme el código fuente y echar un poco de mano al photoshop. Como muchos sabéis, Buzz es un servicio de google bastante fallido, y a los webmasters más bien nos interesa poco que nos compartan una entrada por esa vía, sobre todo comparado con meneame.
Así que os pongo el tutorial, hecho por mí, para el que le interese hacerlo, que lo tenga más fácil que yo:
- En la pestaña de Diseño de Blogger, en el recuadro para "Entradas de blog" le dais a editar y activáis "Enlaces para compartir". De esta manera aparecerá donde elijáis el botón clásico que nos provee blogger con el símbolo de Buzz.
- Ahora, en la misma pestaña de diseño tenéis que ir a "Edición de html" y después hacéis click en la opción "Expandir a pantalla de artilugios". Antes de hacer ningún cambio os recomiendo que guardéis la plantilla, está la opción un poco más arriba.
- Tenéis que copiar el siguiente código:
.share-button{display:block;width:21px;height:22px;float:left;
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfllLOKUrEHWUvbuf0L-Hu35lN-WO93cHqYJeB6-JsQH75IxBe0lM5NfLKkbinnO5qzRXMnLuavLBHvHOktSVUD9EcRp1LVZ_6shyphenhyphenKLaaD01fETpD6X6qCw7KXAjaDyU1S5Pu0q7j9JvI/s1600/share_buttons.png") no-repeat left !important;overflow:hidden}a:hover.share-button{text-decoration:none}.share-button-link-text{position:absolute;left:-999px} .sb-email{background-position:0 0 !important}a:hover.sb-email{background-position:0 -22px !important}a:active.sb-email{background-position:0 -44px !important}.sb-blog{background-position:-21px 0 !important}a:hover.sb-blog{background-position:-21px -22px !important}a:active.sb-blog{background-position:-21px -44px !important}.sb-twitter{background-position:-42px 0 !important}a:hover.sb-twitter{background-position:-42px -22px !important}a:active.sb-twitter{background-position:-42px -44px !important}.sb-facebook{background-position:-63px 0 !important}a:hover.sb-facebook{background-position:-63px -22px !important}a:active.sb-facebook{background-position:-63px -44px !important}.sb-buzz{background-position:-84px 0 !important;width:22px}a:hover.sb-buzz{background-position:-84px -22px !important}a:active.sb-buzz{background-position:-84px -44px !important}
Esto tenéis que pegarlo donde los estilos css de vuestra plantilla. Por ejemplo, dadle a "buscar" (ctrl+F) y buscáis .footer, y lo pegáis antes de ello. Si os fijáis en el código hay un enlace a una imagen, ahí es donde está la clave del asunto, si queréis guardaos la imagen y subidla a vuestra propia cuenta de blogger, si no tampoco será tan grave. Es la misma imagen que corona este post.
- Ahora volvéis a darle a ctrl+f (buscar) y buscáis "share-button sb-buzz", y substituís este texto por lo que encontréis. Los límites de lo que tenéis que copiar están dados por las etiquetas:
<a class="share-button sb-buzz" href="http://meneame.net/submit.php?url=%22%20+%20data:post.url%20+%20%22&title=%22%20+%20data:post.title" onclick="'" height="415,width="690\" title=""Menea este post"" target="_blank"/>
<span class="share-button-link-text"/><data:top.sharetobuzzmsg></data:top.sharetobuzzmsg/></span/></a/>
Y ya lo tenéis. Con esto ya tendréis lo suficiente para poder insertar un botón de meneame.net en el panel de enlaces de compartición de blogger.
Comentarios
Encuentro 9 ".foot"...
Después, al sustituir "share-button sb-buz", sustituyo sólo eso o todo el elemento que lo contiene?
Gracias
Sobre lo de share-button sb-buzz, siendo estrictos lo que hay que cambiar es el lo que pone "href" y lo que pone "title="Menea este post". Pero vaya, que para simplificar has de buscar la etiqueta <a class="share button... y la etiqueta que la cierra </a>.
No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
Mensaje de error de XML: The reference to entity "title" must end with the ';' delimiter.
Y ese "title" se refiere al que esta dentro del link de la href, que es un "&title" y si le pongo "&title;" me dice:
No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
Mensaje de error de XML: The entity "title" was referenced, but not declared.
¿¿Alguna idea de como arreglar eso?? Parece como que la formación de la url del post no la coge bien y lo tengo a medio hacer en mi blog...¡no me funciona!
http://img211.imageshack.us/img211/5285/dibujoupl.jpg
Y el trozo del .share-button lo he puesto justo debajo del .footer-outer y me ocurre lo que te contaba...si cambio "&title=" por "&title=;" pues me da el segundo error, ¿pero que hay mal? ¿donde se supone que se inicializa la variable "title"?