Ya he publicado otras entradas donde muestro varias opciones para agregar el fanbox de facebook pero el de hoy tiene varias opciones que pueden resultar interesante y es que es flotante y que baja con la pagina con efecto deslizante ademas de tener un boton de cerrar.


Puedes ver el truco en accion en el siguiente blog de pruebas.

Para agregar este truco ve a Edición de HTML y pega antes de </head> lo siguiente:

 <style type='text/css'>
#anuncio {
position:absolute;
padding: 2px;
padding-top: 15px;
width: 280px; /* ancho del anuncio */
visibility: hidden;
z-index: 200;
top: 30px;
left: 30px;
}
#rss-mail {
/* color e imagen de fondo */
background: #F1F8E0 url(http://lh5.googleusercontent.com/-TrTaWL7moiE/TtK640CncWI/AAAAAAAAGe4/bBgX4hEPjQQ/s000/z-bg.png);
border:2px solid #FF8000; /* borde */
height:275px; /* alto de la caja */
}
#rss-mail span {
color:#FFFFFF; /* color del texto */
font-size:12px;
font-weight:bold;
line-height:30px;
}
#rss-submit {
background:#FF8000; /* color del botón */
border:0px;
}
.rss-box {
height:13px;
margin-top:10px;
color:#6E6E6E;
font-size:12px;
width:135px;
}
</style>

<script type='text/javascript'>
//<![CDATA[
var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
var startX = 30 //set x offset of bar in pixels
var startY = 15 //set y offset of bar in pixels
var verticalpos="fromtop" //enter "fromtop" or "frombottom"

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("anuncio").style.visibility="hidden"
}

function staticbar(){
barheight=document.getElementById("anuncio").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function(){
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("anuncio");
stayTopLeft();
}
if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
//]]>
</script>

Ahora antes de  </body> pega lo siguiente:

 <div id='anuncio'>
<div id='rss-mail'>
<a href='Javascript:void' onClick='closebar(); return false'><img align='right' border='0' src='http://2.bp.blogspot.com/_dsEG33PDaHw/S89KvNhAxNI/AAAAAAAAAQM/YY86PjAxYG0/s320/cerrar.png'/></a>
<script src='http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/es_LA' type='text/javascript'/><script type='text/javascript'>FB.init(&quot;1b8f0f706c312c05f42224b5b3399f80&quot;);</script><fb:fan connections='8' profile_id='XXXXXXXXX' stream='' width='275'/>
</div></div>

Donde estas las XXXXXXXXX pones la ID de tu pagina en Facebook.


¿Como averiguo la id de mi página en Facebook?

[1] Accedemos a nuestra página de Facebook.

[2] Nos fijamos entonces en url que se muestra en el navegador, y que será algo como esto:

http://www.facebook.com/home.php?#!/pages/edit/?id=174666062584624

Esos números que se muestran al final de la url, son la id de nuestra página, y son los números que hemos de colocar en el código del gadget «Like Box» sustituyendo a las XXXXXXXXXXXX.

Por ultimo guardas los cambios.


35 commentarios

May · marzo 5, 2012 a las 8:24 pm

Gran tuto amigo +1 😀

    Juvinao · marzo 5, 2012 a las 8:32 pm

    May gracias por comentar,hace ya un tiempo que no te veia por mi site,Saludos :headbang:

Víctor Calderón · marzo 5, 2012 a las 8:47 pm

Excelente man, te quería pedir un favorcillo (Es sobre un script que estoy haciendo), me gustaría que lo probaras para ver que tal funciona ya que únicamente lo he probado en mi blog waaaa.

Un saludo man.

    Juvinao · marzo 5, 2012 a las 9:05 pm

    Víctor Calderón claro amigo pasamelo,si quieres enviamelo al correo miltrucosblogger@msn.com

    Saludos bro.

    Víctor Calderón · marzo 8, 2012 a las 5:51 pm

    Brother ignorando el tema del script (Está con problemas, aún no está listo).

    Te comento que si te gustaría ser moderador en un foro que estoy creando:

    Foro Ayuda Bloggers

    Víctor Calderón · marzo 8, 2012 a las 5:52 pm

    Por cierto, sorprendido por la velocidad de carga de tu template 🙂

    Un saludo.

    Juvinao · marzo 8, 2012 a las 7:15 pm

    Víctor Calderón es una plantilla bastante rapida amigo y bueno con el foro ya me registre amigo.

    Víctor Calderón · marzo 8, 2012 a las 7:43 pm

    Oka man, pero primero para poder mostrar el foro necesito configurar los permisos para los usuarios (Están sin configurar aún).

    Un saludo 🙂

Paula · marzo 5, 2012 a las 10:51 pm

muy buena info
saludos

Dryken · marzo 5, 2012 a las 11:05 pm

Excelente post compañero, muy bueno 🙂

    Juvinao · marzo 6, 2012 a las 3:00 pm

    Dryken es un buen tuto amigo,gracias por comentar. 😎

    Anonymous · marzo 6, 2012 a las 8:20 pm

    esto no durara mucho, pronto se actualizaran los scripts de facebook y las cajas cambiaran un tanto, al igual blogger
    #filtroanonimo

    Juvinao · marzo 7, 2012 a las 2:38 pm

    Anónimo esperemos que dure lo suficiente.

Jorge Luis · marzo 6, 2012 a las 10:59 pm

Oye Juvinao,ese espacio del gaget de facebook se le puede suplantar por publicidad cierto?

    Juvinao · marzo 7, 2012 a las 2:44 pm

    Jorge Luis claro amigo alli puedes poner casi cualquier cosa incluyendo publicidad. :LOL:

Wilmer Antonio Lopez Urrea · marzo 11, 2012 a las 5:41 pm

Eres muy amable por tu aporte Juvinao.

Aprovechando el comentario de Jorge Luis debop decir: En otro post similar te había dado mi inquietud sobre la posibilidad de agregar publicidad a este cuadro en vez del fanbox. No he podido hacerlo.

He utilizado Adsense y ahora Smotion. Pero ninguno funciona. Me lanza el siguiente mensaje:

No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
Mensaje de error de XML: The reference to entity «z» must end with the ‘;’ delimiter.
Error 500

Todo lo que hago es eliminar el fanbox de facebook y poner la publicidad en su lugar. Nada más he modificado. ¿Podrías probar la manera de ingresar publicidad? Si no es molestia.

Gracias.

    Juvinao · marzo 12, 2012 a las 3:03 pm

    Este comentario ha sido eliminado por el autor.

    Wilmer Antonio Lopez Urrea · marzo 12, 2012 a las 4:10 pm

    Amigo. Eso fue exactamente lo que hice.

    Juvinao · marzo 12, 2012 a las 7:11 pm

    Wilmer Antonio Lopez Urrea entonces espera mientras yo hago unas pruebas con el codigo de Adsence.

    Juvinao · abril 20, 2012 a las 3:36 pm

    Wilmer hice las pruebas y me fije que este script n oes compatible con adsence 🙁

Cityville Ayuda · marzo 16, 2012 a las 1:34 am

PERO EN MI APG NO SALE ESO YA SALE ESTO
https://www.facebook.com/TRUCOSNOTICIASCV

    Juvinao · marzo 16, 2012 a las 2:37 pm

    Cityville Ayuda lo que pasa es que tu tienes activada la biografia y con este nuevo perfil se cambia la URL de la pagina de fans.

NxoVoix · abril 2, 2012 a las 6:37 pm

Hola Juvian gran aporte.. pero bueno talvez ayude en algo.. saber como conseguir el id de una pagina con URL personalizada bueno aqui les dejo uno rapido..

Ingresan aqui:
https://graph.facebook.com/AQUI-TU-URL-PERSONALIZADA
Ejemplo:
https://graph.facebook.com/FLandiaFans

Aparecera una pagina con varios datos aqui una imagen:
http://screenshotuploader.com/s/01/n6EJqs2Sm

y bueno por ultimo veran su ID en la parte que dice:
«id»: «AQUI-TU-ID»,

Espero les sirva de algo Saludos 😀

    Juvinao · abril 2, 2012 a las 8:29 pm

    NxoVoix gracias amigo no sabia esta solucion,cada dia se aprende algo nuevo.

    Saludos amigo

VídeosParaReirYGozar · abril 20, 2012 a las 2:26 am

Gracias, amigo; pero lo podemos situar en la parte derecha??
Como lo haria…

Gracias,
http://www.imagenescuriosas.com.ar

Gilbert Diaz · mayo 23, 2012 a las 5:22 pm

GRACIAS DE PARTE DE > http://www.primiciasmusic.com/

    Juvinao · mayo 24, 2012 a las 2:36 am

    De nada amigo,gracias por comentar 😀

Anonymous · julio 4, 2012 a las 12:35 pm

como lo haría para ponerlo a la derecha del navegador?

    Juvinao · julio 5, 2012 a las 7:29 pm

    Intente editar rapidamente el script y no me ha salido un buen resultado cuando logre algo concreto te aviso.

flow mazter · noviembre 18, 2012 a las 3:14 am

el fans pague me sale muy largo con una espacio en blanco en el medio como le quitaria ese espacio emblanco ? osea ese espacio es como para cuando uno publique algo en el fans pague… como quito eso ayudaa.. !¡

AngelG CE · febrero 15, 2013 a las 3:19 am

amigo para centrarlo? y que solo aparezca 1 vez?

Julia spenser · septiembre 1, 2013 a las 10:03 pm

no sirve me sale en blanco el cuadritoo

DjElianFlow · marzo 1, 2014 a las 2:55 am

no me sirve porque hice todo puse mi id de la pagina y todo porque no sirvio?

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *