Este post va dirigido a aquellos que como yo, usáis WordPress como gestor de contenidos, y queréis añadir los botones para compartir en Redes Sociales, pero no con código basura, sino validando W3C.
Para empezar, instalamos el plugin Share Buttons by Lockerz / AddToAny.
La configuración del mismo es súper simple, solo marcamos las redes que queremos que aparezcan:
Y elegimos dónde queremos que se muestren los botones, por ejemplo mi configuración es ésta:
Un truco para que aparezcan el resto de opciones, con el botón más, y sin que ponga “marcador”, es simplemente marcarlo y dejar el campo vacío:
Ojo, si entramos y actualizamos la configuración, volverá a aparecer la palabra “marcador”. Así que cada vez que cambio algo lo vuelvo a borrar.
Lo único que no me gustaba en absoluto, es que al compartir en Twitter no salía “vía @usuario”; es más, ni siquiera te dan la opción para configurarlo.
Pero he encontrado cómo solucionarlo mediante código, editando el plugin, lo cual con mis nulos conocimientos de programación me ha parecido un logro :)
Para ello, entramos en la sección de plugins de wordpress, y damos a editar:
El archivo que contiene la configuración para compartir se llama add-to-any.php. Lo abrimos y vamos al siguiente fragmento de código: $custom_attributes .= ‘ data-text=»‘ . $linkname
El fragmento original es:
$custom_attributes .= ‘ data-text=»‘ . $linkname . ‘»‘;
Lo editamos y añadimos al final: “ vía @usuariotwitter”, entre las comillas simples y las comillas dobles (dejando un espacio antes de “vía”). Por ejemplo:
$custom_attributes .= ‘ data-text=»‘ . $linkname . ‘ vía @experimentando_«‘;
De esta manera al compartir en Twitter, aparecerá así:
Seguro que si sabéis programación lo podéis personalizar para que aparezca en cualquier otro orden, pero no es mi caso, así que lo dejo en esa posición, y me quedo tan feliz.
¡Espero que os sirva! Intentaré aclarar cualquier duda si la tenéis, pero si me ha salido a mí, tranquilos que os funcionará a cualquiera ;)
O si prefieres una formación in company, en tu empresa, sobre:
- Tag Manager y Píxeles de Conversión
- Google Analytics básico o avanzado
- Data Studio
- Supermetrics Functions
- SEO
- Google Ads
21:43
10 May 13
Guest
miguel says:
Hola, estoy creando un nuevo blog para un despacho de abogados y utilizo las misma plantilla que ustedes, he observado que en el estilo de los post ustedes han quitado la hoja de libreta que viene por defecto y me gustaría saber si lo han hecho mediante código o hay una forma más sencilla, me seria de gran utilidad. un saludo y muchas gracias, por cierto, su web también me está siendo de mucha ayuda!
10:26
11 May 13
administrator
Lucía Marín says:
Buenas Miguel!! gracias por tu comentario.
Yo también soy de Granada, bonita tierra !! :)
Como adivinabas, lo he hecho mediante código, editando el archivo principal de css del blog.
Es muy sencillo, te explico cómo hacerlo para que lo puedas probar.
Entras en el menú: Apariencia / Editor. Y ahí, en la plantilla de estilos «styles.css».
Primero haces una copia de seguridad del código en un archivo local, para evitar jaleos.
Después, añades el siguiente código al final, y das a guardar. De este modo el fondo de libreta se sustituye por un fondo blanco.
/*personalizacion fondo posts*/
.post-title,.note-inner{background:#fff!important}
.note-bottom-center{display:none!important}
a.readmore{margin-bottom:20px}
.note-inner{border-bottom:1px solid #e1e7d0}
.note-content:after {background-image: none!important;}
Como consejo extra para la plantilla, sería buena idea cambiar la el tipo de letra de la página… no se lee muy bien, a mí me pasaba igual hasta que la cambié a «verdana, arial, sans-serif».
Para ello, en el mismo archivo, busca esta línea y reemplaza el texto en negritas por el tipo de letra que desees, mejor elige alguna de las fuentes seguras para web: http://www.elwebmaster.com/articulos/fuentes-seguras-para-la-web-como-y-cuales-son
/*————————————————*/
/*—————–[BASIC STYLES]—————–*/
/*————————————————*/
body { line-height: 27px; font-family: verdana,arial,sans-serif; font-size: 12px; color: #666; text-shadow: 1px 1px 0 #fff; background: url(images/body-bg.png); }
Encantada de poder ayudarte, un saludo!!
Lucía Marín