CÓMO INTEGRAR A TU SITIO WEB EL BOTÓN DE LOGIN

DE FACEBOOK

Una característica muy importante de cualquier sitio alineado con las tendencias de
usabilidad, es ofrecer al usuario opciones de identificación y personalización, rasgos
que permiten mejorar mucho la UX con detalles que pueden ir simplemente desde
mostrar su fotografía hasta la personalización de la interfaz.

Aunque algunos usuarios aún prefieren registrarse a la vieja usanza, mediante

formularios, la mayoría prefiere usar un botón y permitir un acceso parcial a sus datos
básicos almacenados en una de sus redes sociales. El uso de estos botones, mejora la
experiencia para el usuario, y además ayuda a la seguridad de nuestro sitio.
Plataformas poderosas como Facebook, ofrecen la posibilidad de integrar a tu sitio web
un botón de login para que tus usuarios se registren desde allí. Hoy aprenderás cómo
usarlo en beneficio propio.

Facebook login
Facebook tiene una enorme base de usuarios en América Latina y afortunadamente
ofrece un botón de login fácil de crear e integrar en tu aplicación o sitio web.
¿Cómo usarlo? 
En primer lugar se debe registrar una aplicación en Facebook Developers, buscamos la
pestaña “My Apps” y seleccionamos la opcion “Add a New App”.

Una vez que inicies tu aplicación, ve a la sección “Settings”, en esta puedes ver la ID de
tu aplicación; es importante registrar la URL que vas a usar, así aseguras que solo se
puedan usar tus credenciales desde tu sitio.
 Para hacerte aún más fácil usar Facebook Login te tengo preparado un cliente de la
Facebook SDK que carga de forma asíncrona la SDK y se encarga de manejar el login y
obtener la información básica del usuario para que puedas usarla en tu sitio.

Para hacerlo basta con cargar el código justo antes de la etiqueta y agregar el HTML al
lugar en donde deseas mostar el botón de login, este desaparecerá una vez que el usuario
haga login.

El código incluye una función que mostrará un mensaje de bienvenida al usuario, para
usarla, únicamente necesitas asignar el id a cualquier elemento HTML en el que desees
mostrar el mensaje.

index.html

Para que puedas integrar tu aplicación fácilmente, toda la información básica del
usuario estará disponible en una variable global llamada facebookUser, el contenido se
mostrará en un mensaje en la consola cuando inicies sesión.
Puedes iniciar sesión en el demo y abrir la consola de tu navegador.

Con esto puedes consultar facilmente los siguientes datos:

 facebookUser.id
 facebookUser.name
 facebookUser.first_name
 facebookUser.last_name
 facebookUser.link
 facebookUser.gender
 facebookUser.locale
 facebookUser.timezone
 facebookUser.updated_time
 facebookUser.verified

MOSTRAR PUBLICIDAD DENTRO DE UN

ARTÍCULO DEL BLOG
Realmente hay varias formas de hacerlo, pero para mi caso particular:
 No quería depender de otro plugin más: Ya sabemos que mientras más plugins
tengamos, generalmente más lenta carga la página. Ya bastante aumenta la carga el meter
publicidad como para encima necesitar otro plugin como Quick Adsense (EN) y compañía.
 Quería que se adaptase al contenido: Por la forma en la que en su día modifiqué la
plantilla de esta página, algunas maneras que existen de formatear texto no se ajustan a mis
necesidades. El criterio de dónde mostrar el contenido debía por tanto ser ajeno al propio
contenido, cosa que explicaré a continuación.
Así, después de darme una vuelta por la Red, acabé encontrando un código
en AyudaWP (ES) que me sirvió de base para lo que quería hacer.
Para ello, cree en mi archivo AdSense.js (si no sabe de lo que hablo échele un ojo a este
otro artículo) dos nuevas instancias del tipo:

//Banner de dentro del artículo Z

function adsenseArticleZ() {
if (sevisitor) {
varlarge = '<?php if (is_page()) { \n\
sevisitor = false; \n\
} ?> \n\
<script async
src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></scrip
t> \n\
<ins class="adsbygoogle" \n\
style="display:block" \n\
data-ad-client="XXXXXXXXXXXXX" \n\
data-ad-slot="YYYYYYYYYY" \n\
data-ad-format="auto"></ins> \n\
<script> \n\
(adsbygoogle = window.adsbygoogle || []).push({}); \n\
</script> \n\
';
document.write(large);
}
}

Sobra decir que cada una es semejante a la otra, solo que llamándose
distinto (adsenseArticle1 y adsenseArticle2) y
cambiando XXXXXXXX y YYYYYYYYY por los valores que correspondan.
Ahora solo faltaba hacer que se mostrase cada una de ellas donde
correspondiese mediante el código:

<script type="text/javascript">adsenseArticleZ();</script>
Para ello he utilizado este otro, que hay que colocar en el archivo functions.php de
nuestra plantilla:

//Publicidad tras X párrafos

add_filter( 'the_content', 'publicidad_tras_parrafo' );
function publicidad_tras_parrafo( $content ) {
if( !is_single() )
return $content;
$paragraphAfter1 = 5; //numeros de párrafos antes del primer
anuncio
$paragraphAfter2 = 18; //número de párrafos antes del segundo
anuncio
$content = explode ( "</p>", $content );
$new_content = '';
for ( $i = 0; $i < count ( $content ); $i ++ ) {
if ( $i == $paragraphAfter1 ) {
$new_content.='<script
type="text/javascript">adsenseArticle1();</script>';
}
if ( $i == $paragraphAfter2 ) {
$new_content.='<script
type="text/javascript">adsenseArticle2();</script>';
}
$new_content.=$content[$i] ."</p>";
}
return $new_content;
}

Como verá, lo que estoy definiendo aquí es que antes de mostrarle al usuario el
contenido del artículo, cuente el número de párrafos que contiene, y después de 5 y de
18 párrafos agregue la función que llama a cada uno de los banners de AdSense
anteriormente creados.

Hay que considerar que esa validación inicial (!is_single()), que se asegura de solo
mostrar el contenido en páginas de artículo, para mi caso ya no era necesario (hago una
comprobación un tanto más compleja al principio de la página), pero la he dejado ya
que así el sistema no tiene que cargar la función entera cuando no es necesario.
Elegí que el primer código se muestre a los 5 párrafos y el segundo a los 18 más o
menos a ojo. La idea era que el primero apareciese poco después de la imagen principal,
y el segundo, si tiene que aparecer, apareciese cerca del final de artículos un poco más
largos. Como la mayoría de mis artículos, hoy en día, tienen más de 1100 palabras, lo
más habitual es que este segundo acabe por mostrarse cerca del final, donde llego a las
conclusiones del mismo.
En el caso de que el artículo sea más corto (como muchos del principio) este segundo
anuncio no se mostrará, así que no hay problema.
Tampoco me tenía que preocupar por si esto hacía que se mostrase en búsquedas
internas (todas mis piezas se muestran acotadas al primer o segundo párrafo), pero en
todo caso esta pieza de código evita que esto pase para todos aquellos que muestran el
contenido íntegro fuera de la página del artículo.
También decir que en este caso quería mostrar dos piezas de código en distintos
lugares. Si solo necesitamos meter una, o queremos meter varias más, lo único que hay
que hacer es variar el número de elementos $paragraphAfterX que tenemos,
poniéndoles el número de párrafos que queremos que esperen antes de mostrar el
siguiente, e incluir el número de condicionales dentro del FOR que sean
necesarios (para uno, solo uno; para dos, dos; para tres…).