Mil Trucos Blogger

FanBox de Facebook flotante que baja con la página

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

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.

0
Shares

Relacionados...

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

35 Comentarios

  1. May May
    Marzo 5, 2012    

    Gran tuto amigo +1 😀

    • Marzo 5, 2012    

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

  2. Marzo 5, 2012    

    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.

    • Marzo 5, 2012    

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

      Saludos bro.

    • Marzo 8, 2012    

      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

    • Marzo 8, 2012    

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

      Un saludo.

    • Marzo 8, 2012    

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

    • Marzo 8, 2012    

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

      Un saludo 🙂

  3. Marzo 5, 2012    

    muy buena info
    saludos

    • Marzo 6, 2012    

      Paula gracias y espero que te sirva.

  4. Marzo 5, 2012    

    Excelente post compañero, muy bueno 🙂

    • Marzo 6, 2012    

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

    • Anonymous Anonymous
      Marzo 6, 2012    

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

    • Marzo 7, 2012    

      Anónimo esperemos que dure lo suficiente.

  5. Marzo 6, 2012    

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

    • Marzo 7, 2012    

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

  6. Marzo 11, 2012    

    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.

    • Marzo 12, 2012    

      Este comentario ha sido eliminado por el autor.

    • Marzo 12, 2012    

      Amigo. Eso fue exactamente lo que hice.

    • Marzo 12, 2012    

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

    • Abril 20, 2012    

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

  7. Marzo 16, 2012    

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

    • Marzo 16, 2012    

      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.

  8. Abril 2, 2012    

    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 😀

    • Abril 2, 2012    

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

      Saludos amigo

  9. Abril 20, 2012    

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

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

    • Abril 20, 2012    

      Cambiando el CSS se puede hacer.

  10. Mayo 23, 2012    

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

    • Mayo 24, 2012    

      De nada amigo,gracias por comentar 😀

  11. Anonymous Anonymous
    Julio 4, 2012    

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

    • Julio 5, 2012    

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

  12. Noviembre 18, 2012    

    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.. !¡

  13. Febrero 15, 2013    

    amigo para centrarlo? y que solo aparezca 1 vez?

  14. Septiembre 1, 2013    

    no sirve me sale en blanco el cuadritoo

  15. Marzo 1, 2014    

    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 *

Categorías

Síguenos en Facebook

Suscribete por Email

Introduce tu Correo:

Recibiras nuestros últimos posts en tu correo