Cómo añadir botones de redes sociales en la página

  • Autor Autor chego
  • Fecha de inicio Fecha de inicio
C

chego

Buenas
Quiero poner en mi página un recuadro parecido a este, que al pinchar en cada una de las redes sociales te lleve a la página correspondiente de Facebook, Twitter, telegram, etc....
Ver el archivo adjunto 93713
A ver si podéis echarme una mano.
Muchas gracias
 
SumoMe podría ser, hay muchos plugins para redes sociales, puedes buscar en google
 
He mirado qué plugins utiliza, me sale este: sassy-social-share prueba a ver
 
leroku dijo:
He mirado qué plugins utiliza, me sale este: sassy-social-share prueba a ver
Hacer clic para expandir...

Ese plugin es solo para compartir, es el que sale en los posts. El que comenta el OP es el de seguir en las redes sociales.

Saludos

- - - Actualizado - - -

chego dijo:
He mirado pero el sumome que comentas no es....
La diré donde lo he visto es aquí Reyes del Chollo - Blog de chollos, descuentos y cosas gratis.
Me gustaría uno así ya que en la página tengo también canal de telegram y así podría incluirlo
Muchas gracias
Hacer clic para expandir...
[MENTION=33995]chego[/MENTION] te confirmo ese widget no es plugin, solo es CSS y HTML. Si quieres el codigo te lo paso.

Saludos
 
livam84 dijo:
Ese plugin es solo para compartir, es el que sale en los posts. El que comenta el OP es el de seguir en las redes sociales.

Saludos

- - - Actualizado - - -


[MENTION=33995]chego[/MENTION] te confirmo ese widget no es plugin, solo es CSS y HTML. Si quieres el codigo te lo paso.

Saludos
Hacer clic para expandir...

Te estaría muy agradecido si me lo pasarás.
Y si no es mucho pedir....Indicarme un poco como ponerlo en mi página, porque de CSS y todo eso no tengo mucha por no decir nada de idea
Muchas gracias
 
Lo paso en el transcurso del día, ya me puse hacer otras cosas. Si ves que no lo posteo en unas 7 hrs mandama citar para que me lo recuerdes.

Saludos
 
Boreman10 dijo:
sasy-social-share algo asi.
prueba bro
Hacer clic para expandir...

Amigo, lee todo el post antes de comentar algo, ya dije que ese plugin es el de compartir y no el de seguir. Pareciera que solo estás haciendo spam

- - - Actualizado - - -
[MENTION=33995]chego[/MENTION] aqui lo tienes. Solo modifica a tu gusto. Si necesitas ayuda en implementarlo en tu web, yo lo puedo hacer por unos 2usd netos a mi paypal.

Saludos

CODIGO HTML:

HTML: 
<!--Sliding Social Buttons Widget -->
<div class="tbislso">
<ul>
<li><a class="tbisbox facebook" href="#"><p>15K+</p>Facebook </a></li>
<li><a class="tbisbox twitter" href="#"><p>10K+</p>Twitter</a></li>
<li><a class="tbisbox gplus" href="#"><p>5K+&nbsp;</p>Google+</a></li>
<li><a class="tbisbox pinterest" href="#"><p>4K+&nbsp;</p>Pinterest</a></li>
<li><a class="tbisbox rss" href="#"><p>10K+</p>RSS</a></li>
</ul>
</div>
<!--Sliding Social Buttons Widget --></br>

CODIGO CSS:

HTML: 
/* Sliding Social Buttons Widget  */

.tbisbox {
    font: 25px/24px normal 'Denk One', sans-serif;
    display: inline-block;
    position: relative;
    width: 95%;
    max-width: 280px;
    margin: 0 auto 15px auto;
    padding: 16px;
    background-color: rgba(238, 238, 238, 0.1);
    box-shadow: 8px 8px 0 0px rgba(0, 0, 0, 0.1);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.tbislso {
    width: 95%;
    max-width: 280px;
    padding-top: 8px;
    padding-left: 8px;
    padding-right: 8px;
}
.tbislso a {
    text-decoration: none !important;
}
.tbislso ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.tbislso ul li {
    display: inline;
    margin: 0;
    padding: 0;
    text-indent: 0
}
.tbislso ul li a.facebook {
    border-left: 65px solid rgba(59, 89, 152, 1);
    color: rgba(59, 89, 152, 1);
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}
.tbislso ul li a.facebook p {
    margin: 2px 20px 0 -70px;
    display: inline-block;
    color: #fff;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}
.tbislso ul li a.facebook:hover {
    background: rgba(59, 89, 152, 1);
    border-left: 0px solid rgba(59, 89, 152, 0.1);
    color: #fff;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}
.tbislso ul li a.facebook:hover p {
    opacity: 0;
    -webkit-transition: all 1ms ease-in-out;
    -moz-transition: all 1ms ease-in-out;
    -ms-transition: all 1ms ease-in-out;
    -o-transition: all 1ms ease-in-out;
    transition: all 1ms ease-in-out;
}
.tbislso ul li a.twitter {
    border-left: 65px solid rgba(64, 153, 255, 1);
    color: rgba(64, 153, 255, 1);
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}
.tbislso ul li a.twitter p {
    margin: 2px 20px 0 -70px;
    display: inline-block;
    color: #fff;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}
.tbislso ul li a.twitter:hover {
    background: rgba(64, 153, 255, 1);
    border-left: 0px solid rgba(64, 153, 255, 1);
    color: #fff;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}
.tbislso ul li a.twitter:hover p {
    opacity: 0;
    -webkit-transition: all 1ms ease-in-out;
    -moz-transition: all 1ms ease-in-out;
    -ms-transition: all 1ms ease-in-out;
    -o-transition: all 1ms ease-in-out;
    transition: all 1ms ease-in-out;
}
.tbislso ul li a.gplus {
    border-left: 65px solid rgba(219, 74, 57, 1);
    color: rgba(219, 74, 57, 1);
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}
.tbislso ul li a.gplus p {
    margin: 2px 20px 0 -70px;
    display: inline-block;
    color: #fff;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}
.tbislso ul li a.gplus:hover {
    background: rgba(219, 74, 57, 1);
    border-left: 0px solid rgba(219, 74, 57, 1);
    color: #fff;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}
.tbislso ul li a.gplus:hover p {
    opacity: 0;
    -webkit-transition: all 1ms ease-in-out;
    -moz-transition: all 1ms ease-in-out;
    -ms-transition: all 1ms ease-in-out;
    -o-transition: all 1ms ease-in-out;
    transition: all 1ms ease-in-out;
}
.tbislso ul li a.pinterest {
    border-left: 65px solid rgba(174, 45, 39, 1);
    color: rgba(174, 45, 39, 1);
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}
.tbislso ul li a.pinterest p {
    margin: 2px 20px 0 -70px;
    display: inline-block;
    color: #fff;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}
.tbislso ul li a.pinterest:hover {
    background: rgba(174, 45, 39, 1);
    border-left: 0px solid rgba(174, 45, 39, 1);
    color: #fff;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}
.tbislso ul li a.pinterest:hover p {
    opacity: 0;
    -webkit-transition: all 1ms ease-in-out;
    -moz-transition: all 1ms ease-in-out;
    -ms-transition: all 1ms ease-in-out;
    -o-transition: all 1ms ease-in-out;
    transition: all 1ms ease-in-out;
}
.tbislso ul li a.rss {
    border-left: 65px solid rgba(255, 102, 0, 1);
    color: rgba(255, 102, 0, 1);
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}
.tbislso ul li a.rss p {
    margin: 2px 20px 0 -70px;
    display: inline-block;
    color: #fff;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}
.tbislso ul li a.rss:hover {
    background: rgba(255, 102, 0, 1);
    border-left: 0px solid rgba(255, 102, 0, 1);
    color: #fff;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}
.tbislso ul li a.rss:hover p {
    opacity: 0;
    -webkit-transition: all 1ms ease-in-out;
    -moz-transition: all 1ms ease-in-out;
    -ms-transition: all 1ms ease-in-out;
    -o-transition: all 1ms ease-in-out;
    transition: all 1ms ease-in-out;
}
/* Sliding Social Buttons Widget  */
 
Última edición:
Hay que estar conectado o registrado para responder aquí.

Temas similares

Pedro Sierra
  • Cerrado
Se solicita Añadir botones sociales a tema de Ghost CMS
Respuestas
2
Visitas
128
eswal200
eswal200
raudy nunez
Cómo añadir botones en un canal de Telegram?
Respuestas
7
Visitas
511
David Morales
David Morales
C
¿Cómo enlazar redes sociales en mi página web?
Respuestas
0
Visitas
318
chego
C
R
Botones de redes sociales en widget con amplias personalizaciones
Respuestas
1
Visitas
186
Carlos Arreola
C
Lyndbeck
Centrar botones de Redes Sociales en Web recién creada
Respuestas
1
Visitas
263
alexei
A
Atrás
Arriba