Aumenta tus gustos creando un sorteo en Facebook usando WordPress

Como muchos de ustedes saben, recientemente lanzamos una nueva Lista de sitios25 el mes pasado. Hemos estado haciendo un montón de promociones en los medios sociales para ello, y en un mes puedes ver que el número de usuarios en facebook del sitio ya está superando a 27.000 . Sí, eso es una locura. Una de las cosas que hicimos para dar a este sitio un impulso inicial en facebook fue crear una campaña de regalos en facebook. Para lo cual se ve el anuncio en la barra lateral de AprenderWP. En este artículo, te mostraremos cómo puedes potenciar tus gustos creando una campaña de regalos en Facebook usando WordPress. Esto será muy interesante en términos de resultados, así que léalo.

Nota: Para este tutorial se requiere un nivel intermedio de conocimientos técnicos de WordPress y CSS. Tratamos de dejar lo más claro posible para que todos nos siguieran.

¿Cómo funciona este sorteo?

Cuando el usuario llega a la página de Facebook de List25, ve la página de destino de nuestro concurso. Dice «List25 is doing a Holiday Giveaway» -> Win $25 Amazon Giftcards. Como nuestra página para ver cómo puedes entrar. Imagen de abajo:

Amazon giftcards es algo que mucha gente quiere. Así que la mayoría de los usuarios hacen clic en Me gusta para ver cómo pueden entrar. Cuando les gusta la página, ahora se les muestra el contenido sólo para fans que tiene las instrucciones de cómo ganar. Básicamente dice, estamos regalando 25 x $25 Amazon Gift Cards. Debes compartir esta página con tus amigos para calificar. Hay un botón para que el usuario haga clic y comparta la página con sus amigos.

Cuando el usuario hace clic en el botón, aparece una ventana emergente de Publicar en su muro:

Ya hemos predefinido el texto y la imagen. Así que todo lo que el usuario tiene que hacer es escribir su comentario y compartirlo. Una vez que pulsan compartir, serán llevados a la página para introducir su información. Si el usuario hace clic en Cancelar, volverá a la pestaña anterior.

Esta campaña estará en directo hasta el 20 de diciembre (es cuando anunciaremos a nuestros ganadores). Así que para aquellos que quieran ver una demostración en vivo de esto, diríjanse a la página de fans de List25 y véanlo por sí mismos.

La parte más loca de todo esto es que la mayoría de la gente piensa que requerirá que hagas alguna codificación loca o que pagues mucho dinero para tener una aplicación como esta. ¿Y si le dijéramos que hicimos todo esto con una combinación de plugins de WordPress, MailChimp y obviamente habilidades de diseño para las imágenes? ¿Quieres saber cómo hacerlo? Lee con atención.

Paso 1: Reunir las cosas

Lo primero que tienes que hacer es averiguar qué es lo que vas a regalar. En nuestro caso fueron las tarjetas de regalo de Amazon. Como mencioné anteriormente, requería una combinación de plugins y servicios. Así que lo explicaré todo aquí. Recuerde que algunos son plugins pagados:

  • WP4FB Pro <- Obtenga la opción Pro si quiere ser capaz de hacer las cosas que hicimos (la característica se llama Like Gate and Share Gate) que sólo está disponible a nivel Pro y Developer.
  • Plugin HTTPs de WordPress (Libre desde el Repositorio)
  • Certificado SSL para los usuarios de HTTPs. A partir del 1 de octubre, Facebook ahora requiere que los desarrolladores tengan una versión preparada para SSL para los usuarios que utilizan la navegación segura. Si usted está en un servidor dedicado como nosotros, entonces tiene que pagar por un certificado SSL. HostGator cobra como $50 / año por el servicio. Pero terminamos consiguiendo el nuestro por $12.99 / año del especial de Godaddy Click Here para conseguirlo.

    Si usted está en el plan de hosting compartido de HostGator, entonces KimWoodbridge tiene un tutorial que le muestra cómo usar su SSL compartido.

  • MailChimp o cuenta de Aweber. Básicamente, necesita una forma de almacenar el nombre y el correo electrónico, para poder notificar a los ganadores más adelante. Facebook requiere que recojas los datos por separado, de lo contrario, se considerará que van en contra de sus Condiciones de servicio. Así que no, no puedes enviar un mensaje al usuario en Facebook para que sepa que ha ganado.

Aparte de todo lo anterior, necesita tener listos los siguientes gráficos:

  • Gráficos de páginas sin ventilador
  • Graficas de la página de solo ventiladores donde se muestran los detalles de como entrar (con un click en el botón de compartir)
  • Página de éxito con un formulario donde el usuario puede introducir sus datos
  • Miniaturas del contenido compartido

Inversión total:

– 67 para WP4FB Pro
– 12.99 para SSL vía Godaddy (Esta es una oferta especial. Normalmente cuesta $69. Haga clic aquí para obtenerlo)
– Hasta 2000 Emails gratis: MailChimp (Nuestro plan se combina con AprenderWP por lo que estamos pagando por ello)
– 25 x $25 Amazon Giftcards ($625) <- Esto variará basado en lo que usted está regalando.Antes de pasar al siguiente paso, se supone que ha reunido todas las cosas. Para SSL, si tiene el certificado, debe estar instalado en su servidor. HostGator lo instaló en nuestro servidor. Sólo tienes que pedirles su apoyo.

Paso 2: Instalación de HTTPs de WordPress

Simplemente instale y active el plugin WordPress HTTPs Plugin desde el repositorio de WordPress.

Ve a Configuración » WordPress HTTPs y cambia el Host SSL a tu dominio.

Asegúrese de que la casilla de verificación Forzar SSL exclusivamente esté marcada.

Haga clic en Guardar configuración.

Paso 3: Configuración de WP4FB Pro

Una vez que haya adquirido WP4FB Pro, instálelo y actívelo en su sitio. Verá que se añaden 3 opciones de menú adicionales a su tablero de WordPress. El principal WP4FB uno, y luego dos tipos de post personalizados llamados páginas WP4FB y diapositivas WP4FB. Así que empecemos con el menú WP4FB. Rellene todos los ajustes generales, como texto al pie de página, url de RSS, Twitter, etc.

La siguiente opción es Facebook. Si vas allí, te darás cuenta de que se requiere el ID de la aplicación de Facebook y la clave secreta. Así que tienes que ir a buscarlo. Registre su propia aplicación en el área de desarrolladores de Facebook. Hay un montón de tutoriales en la web sobre cómo hacerlo. Cuando usted compra WP4FB Pro, viene con una serie de tutoriales en vídeo sobre cómo hacerlo. Por lo tanto, no voy a cubrir cómo registrar una aplicación de facebook en este artículo. (Utilice su tutorial en vídeo) u otro tutorial en la web.

Una vez que tengas el ID de tu aplicación y la clave secreta de Facebook, introdúcela en la configuración de Facebook del WP4FB.

Debe marcar la casilla de verificación de la compuerta del ventilador. A continuación, seleccione la página prelike. Pero como acaba de instalar esta página, no verá ninguna opción allí. Así que lo que tienes que hacer es ir a la pestaña Páginas WP4FB y hacer clic en Añadir Nuevo.

Cree una página prelike. En nuestro caso para List25, creamos una página llamada Sorteo. No agregó ningún contenido en el cuadro de contenido. Simplemente usamos una imagen de fondo para conseguir el estilo que necesitábamos. Pero esta era una forma rápida de hacer las cosas en lugar de dedicar tiempo a crear una plantilla personalizada para WP4FB.

Si usted ve, tenemos navegación de la demostración, y demostramos el título de la página fijado a NO. Hay una altura de encabezado definida porque estamos usando nuestra imagen como imagen de fondo de encabezado. Nuestro contenido está en blanco, así que todo lo que el usuario ve es la imagen.

Aviso: Que nuestra URL de la imagen tiene https:// en ella. La razón es que funciona en Facebook.

Debe asegurarse de que todas las funciones virales estén DESACTIVADAS para la página prelike. Una vez que haya creado la página pre-like, publíquela. A continuación, vuelva al menú de Facebook en la configuración principal de WP4FB y seleccione esta página.

A continuación, debe crear una página de contenido sólo para fans que contenga los detalles de cómo introducir el contenido. Para ello, también utilizamos una imagen de fondo para hacer las cosas más rápidas y fáciles para nosotros. Excepto que esta vez usamos la URL de la Imagen de Fondo de Contenido en lugar de la URL de la Imagen de Fondo de Encabezado. La razón de esto fue porque queríamos usar HTML para iniciar la función de la Puerta Compartida.

Observe de nuevo que la URL de la imagen es HTTPS. Tienes que hacer esto.

Como le expliqué que usamos la URL de la imagen del contenido, así que podemos utilizar etiquetas HTML. Básicamente nuestra imagen se veía así:

Necesitábamos hacer que el botón Haga clic aquí para compartir. Así que añadimos las siguientes etiquetas HTML en nuestra área de contenido usando el editor HTML en lugar del Editor Visual.

123 «min-height: 440px;»>»width: 190px; margin: 308px 0 0 267px;»>»text-indent: -9999px; width: 190px; height: 28px; display: block; «>Click Here to Share

Tu CSS variará en función de la imagen de fondo que utilices. Pero tienes una idea general de lo que estamos haciendo arriba, ¿verdad? Básicamente queremos hacer del botón Click Here to Share un enlace a nuestra página secreta donde el usuario podrá acceder al formulario para participar en el concurso.

Vamos a crear nuestra tercera y última página. Seguimos más o menos la misma dirección que la página de sólo fans de arriba. Usamos la URL de la imagen de fondo del contenido, y usamos HTML en el editor de contenido. La parte más importante de esta página es que hemos habilitado Viral Feature Share Gate.

Ahora note que también hemos rellenado los ajustes de Abrir Gráfica. Esta es la información que se mostrará al usuario cuando llegue al punto de acceso compartido. Vea la imagen de abajo:

Así que asegúrese de poner la imagen correcta, un título preciso y una descripción convincente.

La última página se veía así:

Así que básicamente nuestra imagen de fondo tenía dos campos vacíos. Entramos en MailChimp y cogimos un código de formulario para una nueva lista de correo electrónico que creamos para List25. Y agregó eso en el área de contenido de esta última página con el estilo.

Aquí está el código que hemos añadido (obviamente su código de formulario será diferente, pero este sería un buen punto de partida):

1234567 «min-height: 440px;»>»width: 190px; margin: 188px 0 0 0 280px;»>»mc-embedded-subscribe-form «action=»http://list25.us1.list-manage.com/subscribe/post?u=549b83cc29ff23c36e5796c38&id=184bf03dd3 «method=»post «name=»mc-embedded-subscribe-form «>»margin: 0px 0 0;»>»mce-FNAME «onfocus=»if (this.value == $0027Name…$0027) {este.value = $0027$0027;}»onblur=»if (this.value == $0027$0027) {this.valor = `Nombre…$0027;}»type=»text=»name=»FNAME «value=»Nombre…»/>»margin: -5px 0 0;»>»mce-EMAIL «onfocus=»if (this.value == $0027Enter your email…$0027) {este.value = $0027$0027;}»onblur=»if (this.value == $0027$0027) {this.valor = `Introduzca su correo electrónico…$0027;}»type=»text=»name=»EMAIL «value=»Enter your email…»/>>»mc-embedded-subscribe «type=»submit «name=»subscribe «value=»Enter the Giveaway»/>

Después de publicar esta página. Toma la URL de esta página y añádela en el botón del código de la página sólo para fans que compartimos anteriormente.

Paso 4: Promoción del sorteo

Puedes añadir la página de regalos, pero nadie lo sabrá. Si usted tiene una base de usuarios existente, entonces puede informarles sobre el sorteo. En nuestro caso, no teníamos eso. Los siguientes son los pasos que tomamos:

– Añadido un banner en la lista 25 y AprenderWP promocionando el concurso.
– También estamos llevando a cabo campañas publicitarias en Facebook para promocionar el concurso (dinero adicional que estamos gastando pero que no es necesario)
– Compartido con nuestros amigos

El aspecto viral del sorteo continúa por sí solo. Todo el mundo quiere dinero gratis.

Resultados

Necesito decir más que tenemos más de 27.000 gustos en un mes. Por supuesto que no todos ellos son del concurso porque estamos haciendo otras campañas también. Pero es justo decir que al menos un tercio de estos aficionados son del sorteo.

¿Cuánto tiempo nos llevó hacer esto? Yo diría que unas 4 ó 5 horas. ¿Valió la pena? Diablos, sí que lo fue.

¿Hará esto en su sitio web? Háganos saber su opinión.

Deja un comentario