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

Wizard · 23 May 2014

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:

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

Zamy · 23 May 2014

Screenshot by Lightshot

te dejo un tuto :Getshares | botones sociales personalizados con contadores para usar en nuestro sitio web | CheckApps

Wizard · 23 May 2014

ZamyXd dijo:
Screenshot by Lightshot

te dejo un tuto :Getshares | botones sociales personalizados con contadores para usar en nuestro sitio web | CheckApps

Exacto, pero lo que sucede es que cuando copio los estilo de dicha clase, igualmente no funcionan x_X

nxovoix · 23 May 2014

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:

Danyca · 25 May 2014

Muchas gracias, a mi me ha sido de utilidad. Saludos

elbebe · 21 Dic 2015

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:

me funciono Gracias Saludos

melonidas · 25 Dic 2015

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?

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

Wizard

Zamy

Wizard

nxovoix

Danyca

elbebe

melonidas

Temas similares