Usando JavaScript para invitar contactos a una pagina en Facebook

Bienvenidos a mi nuevo post. En mis redes sociales ( Facebook | Instagram | Twitter | LinkedIN ) estuve anunciando la llegada de una serie de post que mezclan la programación con el community management, este es el primero de una serie de post en la que iremos paso a paso desarrollando “Trucos” o “Atajos” para facilitar ciertos trabajos en las redes.

Si no te interesa el como llegar al codigo, puedes hacer Click Aqui e iras directamente al codigo final, por otro lado todos los que si quieran aprender paso a paso como llegar a nuestro objetivo son bienvenidos a leer el articulo completo, comenzamos:

Aclaratoria: No se necesitan conocimientos previos de programación para lograr el objetivo, mas si para entender como lograrlo.

 

Primero como dicta la costumbre, Vamos con algunos conceptos básicos:

 

 

Variables

“En programación, las variables son espacios reservados en la memoria que, como su nombre indica, pueden cambiar de contenido a lo largo de la ejecución de un programa.” – Fuente 

Sintaxis de variable en JavaScript:

var NombreDeVariable = ValorDeVariable;

Ciclo “For”

“El bucle for o ciclo for es una estructura de control en programación en la que se puede indicar de antemano el número mínimo de iteraciones que la instrucción realizará.” – Fuente 

Sintaxis de bucle “for” en JavaScript:

for ( i = 0 ; i <= iteracionFinal ; i++) {
codigo a repetir la cantidad de veces que el ciclo lo haga
}

Lo demás lo seguiremos viendo en el camino, esto es para no perdernos.

Paso 1: Ampliando la lista

Lo primero que debemos hacer es ir a nuestra pagina de Facebook y seleccionar invitar amigos a dar “Me Gusta” en la pagina, justo al lado del botón de compartir (penúltima opción).

Una vez hecho esto, nos aseguramos que la lista que tenemos diga: “Buscar entre todos mis amigos” y hacemos Scroll down en esa lista hasta que se hayan mostrado todos los contactos o todos los “Amigos” en nuestro facebook.

Paso 2: Haciendo la investigación.

Una vez que tenemos toda la lista desplegada debemos averiguar, que es lo que tienen los todos los botones de “Invitar” en común a nivel de código, así que buscaremos sus clases o en su defecto sus ID (Documentación al final del articulo) a través del inspector de elementos de Google Chrome.

Ya revisando bien el código de los botones descubrimos que todos los botones comparten la clase: “uiButton”

Paso 3: Creando el Código.

Lo primero que debemos para lograr nuestro objetivo es crear una variable de JavaScript, puede tener cualquier nombre, pero yo la llamare “input” y la igualaremos a la función:

document.getElementsByClassName(“uiButton”);

Esta funcion consta de 3 partes por decirlo de un modo:

  • document: hace referencia a toda la pagina web.
  • .getElementsByClassName: exactamente como su nombre lo indica, conseguira los elementos que tengan clases del nombre especificado.
  • (“uiButton”): le indica a la parte anterior (.getElementsByClassName) que las clases que buscara son las de nombre “uiButton”.

var input = document.getElementsByClassName(“uiButton”);

Esto hará que la variable “input” sea igual a un arreglo (Un Arreglo es una matriz de datos, documentación al final del post) y como toda matriz, al ser finita indica que se pueden contar cuantos elementos tiene adentro con la función:

input.length

Iniciamos el Ciclo for:

var input = document.getElementsByClassName(“uiButton”);
for ( i = 0; i <= input.length ; i++) {
Ya Veremos que código va aquí.
}

Tal cual como lo habíamos dicho antes, estamos buscando que el código haga el trabajo por nosotros, se podría decir que el trabajo es hacer el click. Ya sabemos que la  “i” de nuestro ciclo for, ira aumentando de 1 en 1 hasta llegar a la cantidad de elementos que existen en input así que tomaremos input y le agregaremos el contador para ir seleccionando cada elemento de uno en uno, y a esto le agregaremos la función “.click()”

var input = document.getElementsByClassName(“uiButton”);
for ( i = 0; i <= input.length ; i++) {
input[i].click();
}

Tenemos listo el código, fácil y rápido.

Paso 4: Aplicando el código.

 

Teniendo abierta la ventana de la lista ya con todo el scroll completo para que salgan todos nuestros contactos en la ventana, abrimos el inspector de elementos de Google Chrome, le damos click en la “Consola” o “Console”. Salen unas advertencias de tener cuidado con lo que se escribe en la consola, debido a que muchos “Hackers” engañan personas para colocar códigos maliciosos en ella. procedemos a colocar nuestro código en la consola, presionamos Enter y listo, observemos como todos los contactos se invitaron a la pagina automáticamente.

Por motivos de privacidad en ningún capture se pueden ver las fotos de mis contactos ni sus nombres.

La estética visual en las páginas web ¿Debemos tomarla en cuenta?

     En la programación no todo tiene que ser en blanco y negro, hoy en día hay  muchas herramientas que le dan vida a nuestro trabajo y ahí radica la importancia de la estética visual en el desarrollo web.      Actualmente nos enfrentamos con usuarios muy exigentes y...

Jorge Pirela CEO / Fundador

Share This

Share this post with your friends!