Cómo agregar botones de redes sociales de estilo simple y llamativo

Wizard

Wizard Seguir

Xi
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Desde
27 Ago 2011
Mensajes
4.257
Buenas amigos, disculpen tengo todo el día buscando la forma de colocar estos botones en algunos de mis blogs, ya que tienen un estilo bastante simple y llamativo, pero no consigo como colocarlos.

El ejemplo lo pueden ver aca: Las fotos de la nieve en los Valles cubrieron de blanco las redes sociales - La Gaceta

Y más específico estoy buscando colocarlos de esta forma:

compartir.jpg


Espero alguien pueda ayudar, estoy seguro que más de uno lo agradecería también. Saludos
 
N

nxovoix

Gamma
Redactor
Desde
8 Ago 2012
Mensajes
240
Por favor, ten en cuenta 📝 que si deseas hacer un trato 🤝 con este usuario, está baneado 🔒.
Hola.. te dejo una solucion mas simple la tengo posteada en mi blog CODE-Bloggers

lo unico que debes hacer es pegar este codigo en donde quieras poner los botones:

HTML: 
<!-- BOTONES SOCIALES GETSHARES -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='buttons'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js' type='text/javascript'/>
<script src='http://cdn.getshar.es/lib/0.8.0.min.js' type='text/javascript'/>
<link href='http://cdn.getshar.es/lib/0.8.0.min.css' rel='stylesheet' type='text/css'/>
<style>#buttons{text-align:center; margin:10px auto;font-weight:normal;}</style>
<script type='text/javascript'>
(function(){
var settings;
settings = {
root: $(&quot;#buttons&quot;),
counter: {
position: &quot;inside&quot;
},
share: {
url: &quot;<data:post.canonicalUrl/>&quot;,
imageUrl: &quot;<data:post.firstImageUrl/>&quot;,
message: &quot;<data:post.title/>&quot; + &quot; <data:post.canonicalUrl/> Vía:  [MENTION=31425]Code[/MENTION]blogger&quot;
}
};
new GetShare($.extend(settings, {network: &quot;googleplus&quot;}));
new GetShare($.extend(settings, {network: &quot;twitter&quot;}));
new GetShare($.extend(settings, {network: &quot;facebook&quot;}));
new GetShare($.extend(settings, {network: &quot;linkedin&quot;}));
new GetShare($.extend(settings, {network: &quot;pinterest&quot;}));
new GetShare($.extend(settings, {network: &quot;pocket&quot;}));
//Más redes en [url=http://getshar.es/]GetShares[/url]
}).call(this);
</script>
</b:if>

y si quieres que solo salga el de Facebook, Twitter y G+ pones este:


HTML: 
<!-- BOTONES SOCIALES GETSHARES -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='buttons'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js' type='text/javascript'/>
<script src='http://cdn.getshar.es/lib/0.8.0.min.js' type='text/javascript'/>
<link href='http://cdn.getshar.es/lib/0.8.0.min.css' rel='stylesheet' type='text/css'/>
<style>#buttons{text-align:center; margin:10px auto;font-weight:normal;}</style>
<script type='text/javascript'>
(function(){
var settings;
settings = {
root: $(&quot;#buttons&quot;),
counter: {
position: &quot;inside&quot;
},
share: {
url: &quot;<data:post.canonicalUrl/>&quot;,
imageUrl: &quot;<data:post.firstImageUrl/>&quot;,
message: &quot;<data:post.title/>&quot; + &quot; <data:post.canonicalUrl/> Vía:  [MENTION=31425]Code[/MENTION]blogger&quot;
}
};
new GetShare($.extend(settings, {network: &quot;googleplus&quot;}));
new GetShare($.extend(settings, {network: &quot;twitter&quot;}));
new GetShare($.extend(settings, {network: &quot;facebook&quot;}));
//Más redes en [url=http://getshar.es/]GetShares[/url]
}).call(this);
</script>
</b:if>

prueba y comentar si te sale.


saludos :encouragement:
 
Última edición:
elbebe

elbebe

Zeta
Verificación en dos pasos activada
Desde
12 May 2013
Mensajes
1.623
nxovoix dijo:
Hola.. te dejo una solucion mas simple la tengo posteada en mi blog CODE-Bloggers

lo unico que debes hacer es pegar este codigo en donde quieras poner los botones:

HTML: 
<!-- BOTONES SOCIALES GETSHARES -->
<b:if cond='data:blog.pageType == "item"'>
<div id='buttons'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js' type='text/javascript'/>
<script src='http://cdn.getshar.es/lib/0.8.0.min.js' type='text/javascript'/>
<link href='http://cdn.getshar.es/lib/0.8.0.min.css' rel='stylesheet' type='text/css'/>
<style>#buttons{text-align:center; margin:10px auto;font-weight:normal;}</style>
<script type='text/javascript'>
(function(){
var settings;
settings = {
root: $("#buttons"),
counter: {
position: "inside"
},
share: {
url: "<data:post.canonicalUrl/>",
imageUrl: "<data:post.firstImageUrl/>",
message: "<data:post.title/>" + " <data:post.canonicalUrl/> Vía:  [MENTION=31425]Code[/MENTION]blogger"
}
};
new GetShare($.extend(settings, {network: "googleplus"}));
new GetShare($.extend(settings, {network: "twitter"}));
new GetShare($.extend(settings, {network: "facebook"}));
new GetShare($.extend(settings, {network: "linkedin"}));
new GetShare($.extend(settings, {network: "pinterest"}));
new GetShare($.extend(settings, {network: "pocket"}));
//Más redes en [url=http://getshar.es/]GetShares[/url]
}).call(this);
</script>
</b:if>

y si quieres que solo salga el de Facebook, Twitter y G+ pones este:


HTML: 
<!-- BOTONES SOCIALES GETSHARES -->
<b:if cond='data:blog.pageType == "item"'>
<div id='buttons'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js' type='text/javascript'/>
<script src='http://cdn.getshar.es/lib/0.8.0.min.js' type='text/javascript'/>
<link href='http://cdn.getshar.es/lib/0.8.0.min.css' rel='stylesheet' type='text/css'/>
<style>#buttons{text-align:center; margin:10px auto;font-weight:normal;}</style>
<script type='text/javascript'>
(function(){
var settings;
settings = {
root: $("#buttons"),
counter: {
position: "inside"
},
share: {
url: "<data:post.canonicalUrl/>",
imageUrl: "<data:post.firstImageUrl/>",
message: "<data:post.title/>" + " <data:post.canonicalUrl/> Vía:  [MENTION=31425]Code[/MENTION]blogger"
}
};
new GetShare($.extend(settings, {network: "googleplus"}));
new GetShare($.extend(settings, {network: "twitter"}));
new GetShare($.extend(settings, {network: "facebook"}));
//Más redes en [url=http://getshar.es/]GetShares[/url]
}).call(this);
</script>
</b:if>

prueba y comentar si te sale.


saludos :encouragement:
Hacer clic para expandir...

me funciono Gracias Saludos
 
melonidas

melonidas

Zeta
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
Verificado por Binance
Desde
31 Dic 2009
Mensajes
1.690
hola justo etoy tratando de agregar ese codigo en mi blog de blogger, justo despues de post-header , y no me aparece. ¿puede ser que mi plantilla no lo acepte?
 
Hay que estar conectado o registrado para responder aquí.
Arriba