La Barra de Recomendaciones de Facebook es uno de los mejores widget que le recomiendo a la mayoria de los bloggers,si te preocupa la cantidad de vistas a tu pagina,por que este widget fuerza al lector ha mantenerce mas tiempo en tu blog al presentarles mas opciones de lectura..
Este esta disenado en saltar una vez entras en la pagina y expandise mostrando mas articulos de interes despues que el lector haya dado lectura en cierto punto de la pagina.. Este widget contiene un boton de like y muestra solamente los articulos de tu blog que han sido compartidos en tu facebook anteriormente Facebook.
El primer paso es crear una aplicacion de Facebook para conseguir un identificacion o AppID que incluiras en la barra del codigo de recomendacion .
- Entra a la pagina Facebook developer page
- Si has creado una aplicacion en facebook anteriormente, entonces de click en +Create New App, una nueva ventana se abrira, pero si nunca has creado una aplicacion antes , notaras una ventana se abrira automaticamente.
- Ahora escriba Recommendation bar dentro de el campo del nombre de la aplicacion (App Name) y da click en el boton Continuar. .
- Entre el codigo de captcha y da click en Submit.
- Ahora da click en Website with Facebook Loginy entre la de tu sitio url inclutendo la barrita diagonal al final ( / ) y dejando las demas opciones y da click en Save Changes como se muestra abajo.
- Tu Identificacion de la aplicacion ( App ID) ahora esta lista. Copiala de la parte superior de la pagina como se muestra aqui abajo.
Ahora lo vamos a integrar a tu blogger que es lo que buscamos con todo esto.
- Entra en la interface de blogger
- Da Click en Plantilla > Edite HTML > Proceda
- Use las teclas ctrl F para encontrar <html y reemplacelo con el siguiente codigo
Este hara compatible este plugin con las versiones antiguas del internet explorer o lo puedes ignorar si deseas.
- Busca la etiqueta </body> y pega el siguiente codigo sobre/antes de </body>
<div id='fb-root'/>
<script>
//Facebook Recommendation bar tutorial por www.ciudadblogger.info
//<![CDATA[
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=Your-App-ID";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script>
- Reemplace Your-App-ID con el ID de Aplicacion de( Facebook App ID )que copiaste en el primer paso.
- Busca la etiqueta </head> y pega el codigo de abajo sobre/antes de </head>
<b:if cond='data:blog.pageType == "item"'>
<meta content='article' property='og:type'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
</b:if>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta content='website' property='og:type'/>
</b:if>
<meta expr:content='"en_US"' property='og:locale'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
Ahora por ultimo encuentra la etiqueta, <data:post.body/> y pega el siguiente codigo despues/debado de.
<b:if cond='data:blog.pageType == "item"'><b:if cond='data:blog.pageType != "static_page"'><div style='z-index:999999; position:absolute;'>
<fb:recommendations-bar action='like' max_age='0' num_recommendations='3' read_time='10' side='right' site='http://www.ciudadblogger.info' trigger='40%'/></div>
</b:if></b:if>
- num_recommendations: Este representa el numero de posts a ser mostrados, puedes ajustar este editando 3.
- side: el widget flotara a la derecha por defecto, para relocalizarloa la izquierda, simplemente cambie de right a left.( Izquierda a Derecha)
- trigger: el widget se expandira tan pronto como el lector descienda el 40% de tu blog.
- Reemplace http://www.ciudadblogger.info con la Url de tu blog.
- Ahora finalmente Guarde tu Plantilla.
0 comentarios:
Publicar un comentario