[Tutorial] Slide like box de facebook jQuery
Lo que van a lograr con este tutorial es que al pasar el mouse sobre la imagen se va desplazar nuestra página de facebook. Lo primero que vamos hace...

Lo que van a lograr con este tutorial es que al pasar el mouse sobre la imagen se va desplazar nuestra página de facebook.

Lo primero que vamos hacer es pegar el jquery en la plantilla headerinclude, que se encuentra en ACP - Estilos y plantillas - Plantillas - tu theme - Plantillas sin grupo..

Código PHP:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<
script type="text/javascript">
jQuery.noConflict();
jQuery(function (){
jQuery(".s_likebox").hover(function(){
jQuery(".s_likebox").stop(truefalse).animate({right:"0"},"medium");
},function(){
jQuery(".s_likebox").stop(truefalse).animate({right:"-250"},"medium");
},
500);
return 
false;
});
</
script

Ahora debajo del código que pegaron anteriormente agregan el HTML junto con el código que generaron de su página de facebook..

Código PHP:
<div class="s_likebox"><div style="color: rgb(255, 255, 255); padding: 8px 5px 0pt 50px;"><span><div class='likeboxwrap'Aqui pon el código de tu likebox de facebook</div></span></div></div

Despues agregan el código css en su global.css, para los que no saben se encuentra en ACP - Estilos y plantillas - Estilo - Tu theme y editan global.css en modo avanzado..

Código PHP:
.s_likebox {
float:right;
width:288px;
height:345px;
backgroundurl(images/fb_bg.pngno-repeat !important;
display:block;
right:-250px;
padding:0;
position:fixed;
top130px;
z-index:1002;
border-radius:10px;
-
moz-border-radius:10px;
-
webkit-border-radius:10px;
}
div.likeboxwrap {
margin-top:2px;
margin-left:-5px;
background#fff;
width:238px;
height:325px;
overflow:hidden;
border-radius:10px;
-
moz-border-radius:10px;
-
webkit-border-radius:10px;
}
div.likeboxwrap iframe {margin:-1px

Por último suben el adjunto dentro de la carpeta images por FTP
Una demo: Foro prueba

PD: Los códigos son sacados de la búsqueda en google.
Smile +rep muy buen tutorial
:)
Nada mal, gracias por el datazo.
joooo, no se que pasa , pero me sale muy mal Big Grin

[Imagen: 838Captura.png]

por se acaso os dejo mi codigo

[spoiler]
Código:
<link rel="alternate" type="application/rss+xml" title="{$lang->latest_threads} (RSS 2.0)" href="{$mybb->settings['bburl']}/syndication.php" />
<link rel="alternate" type="application/atom+xml" title="{$lang->latest_threads} (Atom 1.0)" href="{$mybb->settings['bburl']}/syndication.php?type=atom1.0" />
<meta http-equiv="Content-Type" content="text/html; charset={$charset}" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/prototype.js?ver=1603"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/general.js?ver=1603"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/popup_menu.js?ver=1600"></script>
{$stylesheets}{$avvisospiti}
<script type="text/javascript">
<!--
    var cookieDomain = "{$mybb->settings['cookiedomain']}";
    var cookiePath = "{$mybb->settings['cookiepath']}";
    var cookiePrefix = "{$mybb->settings['cookieprefix']}";
    var deleteevent_confirm = "{$lang->deleteevent_confirm}";
    var removeattach_confirm = "{$lang->removeattach_confirm}";
    var loading_text = '{$lang->ajax_loading}';
    var saving_changes = '{$lang->saving_changes}';
    var use_xmlhttprequest = "{$mybb->settings['use_xmlhttprequest']}";
    var my_post_key = "{$mybb->post_code}";
    var imagepath = "{$theme['imgdir']}";
// -->

</script>
{$newpmmsg}
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery.noConflict();
</script>



<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(function (){
jQuery(".s_likebox").hover(function(){
jQuery(".s_likebox").stop(true, false).animate({right:"0"},"medium");
},function(){
jQuery(".s_likebox").stop(true, false).animate({right:"-250"},"medium");
},500);
return false;
});
</script>
<div class="s_likebox"><div style="color: rgb(255, 255, 255); padding: 8px 5px 0pt 50px;"><span><div class='likeboxwrap'><iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FSKIDROWES%2F233813636704095&amp;width=191&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false&amp;appId=326580354064346" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:191px; height:258px;" allowTransparency="true"></iframe></div></span></div></div>
[/spoiler]
Agregastes el codigo css en global.css? subiste la imagen?
Asegurate que pegaste el codigo css y subiste la imagen donde corresponde, despues cambia tu codigo por este

Código PHP:
<link rel="alternate" type="application/rss+xml" title="{$lang->latest_threads} (RSS 2.0)" href="{$mybb->settings['bburl']}/syndication.php" />
<
link rel="alternate" type="application/atom+xml" title="{$lang->latest_threads} (Atom 1.0)" href="{$mybb->settings['bburl']}/syndication.php?type=atom1.0" />
<
meta http-equiv="Content-Type" content="text/html; charset={$charset}/>
<
meta http-equiv="Content-Script-Type" content="text/javascript" />
<
script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/prototype.js?ver=1603"></script>
<
script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/general.js?ver=1603"></script>
<
script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/popup_menu.js?ver=1600"></script>
{
$stylesheets}{$avvisospiti}
<
script type="text/javascript">
<!--
    var 
cookieDomain "{$mybb->settings['cookiedomain']}";
    var 
cookiePath "{$mybb->settings['cookiepath']}";
    var 
cookiePrefix "{$mybb->settings['cookieprefix']}";
    var 
deleteevent_confirm "{$lang->deleteevent_confirm}";
    var 
removeattach_confirm "{$lang->removeattach_confirm}";
    var 
loading_text '{$lang->ajax_loading}';
    var 
saving_changes '{$lang->saving_changes}';
    var 
use_xmlhttprequest "{$mybb->settings['use_xmlhttprequest']}";
    var 
my_post_key "{$mybb->post_code}";
    var 
imagepath "{$theme['imgdir']}";
// -->

</script>
{
$newpmmsg}

<
script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<
script type="text/javascript">
jQuery.noConflict();
jQuery(function (){
jQuery(".s_likebox").hover(function(){
jQuery(".s_likebox").stop(truefalse).animate({right:"0"},"medium");
},function(){
jQuery(".s_likebox").stop(truefalse).animate({right:"-250"},"medium");
},
500);
return 
false;
});
</
script>
<
div class="s_likebox"><div style="color: rgb(255, 255, 255); padding: 8px 5px 0pt 50px;"><span><div class='likeboxwrap'><iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FSKIDROWES%2F23381363670​4095&amp;width=230&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false&amp;appId=326580354064346" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:230px; height:258px;" allowTransparency="true"></iframe></div></span></div></div
Tengo un problema, la imagen aparece donde tiene que aparecer. pege le codigo donde pusistes que aya que pegarlo. pero al hacercarle el click sale todo bien la imagen de costado pero se ve blanco no se ve el like box.

www.Force-Gamers.net fijate que lo tengo puesto.
ago todo paso a paso y sigue apareciendo ariva Big Grin , puede ser que no es compatible con mi tema , bueno Smile
Tengo un problema, la imagen aparece donde tiene que aparecer. pege le codigo donde pusistes que aya que pegarlo. pero al hacercarle el click sale todo bien la imagen de costado pero se ve blanco no se ve el like box.

http://www.Force-Gamers.net fijate que lo tengo puesto.