Os voy ha explicar brevemente como hago yo para crear Landings sencillas y resultonas en Blogger (Responsive, con todos los metadatos necesarios para Facebook y con una edirección java-script a nuestra oferta).
A continuación os dejo una plantilla en blanco para que la podáis personalizar a vuestro gusto, en ella ya se encuentran implementados todos los apartados citados arriba:
-------------------------Copiar desde abajo de aquí-----------------------
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<meta content='0;url=URLdeNuestraOfertaAlaQueQueremosRedirigirLasVisitas' http-equiv='refresh'/>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<meta content='TITULOdeNuestraLanding' property='og:title'/>
<meta content='URLdeLaImagenQueQuieresMostrarEnFacebook' property='og:image'/>
<meta content='TextoDeLaDescripciónQueQuieresQueAparezcaEnFacebook' property='og:description'/>
<b:skin><![CDATA[
img {
max-width: 100%;
width: auto;
height: auto;
}
]]></b:skin>
</head>
<body>
<b:section id='main' showaddelement='yes'>
<b:widget id='HTML1' locked='false' title='' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>
</body>
</html>
----------------Copiar hasta arriba de aquí-----------------
IMPORTANTE:
Lo que está pintado en Rojo son las cosas que podéis modificar.
Ahora os daré unos tips a cerca de como personalizar la plantilla:
---------------------------------------------------------------
<meta content='0;url=URLdeNuestraOfertaAlaQueQueremosRedirigirLasVisitas' http-equiv='refresh'/>
Este apartado de arriba es el de la re-dirección, el número 0 de color rojo son los segundos que queréis que tarde en hacer la re-dirección, podéis poner el tiempo que queráis.
---------------------------------------------------------------------------------------------
<meta content='TITULOdeNuestraLanding' property='og:title'/>
<meta content='URLdeLaImagenQueQuieresMostrarEnFacebook' property='og:image'/>
<meta content='TextoDeLaDescripciónQueQuieresQueAparezcaEnFacebook' property='og:description'/>
Esto será lo que aparezca en Facebook, aconsejo que antes de publicar en la Fanpage, lo hagáis en buestro muro con privacidad (solo yo) para ir haciendo pruebas de como queda la publicación.
Si queréis subir una imagen vuestra es sencillo, le das a "entrada nueva" y subes la imagen, aunque no la publiques, una vez aparezca en el borrador de entradas ya puedes copiar la url de la foto y siempre estará disponible.
En el texto de la descripción que quieres que aparezca en Facebook, puedes poner carácteres especiales y te los publicará perfactamente, ejemplo ( caras ;) :( :P :D , pulgar arriba (Y) , etc) También os aconsejo esta web para copiar carácteres especiales muy útiles http://copypastecharacter.com/all-characters
--------------------------------------------------------------------------------------------------------------
<![CDATA[
img {
max-width: 100%;
width: auto;
height: auto;
}
]]>
Este código es lo que hace que las imágenes de la landing sean responsive, se ajustan automáticamente a la anchura de cada pantalla del dispositivo que sea.
------------------------------------------------------------------------------------------------------------------
Bueno, ahora ya tenemos nuestra plantilla editada, personalizada, responsive y con los metadatos para Facebook, pero al publicarla y entrar en la landing se verá solo blanco ¿Como lo solucionamos? Muy sencillo.
Te vas ha ir a una "entrada nueva" y ahí vas ha poner lo que quieras que aparezca en tu landing: imagen, texto, banner o botón en el que van ha hacer clic,etc. Después pulasas en el modo de edición HTML y copias todo el código html de tu borrador (tip extra, recomiendo ponerlo todo centrado para que quede bién en todos los dispositivos).
Ahora vas ha irte al apartado "DISEÑO" y vamos ha añadir un gadget "HTML/Javascript" (de forma predeterminada ya te aparece) lo abres y ahí pegas todo el código html que copiaste de tu editor de entradas, guardas y ves que tal ha quedado tu landing. RECUERDA: Tienes la opción de usar redireccion a tu oferta o como landing normal, eso ya es cosa tuya.
Yo hasta ahora las he usado de las 2 maneras y nunca he tenido problemas con Facebook Ads.
Nota: los textos de la landing no van ha ser responsive, mas que nada porque en dispositivos de pantalla pequeña no se podrían leer bien, pero si lo haceis todo centrado queda bastante bien en todas las resoluciones.
TIP EXTRA: Si queréis ver como queda buestra landing en distintas resoluciones y dispositivos, podéis usar esta web http://gesdi.com/responsivator/
Hasta aquí ya está todo explicado, es sencillo y no queda mal pa lo poco que cuesta hacerlo...
Disculpadme si algo no lo expliqué bien, ya que esto de los tutoriales no es lo mio... xdxd
Si tenéis alguna duda intentaré resolverla por aquí o x el Skype, Salu2!!!
No hay comentarios:
Publicar un comentario