Deprecated: str_replace(): Passing null to parameter #3 ($subject) of type array|string is deprecated in /var/www/mybb-es.com/html/inc/class_language.php on line 201
[Tutorial] Slide like box de facebook jQuery
MyBB-Es.com     Personalización y configuración de los foros MyBB     Tutoriales / Guías    

[Tutorial] Slide like box de facebook jQuery

Páginas (2): 1 2   
Leandro M.   26 Apr, 2012, 9:07 pm
#1
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:
<?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(true, false).animate({right:"0"},"medium");

},function(){

jQuery(".s_likebox").stop(true, false).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:
<?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:
<?php 

.s_likebox {

float:right;

width:288px;

height:345px;

background: url(images/fb_bg.png) no-repeat !important;

display:block;

right:-250px;

padding:0;

position:fixed;

top: 130px;

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.
  
 Responder
Cluster   26 Apr, 2012, 9:16 pm
#2
Smile +rep muy buen tutorial
:)
  
 Responder
Xpress   27 Apr, 2012, 6:18 am
#3
Nada mal, gracias por el datazo.
  
 Responder
Gustavo R.   27 Apr, 2012, 6:39 am
#4
Muy buen efecto. Rep+
[Imagen: http://i.imgur.com/l7Qimoa.png]
  
 Responder
SKIDROW   28 Apr, 2012, 10:58 am
#5
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]
  
 Responder
Leandro M.   28 Apr, 2012, 9:25 pm
#6
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:
<?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(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%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>
  
 Responder
kn9w   28 Apr, 2012, 11:28 pm
#7
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.
  
 Responder
SKIDROW   29 Apr, 2012, 4:52 am
#8
ago todo paso a paso y sigue apareciendo ariva Big Grin , puede ser que no es compatible con mi tema , bueno Smile
  
 Responder
Jaizu   29 Apr, 2012, 5:35 am
#9
@skidrow prueba a poner esto en el header include:
<style>
aquí el css
</style>

Y no subiste la imagen bien o no se guardó el css
Saludos!
[Imagen: http://i.imgur.com/kLUbBrj.png]
  
 Responder
kn9w   29 Apr, 2012, 12:26 pm
#10
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.
  
 Responder
Páginas (2): 1 2   
Tema anterior      Tema siguiente
  
 Contáctanos
 Equipo del foro
 MyBB-Es.com - Soporte para los Foros MyBB en Español
 Volver arriba
 Marcar foros como leídos
 Sindicación RSS
 Ayuda
Powered By MyBB, © 2002-2024 MyBB Group.
Made with by Curves UI.