blogger para tu comercio

2013

Doctora Retail Experta en el pequeño comercio

[BLOGGER PARA TU COMERCIO] Manual de la formación de BLOGGER PARA TU COMERCIO, enmarcada en el curso "Venta online " IES Txurdinaga-Artabe BHI - Marzo 2013

Manual elaborado y formación impartida por la Doctora Retail

Doctora Retail | Blogger para tu comercio- Marzo 2013 2

Blogger para tu comercio

Tema 1: Introducción

¿Qué es un blog?

Un blog, (también se conocen como weblog o bitácora), es un sitio web que recopila cronológicamente textos o artículos de uno o varios autores, apareciendo primero el más reciente.

Habitualmente, en cada artículo, los lectores pueden escribir sus comentarios y el autor darles respuesta, de forma que es posible establecer un diálogo.

El uso o temática de cada blog es particular, los hay de tipo personal, periodístico, empresarial o corporativo, tecnológico, educativo, etc

http://www.blogia.com/que-es-un-blog.php

¿Qué es Blogger?

Blogger es un servicio creado por Pyra Labs, y adquirido por Google en el año 2003, que permite crear y publicar una bitácora en línea. Para publicar contenidos, el usuario no tiene que escribir ningún código o instalar programas de servidor o de scripting.

Los blogs alojados en Blogger generalmente están alojados en los servidores de Google dentro del dominio blogspot.com.

http://es.wikipedia.org/wiki/Blogger

¿Para qué me sirve un blog como comerciante?

El marketing de contenidos

"Según la Wikipedia (http://es.wikipedia.org/wiki/Marketing_de_contenidos) el marketing de contenidos es el arte de entender exactamente qué necesitan saber los clientes y entregárselo de forma pertinente y convincente. Consiste en crear y distribuir contenido relevante para clientes y potenciales clientes con el objetivo de atraerlos hacia la empresa y conectar con ellos. No es, por tanto, contenido promocional sino útil y relevante para los usuarios y para la empresa."

Fuente: http://www.slideshare.net/inakilazaro/gua-marketing-digital-contenidos-20

http://es.wikipedia.org/wiki/Pyra_Labs

http://es.wikipedia.org/wiki/Blog


Mi blog como aliado en mi estrategia de marketing de contenidos

Ofrecer contenidos de calidad dentro de mi sector profesional es una inversión para crear marca a largo plazo. Para ello debo publicar con frecuencia, ofrecer contenidos inéditos, de calidad y de interés para mis clientes potenciales, apoyar mis contenidos con multimedia, atender los comentarios...

Esto nos permite a largo plazo convertirnos en una referencia en nuestro sector, generar tráfico a nuestra web y posicionarnos en los buscadores (SEO).

¿Qué tiene que ver un blog con el comercio electrónico?

Nos sirve para posicionar nuestro comercio

Como ya hemos visto nuestra estrategia de marketing de contenidos puede ser muy útil para posicionar nuestra página de comercio electrónico.

Funcionamiento de blogger

Aprendiendo a trabajar con blogger podemos familiarizarnos con las herramientas de diseño y funcionamiento de nuestro sitio web de e-commerce.

Otras plataformas para publicar un blog

• Wordpress: http://es.wordpress.com/

• Hazblog: http://www.hazblog.com/

• Blogia: http://www.blogia.com/


Tema 2: Empezamos a crear un blog en Blogger

Lo primero que debemos tener en cuenta al crear nuestra cuenta en Blogger es que es necesario disponer de una cuenta de gmail.

Una vez que entramos en blogger con nuestra cuenta de gmail se nos presenta la siguiente pantalla de bienvenida.

Para ver las condiciones de uso de Blogger podemos recurrir a : http://www.google.com/intl/es/policies/terms/

Una vez que confirmamos que queremos ser usuarios de Blogger, tenemos la posibilidad de añadir blogs a nuestra lista de lectura (blogs que seguimos o que son de nuestro interés) o bien de crear nuestro propio blog:


Pinchamos sobre "Nuevo blog" y tendremos acceso a la siguiente pantalla para definir el nombre de nuestro blog y el subdominio de blogspot. También podemos elegir la plantilla, aunque podremos cambiarla con facilidad más adelante.


Introduciendo estos datos nuestro blog ya existe, pero no tiene ninguna "entrada" o publicación. Esta plantilla es la "Simple"


En la trastienda de nuestro perfil de Blogger nos encontramos con un panel de administración de esta forma:

Zona de actualizaciones y comentarios

Menú general

Estadísticas

Este panel es la primera imagen sobre la administración de nuestro blog y nos mostrará las estadísticas generales y los comentarios totales y pendientes de moderación

Lo primero que vamos a hacer es ir al menú de "Configuración" para comprender y editar cómo va a funcionar nuestro blog.


Básico:

Título: es el título del blog, que se puede modificar pulsando Editar.

• Descripción: es una descripción del blog, que aparecerá debajo del título en la cabecera del blog.

• Dirección del blog: La dirección del blog también se puede modificar siempre que esté disponible la nueva URL o dirección web, pero no conviene cambiarla porque eso dejaría rotos los enlaces anteriores a las entradas del blog que los lectores hubieran guardado. Además, existe una opción para añadir un dominio personalizado si queremos llevarnos el blog a nuestro dominio de internet.

• Autores del blog: Podemos añadir más autores a nuestro blog enviándoles una invitación a sus cuentas de GMail, donde recibirán un mensaje de email con un enlace al blog. Al principio tendrán la categoría de Autores, es decir, podrán publicar y modificar sus entradas del blog, pero no podrán realizar labores de administración a menos que el creador del blog les dé privilegios como administradores.

• Lectores del blog: Se puede editar esta opción de forma que el blog sea visible para cualquiera, sólo para sus autores o para los lectores que se elijan.

Entradas y comentarios:


• Mostrar un máximo de 10 entradas en la página principal, que es un número adecuado para no cargar la portada con muchas entradas. Cuando su número sobrepase el de 10, aparecerá otra página a la que se accederá con un enlace que hay en la parte inferior de la página.

• La Plantilla de entrada es cualquier código HTML que queramos incluir en todas las entradas sin necesidad de repetirlo, pero es mejor no utilizar esta opción si no se tienen conocimientos de este lenguaje de marcas que subyace en los documentos web.

• Mostrar imágenes en lightbox: esto es como un pase de diapositivas que se crea cuando se hace clic en cualquier imagen de la entrada del blog, y muestra todas las imágenes de esa entrada.

• Ubicación de los comentarios: Los comentarios que los lectores hacen en las entradas suelen estar ubicados debajo de éstas, pero se puede cambiar el lugar, aunque no resulta aconsejable, pues ése el el sitio habitual para los comentarios.

• ¿Quién puede realizar comentarios?: Lo normal es que cualquiera pueda realizar comentarios, pero es aconsejable utilizar la moderación de comentarios de la siguiente opción.

• Moderación de comentarios: Supone la aprobación de los comentarios por parte del autor del blog antes de ser publicados, y para ello existe una sección donde aparecen todos los comentarios después de ser escritos y antes de ser publicados o eliminados.

• Mostrar enlaces de retroceso: Son enlaces de otros blogs cuyos autores a su vez han enlazado alguna entrada de nuestro blog, y aparecen en la parte inferior de las entradas.

• Mensaje del formulario de comentarios: Es un texto que podemos añadir al formulario donde los lectores escriben sus comentarios a las entradas.

Móvil y correo electrónico:

• Publicar entradas mediante SMS/MMS: Para publicar entradas con móviles hay que añadir un dispositivo móvil mediante un código de verificación.

• Publicar entradas mediante correo electrónico: Es una buena opción si queremos conseguir entradas de personas que no sean miembros del blog mediante una dirección de email que se configura aquí mismo.

• Correo electrónico de notificación de comentarios: Sirve para notificar a las cuentas de email expresas del envío de comentarios en las entradas.

• Enviar entradas por correo electrónico a: Es una notificación para un máximo de diez personas de la publicación de entradas en el blog.

Idioma y formato:

En esta sección se configuran el idioma y los formatos de las fechas que parecen en el blog.

Preferencias para motores de búsqueda:

Etiquetas meta: sirven para que nuestro blog sea encontrado con mayor facilidad. Describe de forma concisa, usando palabras clave por las que los usuarios suelen buscar asuntos relacionados con los contenidos que planteas en tu blog


Otros:

Herramientas de blog: con estas opciones podemos exportar las entradas y los comentarios de nuestro blog en formato XML, y luego importarlas a otro blog de Blogger. Con el archivo XML podemos tener una copia de seguridad del contenido de nuestro blog.

• Feed del sitio: Un feed es un anglicismo que se refiere a una forma de distribuir el contenido de nuestro blog en otros blogs que recogen nuestro enlace de feed por medio de la tecnología RSS, situado en la parte inferior del blog con la expresión Suscribirse a: (Entradas Atom). Con ese enlace, se pueden publicar automáticamente nuestras entradas completas o cortas en un lector de feeds como Google Reader conforme las vayamos publicando.

• OpenID: Es un servicio web donde se puede crear una contraseña que nos servirá para su uso en muchos servicios donde la admiten.

• Contenido para adultos: Sirve apara avisar a los lectores del blog de que entran a un blog para adultos, es decir, con contenidos principalmente eróticos o de violencia.

• ID de propiedad web de Google Analytics: Si estamos suscritos al servicio de estadísticas Google Analytics, podemos añadir aquí la identificación (ID) de nuestro blog.

http://avalerofer.blogspot.com.es/2007/02/cmo-crear-un-blog-en-blogger.html

http://es.wikipedia.org/wiki/Rss


Tema 3: Personalizar la plantilla y el diseño

Una vez creado y configurado nuestro blog, vamos a editar su apariencia.

Para ello Blogger nos presenta dos herramientas en su menú: "Diseño" y "Plantilla"

El menú PLANTILLA

Blogger nos proporciona varias plantillas para empezar en las que podremos personalizar los colores, fuentes, el fondo... Además nos enseña cómo se verá nuestra plantilla en dispositivos móviles.

En este momento debemos tener claro cómo queremos que sea nuestro blog en cuanto a diseño: cuales son nuestros colores corporativos, si tenemos web cómo es, si hay alguna tipografía que identifica nuestra marca y tener preparadas las imágenes principales (fondo o título) para el blog.

Elegimos una plantilla que nos guste y la aplicamos al blog. Podemos ignorar los colores y tipografías porque podremos cambiarlos posteriormente.

Una vez elegida la plantilla la vamos a personalizar. Pinchando en "Personalizar" se abre el "Diseñador de plantillas de blogger". En el manú principal tenemos:

• Plantilla: podemos volver a cambiar la plantilla desde aqui.

• Fondo: podemos cambiar la imagen de fondo y la gama de colores por una serie de conjuntos de colores que Blogger nos sugiere

• Ajustar ancho: ajustamos el ancho general y de las diferentes columnas del blog


• Diseño: Elegimos la estructura del blog: una, dos o tres columnas, disposición de los gadgets...

• Avanzado: podemos cambiar colores, tipografías,

MENU

Guardar cambios con "Aplicar al blog"

Para salir del disñador "Volver a Blogger"

Después de realizar los cambios que nos gusten pinchamos sobre "Aplicar al blog" y salimos mediante "Volver a Blogger".

Antes de seguir trabajando en el diseño vamos a publicar una entrada en nuestro blog

Nueva entrada Listado entradas


Una vez que hemos pulsado sobre nueva entrada nos aparece esta pantalla en la que definimos el título y podemos comenzar a escribir en nuestro blog. Funciona como un editor de texto.

Escribimos la entrada y "Publicar"

Más adelante veremos con profundidad los elementos relativos a las entradas o publicaciones.

Volvamos al diseño del blog. En el menú Plantilla, Personalizar y Avanzado. Ya tenemos una entrada para que podamos modificar y previsualizar los elementos, incluidas los relativos a las publicaciones.

Exploramos nuevamente el diseñador de plantillas hasta dejar la apariencia que nos interesa.

El menú DISEÑO

Otro de los menús que nos permite cambiar la apariencia del blog es el "Diseño"


Favicon (icono) Titulo y descripción Navegación por blogger

Caja de datos Entradas Listado entradas

En este menú no puedo previsualizar directamente los cambios pero sirve para organizar los elementos existentes y añadir otros nuevos.

• Favicon: Es el icono que aparece en la pestaña del navegador. Por defecto es el de Blogger. Para cambiar esta imagen debemos seguir los requisitos de Blogger.

• Barra de navegación: es una ayuda de blogger para los que navegan por diferentes blogs. Podemo hacer que no se muestre.

• Título y descripción: podemos editar el título y añadir una descripción para mejorar el SEO

• Datos personales: podemos mostrar u ocultar

• Archivo del blog: es la forma en la que se presenta el listado de entradas publicadas

• Reconocimiento: podemos añadir quién es el propietario de los derechos de autor del blog y Blogger reconoce al diseñador de la plantilla.

• Entradas: es la zona en la que se publicarán las entradas.

Podemos añadir otros elementos como veremos más adelante.

En "Editar" del cuadro "entradas del blog" podemos configurar cómo se van a ver todas nuestras entradas o publicaciones: número de entradas que se pueden ver por página, si queremos que aparezca o no la fecha o la hora de publicación, los elementos inferiores y en qué orden se colocan...


Una vez realizados los cambios en "Diseño" pinchamos sobre "Guardar configuración" y podemos acceder a una "Vista previa" o bien "Ver blog"

Otras plantillas de Blogger que podemos descargar e instalar: http://btemplates.com/


Tema 4: Publicar en el blog

¿Cómo publicar?

Para publicar en el blog no es necesario tener conocimientos de HTML. Como ya hemos visto al pinchar sobre el icono del lápiz se abre un editor de texto, tipo Word, que nos permite escribir.

Insertar una imagen: se puede hacer de varias formar

• Indicando la URL de la imagen

• Desde el blog

• Desde el ordenador

• Desde Picasa

• Desde....

Una vez insertada podemos elegir tamaño, posición, añadir una leyenda y MUY IMPORTANTE, añadir las propiedades.

Insertar un video: podemos hacerlo directamente desde nuestro ordenador, desde YouTube y si queremos hacerlo desde otra plataforma como Vimeo, tenemos que usar la opción de "Compartir" o "Share" y copiar y pegar el código usando el menú HTML


Insertar una presentación: para insertar desde Slideshare seguiremos el mismo procedimiento que con los videos. Pinchando sobre "Embed" nos aparece un código que copiaremos y pegaremos en el HTML.

Los enlaces: Podemos crear y configurar enlaces a otras páginas. No utilices la URL como enlace, utiliza una palabre o frase y añade la URL en el cuadro correspondiente.

Las etiquetas

Las etiquetas nos sirven para organizar mejor las entradas para el lector y como palabras clave para el SEO

La programación

Podemos programar la fecha y

hora en la que se publicarán nuestras "entradas"


Diferencia entre "entradas" y "páginas"

Blogger también nos permite agregar páginas "estáticas" a nuestro blog, con lo que ñéste adquiere un aspecto de sitio web convencional.

Prueba a insertar nuevas páginas y rediseña la imagen de tu blog. No olvides que debes elegir entre "Pestañas principales" y "Enlaces laterales" para que el menú de páginas sea visible en tu blog.

Los comentarios

Desde el menú "Configuración" podemos decidir quién podrá publicar comentarios en nuestro blog y si estos necesitarán o no moderación. Si así lo decidimos Blogger nos envía un correo por cada comentario pendiente de moderar.

En el menú de "Comentarios" los veremos y sabremos si tenemos alguno/s pendientes de moderación.


Tema 5: Añadir nuevos elementos

Ya hemos visto cómo desde el menú diseño podemos añadir diferentes "gadgets" o "widgets" al blog. Desde una encuesta a una imagen, listados de blogs que recomendamos o seguimos, listas de enlaces, las etiquetas que solemos utlizar, un calendario...

Probamos a utilizar varios de los gadgets que nos ofrece Blogger.

Otros gadgets interesantes son los que enlazan con nuestras redes sociales. Vamos a ver cómo insertar el de Facebook, Twitter o Pinterest

Insertar el Gadget de Facebook (con fotos de los fans, válido para páginas, no perfiles):

"Sigue estos pasos para ver un caja con las fotos de tus fans en el blog o web:

• Abre en otra pestaña del navegador tu página de fans

• Copia la dirección web (URL) de la barra de navegación del propio navegador

• Conecta con esta página: https://developers.facebook.com/docs/reference/plugins/like-box/

• Donde pone "Facebook Page URL" deberás pegar la dirección de tu página en Facebook

• Configura los diferentes parámetros

• Presiona el botón Get Code, cópialo (es un iframe)

• Ve a Diseño

• Agrega un Gadget del tipo HTML/Java Script al menú de la derecha.

• Pega el código en el Gadget

• Presiona el botón Guardar y visualiza tu blog"

Fuente: http://www.iniciablog.com/2011/03/caras-facebook-caja-blogger-like-box.html

http://developers.facebook.com/docs/reference/plugins/like-box/

https://developers.facebook.com/docs/reference/plugins/like-box/


Ejemplo:

<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FIgone-Castillo%2F506688859343071&width=170&height=258&show_faces=true&colorscheme=light&stream=false&border_color&header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:170px; height:258px;" allowTransparency="true"></iframe>

Insertar el Gadget de Twitter:

"Pasos para integrar la actividad de Twitter en el blog.

• Paso1. Entrar en los Widgets de Twitter (el de perfil) https://twitter.com/settings/widgets

• Paso 2. En Configuración indicar el nombre de usuario de Twitter

• Paso 3. En Preferencias, puedes indicar diversos parámetros como la forma en la que se muestran los Tweets, si incluyes barras de desplazamiento vertical, foto del perfil, cantidad de Tweets, etc.

• Paso 4. Ajustar la Apariencia y las Dimensiones

• Paso 5. Presionar el botón Probar configuración y una vez estemos convencidos, presiona el botón Terminar & Guardar código

• Paso 6. Copiar el código y ahora volvemos al blog

• Paso 7. En la pestaña Diseño y luego en Elementos de la página insertar un Gadget del tipoJava Script/HMTL y pegar el código

• Paso 8. Sitúa el nuevo elemento en la posición que quieras, guardar la plantilla y listo."

Fuente: http://www.iniciablog.com/2011/03/como-twitter-actividad-en-blog-web.html

http://twitter.com/about/resources/widgets/widget_profile

https://twitter.com/settings/widgets


Asi es cómo podemos verlo en el blog

Insertar el Gadget de Pinterest:

Para que el el blog podamos ver nuestros últimos pins en Pinterest también podemos insertar un gadget.

Vamos a hacerlo insertando un widget de tipo "HTML/Javascript"

Nos dirigimos a la página: http://gist.github.com/mariemosley/1983220

Allí tenemos el código que podemos personalizar para que el widget muestre en el blog los pines de nuestros tableros de Pinterest. Lo copiamos y pegamos o bien directamente en el editor de Blogger o en un "Bloc de notas" o similar para poder editarlo. Con la ayuda de ctrl-f buscamos "Your-user-name" dentro de código y lo sustituimos por nuestro nombre de usuario en Pinterest.

Por ejemplo:

$(document).ready(function () { $('#pinterest').rssfeed('http://www.pinterest.com/YOUR-USER-NAME/feed.rss', { limit: 6, snippet: false, header: false, date: false

http://gist.github.com/mariemosley/1983220


Se convierte en:

$(document).ready(function () { $('#pinterest').rssfeed('http://www.pinterest.com/igone7/feed.rss', { limit: 6, snippet: false, header: false, date: false

Una vez editado volvemos al panel de diseño de Blogger y en añadir gadget elegimos el de tipo HTML/Javascript. Pegamos código, nombramos y guardamos.

El resultado se ve asi

El aspecto de nuestro gadget es el siguiente:


Fuente: http://www.codeitpretty.com/2012/03/pinterest-gadget-for-blogger.html

Otros widgets de Pinterest en:

• http://www.bloggersentral.com/2012/02/how-to-add-pinterest-follow-button.html

• http://www.codeitpretty.com/2012/11/new-pinterest-board-and-profile-widgets.html

Insertar un formulario de Google Drive

Cuando nuestro blog forma parte de nuestro negocio es importante que invitemos a los visitantes a poder contactar con nosotros de forma directa. Para ello podemos crear un formulario en Google Docs/Drive para que el blog enlace de forma directa y recoger los datos de los interesados en nuestros productos y servicios.

En Google Drive creamos el formulario

En las "herramientas" de la hoja de cálculo definimos las "reglas de notificación" y guardamos.


Volvemos al formulario y pulsamos sobre "Ver el formulario publicado". Copiamos la URL y volvemos a Blogger para insertarla donde queramos como enlace.

El formulario puede abrirse en una nueva pestaña o "sustituir" a nuestro blog. Si ajustamos bien las reglas de notificación sabremos cuándo los visitantes a nuestro blog han dejado datos de contacto o contestado a nuestra encuesta.


Insertar un calendario

Igualmente podemos enlazar un calendario de GMAIL en nuestro blog.

Vamos a nuestro "Calendar" de gmail y creamos un calendario en el que compartiremos los eventos de nuestro negocio.

Una vez creado vamos a la "Configuración" de calendario:

• En la pestaña "Compartir este calendario" lo marcamos como "Hacer público este calendario"

• En la pestaña "Detalles del calendario configuramos la zona horaria. Vemos que en "Incrustar el calendario" aparece un código similar a este:

• <iframe src="https://www.google.com/calendar/embed?src=igone.trabajo%40gmail.com&ctz=Europe/Brussels" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>

• Pinchamos sobre "Personaliza el color el tamaño y otras opciones" para darle la apariencia que queremos.

• Una vez configurado el aspecto copiamos el código y lo pegamos en el lugar del blog que nos parezca conveniente.

Este es aspecto que debería tener nuestro calendario:


Tema 6: Estadísticas

Cuando llevemos un tiempo con nuestro blog nos interesará conocer las estadísticas sobre las visitas que recibimos. Blogger nos permite acceder a muchos datos sin necesidad de usar una herramienta externa como Google Analytics.

La visión general de nuestras estadísticas es así:

• En "Entradas" podemos controlar las visitas por cada una de nuestra publicaciones.

• Con "Fuentes de tráfico" conocemos cual es la URL desde la que se ha visitado nuestro blog e incluso las palabras clave con las que nos han encontrado.

• La pestaña "Publico" nos permite controlar la ubicación geográfica de nuestros visitantes, el navegador y el sistema operativo que utilizan para navegar.

Estos datos nos pueden servir para adaptar nuestro blog a nuestro público y saber qué podemos hacer para aumentar el número de visitas.

Otros

¿Cómo invitar a alguien a escribir en mi blog de Blogger?

En el menú "Configuración" de Blogger vamos a "Lo básico" y podemos en "Permisos" añadir autores a nuestro blog.

¿Puedo tener un dominio personalizado en lugar de "miblog.blogspot.com"?

Si, en "Configuración" vamos a "Publicación y podemos añadir un dominio personalizado en lugar del propio de Blogger


¿Puedo mejorar el posicionamiento SEO de mi blog?

Si, Blogger nos permite editar algunos parámetros mediante "Configuración" y "Preferencias para motores de búsqueda". Si no tienes conocimientos de SEO es mejor que no edites "Rastreadores e indexación"

Recomendación importante: revisa los cambios de diseño que realices en varios navegadores y en el móvil, para ver si los resultados son los que esperabas

Para seguir aprendiendo sobre Blogger:

Blog: http://www.iniciablog.com/

Comunidad de Google+: https://plus.google.com/u/1/communities/109305088993033080268

http://www.iniciablog.com/

https://plus.google.com/u/1/communities/109305088993033080268


WEBGRAFÍA

http://www.iniciablog.com/

http://www.bloggorium.com/2013/03/cambiar-la-plantilla-en-blogger.html?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+Bloggorium+%28Bloggorium%29#.UT5Vahw3Y3g

http://ciudadblogger.com/2011/01/ocultar-gadgets-y-elementos-en.html

http://santyweb.blogspot.com.es/2008/12/como-insertar-o-crear-eliminar-o-mover.html

http://btemplates.com/2013/blogger-template-whitesmoke-1306/

http://www.codeitpretty.com/2012/03/pinterest-gadget-for-blogger.html

http://www.gadgetsblogger.com/


NOTAS DEL ALUMNO

blogger para tu comercio

Education