Text only | Text with Images

Simple Machines Community Forum

SMF Support => Español (Spanish) => Language Specific Support => Tutoriales => Topic started by: jaren on May 08, 2013, 05:12:48 AM

Title: [Tutorial] Facebook Flotante "Boton Me Gusta" en tu foro
Post by: jaren on May 08, 2013, 05:12:48 AM
Boton me Gusta en tu foto SMF


Ola Amigos que ondas ;D

Aqui  un tutorial como poner un  boton me gusta flotante  :)

Demo : http://www.gamerznice.com.nu/index.php (http://www.gamerznice.com.nu/index.php)    - http://www.gamerznice.com.nu/face.php (http://www.gamerznice.com.nu/face.php)

PD: Lo sacare  por que a mi parecer es un poco molestoso pero para los demas se que es muy diverdido

Aqui una foto

(https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fi.imgur.com%2FnRrPDxR.jpg&hash=f961c9fc9fd276163c9a91fb66fdd5b08db76ef1)



Bueno comenzemos

Primero que nada....como siempre para los que recien  tocan sus archivos por favor hacer  un respaldo [Cualquier cambio que realizen a partir de este tutorial es bajo su responsabilidad]


Abrimos nuestro css   [Themas > Tu Temas > Css > Index.css ] y pegamos al final del todo


Code Select



.boton {
    border: 1px solid #999999;
    margin-top: 5px;
    padding: 3px 5px;
}
#fl0tante {
    background: none repeat scroll 0 0 #000000;
    display: block;
    float: left;
    height: 100%;
    opacity: 0.5;
    overflow: hidden;
    position: fixed;
    width: 100%;
    z-index: 9999;
}
#bamer {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 8px solid #FFFFFF;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 0 20px #000000;
    color: #3B5998;
    display: block;
    font: bold 13px tahoma;
    height: 130px;
    left: 25%;
    margin: 0 auto;
    position: fixed;
    right: 25%;
    text-align: center;
    top: 30%;
    width: 200px;
    z-index: 2147483647;
}
#bamer p {
    margin: 0;
    padding: 0;
}
#bamer img {
    border: 0 none;
    border-radius: 3px 3px 3px 3px;
    margin-bottom: 8px;
}
#cerrard1v {
    position: absolute;
    right: -25px;
    top: -25px;
}
#cerrard1v img {
    border: 0 none;
}








Abrimos nuestro   index templante  [Themes > Tu tema > Index.template.php] Buscamos </head> y  pegamos despues

Code Select
<SCRIPT type=text/javascript>
function cerrar(){ document.getElementById(\'fl0tante\').style.display = "none";document.getElementById(\'bamer\').style.display = "none";}
</SCRIPT>





Seguimos editando nuestro Index.Template.php Buscamos <body>  y en el  primer echo ' pegamos  el codigo siguiente

Ejemplo

(https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fi.imgur.com%2FSv4GsQx.png&hash=43113e4e73e049672355d42669022de9342eca82)

Code Select


<DIV id=bamer onclick=cerrar(); style="width: 204px; height: 160px">
<DIV id=cerrard1v><A title=cerrar href="javascript:cerrar();"><IMG
src="../Themes/default/images/10ojxh2.png"></A></DIV>Apoyanos Con Un Me Gusta !<BR>
<IMG style="MARGIN-TOP: 3px; WIDTH: 10px; HEIGHT: 12px"
src="../Themes/default/images/abajo.gif"><BR><IFRAME
style="MARGIN: -5px 0px 5px; OVERFLOW: hidden; WIDTH: 87px; BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; HEIGHT: 70px; BORDER-BOTTOM-STYLE: none"
src="http://www.gamerznice.com.nu/like.php"
frameBorder=0 scrolling=no allowTransparency></IFRAME>
<P>[url=http://www.GamerzNice.com.nu]www.GamerzNice.com.nu[/url]</P></DIV>
<DIV id=fl0tante onclick=cerrar();></DIV>
<DIV id=fb-root></DIV>




Ahora a cambiar el like  por el suyo

Mirar al Final

Se crean un archivo llamado like.php y pegan esto

Code Select
</style></head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<head>
<iframe src="//www.facebook.com/plugins/like.php?href=http://www.facebook.com/zonaelegante&amp;send=true&amp;layout=box_count&amp;width=450&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font=trebuchet ms&amp;height=90" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:90px;" allowTransparency="true"></iframe>


Cambiar

2Fwww.facebook.com/zonaelegante&amp;send

Por el suyo y lo guardamos en  Themes > default >    ! en mi caso lo  puse ahi si gustan pueden ponerlo en defaul o su thema pero  recuerden que tienen que hacer el llamado respectivo

Ejemplo

http://www.gamerznice.com.nu/Themes/default/like.php (http://www.gamerznice.com.nu/Themes/default/like.php)




Y con eso Tendriamos nuestro like flotante

Imagenes Utilizadas


http://i.imgur.com/BE3LQ96.png (http://i.imgur.com/BE3LQ96.png)   >>> Boton cerrar

http://i.imgur.com/BUbT5ty.gif (http://i.imgur.com/BUbT5ty.gif)   >>> Flechita Abajo

Subalo a .../Themes/default/images/>>>>




Proximo tutorial como tener su Fans Box al costado de su web ;)

(https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fi.imgur.com%2FGdnlTNi.png&hash=934b89edcec3cfdb97b28f0ab03df6306aa628ea)


Espero haver sido preciso y claro  >> Site gusto regalame  un punto si no te gusto dime por que ;)


Creditos Totales

Demon [GamerzNice]
Title: Re: [Tutorial] Facebook Flotante "Boton Me Gusta" en tu foro
Post by: Dhayzon on May 08, 2013, 10:58:33 AM
genial tu aporte  ;)
Title: Re: [Tutorial] Facebook Flotante "Boton Me Gusta" en tu foro
Post by: jaren on May 08, 2013, 08:05:47 PM
exacto....en developers puedes creear  infinidades de cosas  pero a lo que e refiero   y trato de explicar en este tuto es como integrarlo a ese scrip,  para que que flote el  boton me gusta en su foro,  ya que si lo pones directo jamas lo ara en cuanto a <head> <boby>  hay dos parte el scrip  para cerrar  el pequeño anuncio  y en el body para que alga el anuncio flotando  y en css  para darle el  stilo  al  pequeño anuncio Gracias  Saludos !!
Text only | Text with Images