Guía para Botones Sociales y Contador en Blogger (POR FAVOR)

AntonioJose · 19 Sep 2013

Queridos amigos por favor algun experto de blogger que me ayude en lo siguiente:

Quiero los botones sociales (facebook, twitter y google) iguales como los de este blog afuera y dentro de cada post.
tambien que tenga el contador de comentarios facebook, asi tal cual como lo tiene ese blog.

Por favor que me ayuden paso a paso de como hacerlo, yo le escribi a los dueños del blog, pero no recibi respuesta.
Si ustedes quieren les regalo menciones en pagina con mas de 800.000 fans.

por favor me ayudan, paso a paso esas dos cosas.

aqui les coloco una imagen de como se ve en el blog ese y el link del blog.

TECMEZ.COM: TECNOLOGIA, CINE Y ENTRETENIMIENTO EN INTERNET

POR FAVOR

KevinCastro · 19 Sep 2013

Deverias leer mas habia un tema de estos hace poco

https://developers.google.com/+/web/+1button/?hl=es
https://twitter.com/goodies/buttons
https://developers.facebook.com/docs/reference/plugins/like/

Code de esa web

FACEBOOK

Insertar CODE, HTML o PHP:

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/es_LA/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="http://developers.facebook.com/docs/reference/plugins/like" data-width="100" data-layout="button_count" data-show-faces="true" data-send="false"></div>

TWITTER

Insertar CODE, HTML o PHP:

<a href="https://twitter.com/share" class="twitter-share-button" data-url="https://twitter.com/goodies/buttons#tweet" data-lang="es">Twittear</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>

GOOGLE

Insertar CODE, HTML o PHP:

<!-- Inserta esta etiqueta donde quieras que aparezca Botón +1. -->
<div class="g-plusone" data-size="medium"></div>

<!-- Inserta esta etiqueta después de la última etiqueta de Botón +1. -->
<script type="text/javascript">
  window.___gcfg = {lang: 'es'};

  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

AntonioJose · 19 Sep 2013

KevinCastro dijo:

Deverias leer mas habia un tema de estos hace poco

https://developers.google.com/+/web/+1button/?hl=es
https://twitter.com/goodies/buttons
https://developers.facebook.com/docs/reference/plugins/like/

Code de esa web

FACEBOOK

Insertar CODE, HTML o PHP:

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/es_LA/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="http://developers.facebook.com/docs/reference/plugins/like" data-width="100" data-layout="button_count" data-show-faces="true" data-send="false"></div>

TWITTER

Insertar CODE, HTML o PHP:

<a rel="nofollow" href="https://twitter.com/share" class="twitter-share-button" data-url="https://twitter.com/goodies/buttons#tweet" data-lang="es">Twittear</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>

GOOGLE

Insertar CODE, HTML o PHP:

<!-- Inserta esta etiqueta donde quieras que aparezca Botón +1. -->
<div class="g-plusone" data-size="medium"></div>

<!-- Inserta esta etiqueta después de la última etiqueta de Botón +1. -->
<script type="text/javascript">
  window.___gcfg = {lang: 'es'};

  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

Gracias amigo pero yo quiero es que sea igual a el blog mostrado y a la imagen subida.
es que botones existen muchos, pero en este estilo asi tal cual no veo.
por eso pido la ayuda.
con el contador de facebook y todo.

---------- Post agregado el 19-sep-2013 hora: 20:45 ----------

y para hacerlo paso a paso como seria con algun experto.

WalkingDead · 19 Sep 2013

yo lo podria poner pero te saldrai en 1.3 dolares amigo, quedaria igual a ese.

Andres128 · 19 Sep 2013

Voy acabar con un trabajo que tengo y mas tarde te paso el código

BlogNivel · 19 Sep 2013

Puedes Visitar mi pagina hay mejores diseños que esos, pero si quieres igual a esos me avisas para poder ayudarte.
Blog Nivel

AntonioJose · 21 Sep 2013

Gracias mis amigos, les mande un privado. bendiciones me avisan.

BlogNivel · 21 Sep 2013

Bueno Amigo vas hacer esto antes te vas a editar plantilla

Y busca esta linea <div class='post-header'> pero hay dos de esta la segunada es la que nos interesa, agregamos debajo de esta linea el siguiente código:

Insertar CODE, HTML o PHP:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="metaRight">

<!-- Botón de Google -->
<div style="float:left;margin-right:-20px;">
<div class="g-plusone" data-size="medium"></div>
<script type="text/javascript">
  window.___gcfg = {lang: 'es'};

  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
</div>

<!-- Botón de Twitter -->
<div style="float:left;width:100px;">
<a href="https://twitter.com/share" class="twitter-share-button" data-lang="es" data-count="horizontal">Twittear</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>

<!-- Botón de Facebook -->
<div style="float:left;width:122px;">
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url+ &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp;height=25&amp;action=like&amp;font=tahoma&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:100px; height:25px;'/>
</div>

& # 160 ; & # 160 ;
  <img alt="Comentarios FB" src="http://4.bp.blogspot.com/-zxcSXyr2w_w/Txh_xpdrgCI/AAAAAAAAIKA/U9WR8Si9oYk/s15/fb.png"/>
<a expr:href='data:post.addCommentUrl'><fb:comments-count expr:href='data:post.url'/> Comentarios</a>
& # 160 ;
  <img alt='Comentarios' src='http://4.bp.blogspot.com/-x6OfXG2vTi0/Tf0nphQuHaI/AAAAAAAAFR0/e1hL-nfF0Uw/s000/ico_comment.png'/>
<a><data:post.numComments/> comentarios</a>
& # 160 ;
  <img alt="Fecha" src="http://4.bp.blogspot.com/_Hh5sPBdHik4/S5Av-7e-ArI/AAAAAAAABEU/uAD6SsFRkaA/s000/ico_date.gif"/>
<data:post.dateHeader/>
</div>
</b:if>

Ahora agregaremos el etilo para que se mire a como lo quieres, antes de esta linea ]]></b: skin> agregar este codigo:

Insertar CODE, HTML o PHP:

.metaRight {
border-bottom:1px dotted #CDCDCD;
border-top:1px dotted #CDCDCD;
padding:7px 0 7px 7px;
font-size:11px;
font-family:Tahoma;
background:#f2f2f2;
display:block;
}
.metaRight img {
vertical-align:middle;
margin-top:-2px;
margin-right:2px;
border:none;
padding:0;
}

Eso es todo saludes espero haberte ayudado y debes de modificar la fecha para que te salga como en la pagina esto lo configuras en:
Configuración › Idioma y formato › Formato de cabecera de fecha y lo dejas así como este formato 09/09/13

PD: en la parte donde va esto & # 160 ; quite le los espacio por que no me lo deja poner el editor de texto
Saludes.

Andres128 · 21 Sep 2013

[MENTION=33025]AntonioJose[/MENTION] el amigo [MENTION=46570]BlogNivel[/MENTION] me gano el trabajo y creo que lo ha hecho super bien!

Lo único que debes hacer AntonioJose es agregar el código brindado por el amigo BlogNivel en tu plantilla de tu blog, buscando la mejor ubicacion

AntonioJose · 21 Sep 2013

blognivel dijo:

bueno amigo vas hacer esto antes te vas a editar plantilla

y busca esta linea <div class='post-header'> pero hay dos de esta la segunada es la que nos interesa, agregamos debajo de esta linea el siguiente código:

Insertar CODE, HTML o PHP:

<b:if cond='data:blog.pagetype == "item"'>
<div class="metaright">

<!-- botón de google -->
<div style="float:left;margin-right:-20px;">
<div class="g-plusone" data-size="medium"></div>
<script type="text/javascript">
  window.___gcfg = {lang: 'es'};

  (function() {
    var po = document.createelement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getelementsbytagname('script')[0]; s.parentnode.insertbefore(po, s);
  })();
</script>
</div>

<!-- botón de twitter -->
<div style="float:left;width:100px;">
<a rel="nofollow" href="https://twitter.com/share" class="twitter-share-button" data-lang="es" data-count="horizontal">twittear</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>

<!-- botón de facebook -->
<div style="float:left;width:122px;">
<iframe allowtransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url+ "&layout=button_count&show_faces=false&width=100&height=25&action=like&font=tahoma&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:100px; height:25px;'/>
</div>

& # 160 ; & # 160 ;
  <img alt="comentarios fb" src="http://4.bp.blogspot.com/-zxcsxyr2w_w/txh_xpdrgci/aaaaaaaaika/u9wr8si9oyk/s15/fb.png"/>
<a expr:href='data:post.addcommenturl'><fb:comments-count expr:href='data:post.url'/> comentarios</a>
& # 160 ;
  <img alt='comentarios' src='http://4.bp.blogspot.com/-x6ofxg2vti0/tf0nphquhai/aaaaaaaafr0/e1hl-nff0uw/s000/ico_comment.png'/>
<a><data:post.numcomments/> comentarios</a>
& # 160 ;
  <img alt="fecha" src="http://4.bp.blogspot.com/_hh5spbdhik4/s5av-7e-ari/aaaaaaaabeu/uad6ssfrkaa/s000/ico_date.gif"/>
<data:post.dateheader/>
</div>
</b:if>

ahora agregaremos el etilo para que se mire a como lo quieres, antes de esta linea ]=]=></b: Skin> agregar este codigo:

Insertar CODE, HTML o PHP:

.metaright {
border-bottom:1px dotted #cdcdcd;
border-top:1px dotted #cdcdcd;
padding:7px 0 7px 7px;
font-size:11px;
font-family:tahoma;
background:#f2f2f2;
display:block;
}
.metaright img {
vertical-align:middle;
margin-top:-2px;
margin-right:2px;
border:none;
padding:0;
}

eso es todo saludes espero haberte ayudado y debes de modificar la fecha para que te salga como en la pagina esto lo configuras en:
configuración › idioma y formato › formato de cabecera de fecha y lo dejas así como este formato 09/09/13

pd: En la parte donde va esto & # 160 ; quite le los espacio por que no me lo deja poner el editor de texto
saludes.

le mande unos correos.

AntonioJose · 21 Sep 2013

Como hago para que me salga todo en una sola linea y que no salga la fecha abajo.

otra cosita por favor, esto sale dentro de los post, y como hago para que también se vea cuando este fuera de los post.
osea en la pagina principal.

Del resto todo esta perfecto.

AntonioJose · 21 Sep 2013

Cuando uno esta en la pagina principal sale asi:

solo se ve cuando esta dentro del post.

AntonioJose · 21 Sep 2013

miren como las coloque quedo perfecto.
Ahora solo me falta para colocarlos en la pagina principal también.
Que salga por fuera también.

Andres128 · 21 Sep 2013

[MENTION=33025]AntonioJose[/MENTION] Quita esto del codigo que te brindo el compañero BlogNivel:

Insertar CODE, HTML o PHP:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
</b:if>

Para que aprendas un poco aquí puedes llenarte de info:

Ocultar gadgets y elementos en distintas partes del blog | Ciudad Blogger - Trucos y tutoriales para tu blog

AntonioJose · 22 Sep 2013

Andres128 dijo:
[MENTION=33025]AntonioJose[/MENTION] Quita esto del codigo que te brindo el compañero BlogNivel:

Insertar CODE, HTML o PHP:

<b:if cond='data:blog.pageType == "item"'> </b:if>

Para que aprendas un poco aquí puedes llenarte de info:

Ocultar gadgets y elementos en distintas partes del blog | Ciudad Blogger - Trucos y tutoriales para tu blog

Amigo ya pero ocurre un gran problema:

1 - En los botones de twitter en todos salen 940 y en google 275 en todas las entrdas.

2 - cuando le doy clic al boton twitter desde la portada principal me sale recomendando es el blog y no el post.

como soluciono esas dos cosas, que salan como las que estan dentro del post.
numero reales y al hacer clic me recomiende el post.

letasgon · 22 Sep 2013

En el botón de twitter agrega esto:

Insertar CODE, HTML o PHP:

<!-- Botón de Twitter -->
<div style="float:left;width:100px;">
<a href="https://twitter.com/share" class="twitter-share-button" [COLOR="#FF0000"]expr:data-url="data:post.url" expr:data-text="data:post.title"[/COLOR]>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>

Y en el +1:

Insertar CODE, HTML o PHP:

<!-- Botón de Google -->
<div style="float:left;margin-right:-20px;">
<div class="g-plusone" data-size="medium" [COLOR="#FF0000"]expr:data-href="data:post.url"[/COLOR]></div>
<script type="text/javascript">
  window.___gcfg = {lang: 'es'};

  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
</div>

AntonioJose · 22 Sep 2013

letasgon dijo:

En el botón de twitter agrega esto:

Insertar CODE, HTML o PHP:

<!-- Botón de Twitter -->
<div style="float:left;width:100px;">
<a rel="nofollow" href="https://twitter.com/share" class="twitter-share-button" [COLOR="#FF0000"]expr:data-url="data:post.url" expr:data-text="data:post.title"[/COLOR]>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>

Y en el +1:

Insertar CODE, HTML o PHP:

<!-- Botón de Google -->
<div style="float:left;margin-right:-20px;">
<div class="g-plusone" data-size="medium" [COLOR="#FF0000"]expr:data-href="data:post.url"[/COLOR]></div>
<script type="text/javascript">
  window.___gcfg = {lang: 'es'};

  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
</div>

Perfecto amigo, todo salio bien.
al del facebook no se le coloca nada cierto???

---------- Post agregado el 22-sep-2013 hora: 18:18 ----------

Muy agradecido con todos ustedes por ese gran favor, muchas gracias de verdad.
el blog Blog Nivel lo voy a promocionar.
si tienen otros me dicen para difundirlos.

algo en la caja de comentaros facebook que mas tarde les digo para arreglar algo.

---------- Post agregado el 22-sep-2013 hora: 18:18 ----------

letasgon dijo:

En el botón de twitter agrega esto:

Insertar CODE, HTML o PHP:

<!-- Botón de Twitter -->
<div style="float:left;width:100px;">
<a rel="nofollow" href="https://twitter.com/share" class="twitter-share-button" [COLOR="#FF0000"]expr:data-url="data:post.url" expr:data-text="data:post.title"[/COLOR]>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>

Y en el +1:

Insertar CODE, HTML o PHP:

<!-- Botón de Google -->
<div style="float:left;margin-right:-20px;">
<div class="g-plusone" data-size="medium" [COLOR="#FF0000"]expr:data-href="data:post.url"[/COLOR]></div>
<script type="text/javascript">
  window.___gcfg = {lang: 'es'};

  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
</div>

graciasssssss letasgon

---------- Post agregado el 22-sep-2013 hora: 18:18 ----------

Andres128 dijo:
[MENTION=33025]AntonioJose[/MENTION] Quita esto del codigo que te brindo el compañero BlogNivel:

Insertar CODE, HTML o PHP:

<b:if cond='data:blog.pageType == "item"'> </b:if>

Para que aprendas un poco aquí puedes llenarte de info:

Ocultar gadgets y elementos en distintas partes del blog | Ciudad Blogger - Trucos y tutoriales para tu blog

graciassss Andres128

---------- Post agregado el 22-sep-2013 hora: 18:19 ----------

BlogNivel dijo:
Puedes Visitar mi pagina hay mejores diseños que esos, pero si quieres igual a esos me avisas para poder ayudarte.
Blog Nivel

BlogNivel graciasssssssss

BlogNivel · 23 Sep 2013

De nada Amigo hasta ahora estoy en entrando por eso no te había contestado.

Saludes.

AntonioJose · 23 Sep 2013

BlogNivel dijo:
De nada Amigo hasta ahora estoy en entrando por eso no te había contestado.

Saludes.

Todo esta funcionando bien, pero como hago para que esa barra no salga en las paginas estáticas???
como por ejemplo: contacto... etc las paginas estaticas creadas en blogger-

BlogNivel · 23 Sep 2013

AntonioJose dijo:
Todo esta funcionando bien, pero como hago para que esa barra no salga en las paginas estáticas???
como por ejemplo: contacto... etc las paginas estaticas creadas en blogger-

Hola hermano, Explícame un poco mejor que es lo que quieres…..

Guía para Botones Sociales y Contador en Blogger (POR FAVOR)

WalkingDead