Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
Botones Compartir en Redes Sociales Mybb
#1


Hola Skylium a petición de un usuario me tome el tiempo para adaptar unos botones de redes sociales para Mybb sin mas que decir manos a la obra:


Primero vamos a nuestro 

Panel de Administracion > Estilos y Plantillas > Plantillas > Seleccionas Tu Tema > Buscas las plantilla Mostrar Tema > Dentro de la plantilla buscas el primero que aparece de:

Código PHP:
    {$ratethread

Debajo agregamos:

Código PHP:
<div id="buttonssocials">
 
 <div class="facebook buttonsocials">
 
   <class="icon">
 
     <class="icon-facebook">
 
   </i>
 
 </i>
 
 <div class="slide">
 
   <p>
 
     facebook
    
</p>
 
 </div>
 
 <div id="fb-root"></div>
<
script>(function(dsid) {
 
 var jsfjs d.getElementsByTagName(s)[0];
 
 if (d.getElementById(id)) return;
 
 js d.createElement(s); js.id id;
 
 js.src "//connect.facebook.net/es_LA/sdk.js#xfbml=1&version=v2.4";
 
 fjs.parentNode.insertBefore(jsfjs);
}(
document'script''facebook-jssdk'));</script>

<
div class="fb-share-button" data-href="{$mybb->settings['bburl']}/showthread.php?tid={$tid}data-layout="button_count"></div>
 
 
  
</div>
 
 
  
<div class="twitter buttonsocials">
 
   <class="icon">
 
     <class="icon-twitter">
 
   </i>
 
 </i>
 
 <div class="slide">
 
   <p>
 
     twitter
    
</p>
 
 </div>
<
a href="https://twitter.com/share" class="twitter-share-button" data-dnt="true">Tweet</a>
<
script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document'script''twitter-wjs');</script>
 
 </div>
 
 
  
<div class="google buttonsocials">
 
   <class="icon">
 
     <class="icon-google-plus">
 
   </i>
 
 </i>
 
 <div class="slide">
 
   <p>
 
     google+
 
   </p>
 
 </div>
 
 <!-- Place this tag where you want the +1 button to render. -->
<
script type="text/javascript" src="https://apis.google.com/js/plusone.js">
 
 {lang'es'}
</
script>
<
g:plusone size="medium" href="{$mybb->settings['bburl']}/showthread.php?tid={$tid}data-width="120"></g:plusone>
 
 </div>
 
 
  
  
<div class="linkedin buttonsocials">
 
   <class="icon">
 
     <class="icon-linkedin">
 
   </i>
 
 </i>
 
 <div class="slide">
 
   <p>
 
     linkedin
    
</p>
 
 </div>
<
script src="//platform.linkedin.com/in.js" type="text/javascript"langes_ES</script>
<
script type="IN/Share" data-url="{$mybb->settings['bburl']}/showthread.php?tid={$tid}data-counter="right"></script>
 
 </div>
</
div

Ya que tenemos nuestro codigo Primario de los botones de redes sociales agregamos  en nuetro Global.css o creamos una nueva plantilla:

Como encontrar nuestro global.css

Panel de Administracion > Estilos y Plantillas > Estilos > Seleccionas Tu Tema > Buscas en Tu Tema > global.css > Editar Hoja de Estilo: Modo Avanzado.

Y vamos hasta el final de todo el codigo y agregamos el siguiente CSS 3

Código PHP:
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400);

@import "//netdna.bootstrapcdn.com/font-awesome/3.0/css/font-awesome.css";

#buttonssocials {
 
   padding14px 7px;
 
   widthauto;
 
   overflowhidden;
}


.
buttonsocials {
 
   background#DCE0E0;
 
   positionrelative;
 
   displayblock;
 
   floatleft;
 
   height40px;
 
   margin0 7px;
 
   overflowhidden;
 
   width150px;
 
   border-radius3px;
 
   -o-border-radius3px;
 
   -ms-border-radius3px;
 
   -moz-border-radius3px;
 
   -webkit-border-radius3px;
}

.
icon {
 
   displayblock;
 
   floatleft;
 
   positionrelative;
 
   z-index3;
 
   height100%;
 
   vertical-aligntop;
 
   width38px;
 
   -moz-border-radius-topleft3px;
 
   -moz-border-radius-topright0px;
 
   -moz-border-radius-bottomright0px;
 
   -moz-border-radius-bottomleft3px;
 
   -webkit-border-radius3px 0px 0px 3px;
 
   border-radius3px 0px 0px 3px;
 
   text-aligncenter;
}

.
icon i {
 
   color#fff;
 
   line-height42px;
}

.
slide {
 
   z-index2;
 
   displayblock;
 
   margin0;
 
   height100%;
 
   left38px;
 
   positionabsolute;
 
   width112px;
 
   -moz-border-radius-topleft0px;
 
   -moz-border-radius-topright3px;
 
   -moz-border-radius-bottomright3px;
 
   -moz-border-radius-bottomleft0px;
 
   -webkit-border-radius0px 3px 3px 0px;
 
   border-radius0px 3px 3px 0px;
}

.
slide p {
 
   font-familyOpen Sans;
 
   font-weight400;
 
   border-left1px solid #fff;
 
   border-left1px solid rgba(255,255,255,0.35);
 
   color#fff;
 
   font-size16px;
 
   left0;
 
   margin0;
 
   positionabsolute;
 
   text-aligncenter;
 
   top10px;
 
   width100%;
}

.
button .slide {
 
   -webkit-transitionall 0.2s ease-in-out;
 
   -moz-transitionall 0.2s ease-in-out;
 
   -ms-transitionall 0.2s ease-in-out;
 
   -o-transitionall 0.2s ease-in-out;
 
   transitionall 0.2s ease-in-out;
}

.
facebook iframe {
 
   displayblock;
 
   positionabsolute;
 
   right16px;
 
   top10px;
 
   z-index1;
}

.
twitter iframe {
 
   width90px !important;
 
   right5px;
 
   top10px;
 
   z-index1;
 
   displayblock;
 
   positionabsolute;
}

.
google #___plusone_0 {
 
   width70px !important;
 
   top10px;
 
   right15px;
 
   positionabsolute;
 
   displayblock;
 
   z-index1;
}

.
linkedin .IN-widget {
 
   top10px;
 
   right22px;
 
   positionabsolute;
 
   displayblock;
 
   z-index1;
}

.
facebook:hover .slide {
 
   left150px;
}

.
twitter:hover .slide {
 
   top: -40px;
}

.
google:hover .slide {
 
   bottom: -40px;
}

.
linkedin:hover .slide {
 
   left: -150px;
}

.
facebook .icon, .facebook .slide {
 
   background#305c99;
}

.
twitter .icon, .twitter .slide {
 
   background#00cdff;
}

.
google .icon, .google .slide {
 
   background#d24228;
}

.
linkedin .icon, .linkedin .slide {
 
   background#007bb6;



Y nos debe quedar algo así:





Créditos:
Dark_Soul: Adaptación e integración de códigos en redes sociales para mybb.
Marius Balaj: Codificación desde 0.
WWW
#2
Hola no me queda igual ! no salen los iconos en el botón 

[Imagen: 766cab58637e0f9157754727ebbfdee0.png]

Si me pudieras decir que me falto te lo agradeceria Gran sonrisa
#3
Olvidaste agregar el font y css personalizado sin embargo revisa borrando el caché.

Si gustas deja captura de pantalla o como implementaste el código.
WWW
#4
Muy buen aporte lo utilizare en mis proyectos, saludos.
#5
Gran aporte, vamos a probar  ¡Me gusta!


Posibles temas similares...
Tema Autor Respuestas Vistas Último mensaje
Pregunta RECOMENDACIONES DE COMO INSTALAR CHAT EN MYBB? AbnerTorres 1 101 04-07-2018, 02:42 AM
Último mensaje: Dark_Soul
Estrella Prestación de Servicios Mybb, Plataformas web, entre otros. Dark_Soul 0 121 05-03-2018, 02:53 AM
Último mensaje: Dark_Soul
  A quien interese, creación de theme y web mybb GRATIS Dark_Soul 0 299 19-04-2017, 11:03 PM
Último mensaje: Dark_Soul
  TUTORIAL videos responsive en MYBB zeuz 8 786 24-02-2017, 01:44 PM
Último mensaje: zeuz
  [PACK] Ficons para MyBB Ronaldo_Ruiz 4 597 24-02-2017, 12:43 PM
Último mensaje: zeuz
Pregunta Consulta sobre MyBB Axeleaker 5 583 21-02-2017, 04:40 PM
Último mensaje: brettavz
  Cómo añadir favicon MyBB elcarnes 3 965 05-06-2016, 02:48 PM
Último mensaje: romeho
  ¿Como cambiar header en MyBB? elcarnes 4 888 02-04-2016, 06:35 PM
Último mensaje: DaveNPlay
  Falla foro Mybb danieltumino 4 618 28-03-2016, 01:13 AM
Último mensaje: Dark_Soul
  [MyBB] Jvh_22 1 531 25-03-2016, 06:21 AM
Último mensaje: garcon



Usuarios navegando en este tema: 1 invitado(s)