noticias : blogger

Empezar desde cero contador de botón compartir facebook

Bueno tal vez hay alguno que no se fijan mucho en eso, pero el botón de compartir de facebook no empieza desde cero y todos los demás botones de twitter, google +1 etc.. si empiezan desde cero
Aqui les pongo una imagen de como se ve, este código funciona con jquey

[Sin jQuery] ----------------------------- [Con jQuery]

Bueno les voy a enseñar como implementarlo en blogger

1ro.- Vamos a Diseño » Edicion HTML y buscamos ]]></b:skin>
2do.- Despues de ]]></b:skin> pegamos este codigo
Código:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
//fix facebook share's zero-count
jQuery(document).ready(function(){
    jQuery(".fb_share_no_count .fb_share_count_inner").text("0");
    jQuery(".fb_share_no_count").removeClass("fb_share_no_count");
});
//]]>
</script>
y con esto ya podremos ver el botón de facebook que inicia desde cero.

Ahora para añadir el botón simplemente hay que pegar el siguiente código donde queramos que aparezca el código por ejemplo después de:
Código:
<div class='post-footer-line post-footer-line-1'>
después del anterior código pegamos el botón, que seria este codigo
Código:
<a href='http://www.facebook.com/sharer.php' name='fb_share' type='box_count'>Compartir</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>

Ver mas

Añadir los botones de las redes sociales a tu blog

Antes que nada les quiero agradecer a todos los que en este foro me ayudan con mis dudas, desde que me uní aquí estoy aprendiendo un montón de cosas!

img src='botones.jpg' alt='botones para compartir' title='botones para compartir en las redes so.JPG

Tutorial

Entrar en la Edición HTML del blog y marcar la casilla Expandir plantillas de artilugios, luego busca la etiqueta:

Código:

<div class='post-footer-line post-footer-line-1'>

Exactamente después de esto pegamos lo siguiente

Código HTML:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<table border='0' cellpadding='6' style='width: 50%;'><tbody>
<tr><td><a class='twitter-share-button' data-count='horizontal' data-lang='es' href='http://twitter.com/share'>Tweetear</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></td><td><g:plusone size='medium'/></td>
<td><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?locale=es_ES&amp;href=&quot; + data:post.url+ &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp;height=21&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:100px; height:21px'/></td>
</tr>
</tbody></table></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4dcddcb73e3ba0d2"></script>
</b:if>

guardar y el resultado se vera como aqui Añadir las redes sociales en blogger - Como Buscar

Ver mas

SEO en la cabecera de blogger

Como se sabe el SEO es algo muy importante para posicionar tu blog en buscadores.

Y una de las primeras cosas para poder partir bien desde el inicio con tu blog es configurar correctamente el <head>.

Aquí te dejo paso a paso lo que debe contener tu blog:

*Todo lo que este entre codigo HTML es lo que se debe colocar.

Código HTML:

<head>

Dentro del head agregaremos lo siguiente:

Código HTML:

<!-- script redirección -->
 <script type='text/javascript'>
  //<![CDATA[
  (function(){
   var URL = document.URL,
    reg = /\.blogspot\.(com\...|..)\//
   if( URL.match( reg ) ){
    window.location = URL.replace( reg, ".blogspot.com\/ncr\/" )
   }
  })()
  // Fallback CSS para cuando no hay javascript
  document.documentElement.className = document.documentElement.className.replace('no-js', 'js');
  //]]>
 </script>

Esto es importante si no tienes un dominio aún, si ya lo tienes no hace falta colocarlo pues su función es evitar la re-dirección por países (.ar, .co, etc.) dejandola en .com.

Lo siguiente son comentarios condicionales IE -> Permite usar CSS condicionalmente. La mejor forma de usarlos sería en el <html>, pero no se puede sin tranformar en entidades

Código HTML:

<!--[if IE 8]>
  <script type='text/javascript'>document.documentElement.className += ' ie8 lt-ie9'</script>
 <![endif]-->
 <!--[if IE 7]>
  <script type='text/javascript'>document.documentElement.className += ' ie7 lt-ie8 lt-ie9'</script>
 <![endif]-->
 <!--[if lt IE 7]>
  <script type='text/javascript'>document.documentElement.className += ' ie6 lt-ie7 lt-ie8 lt-ie9'</script>
 <![endif]-->

Ahora vamos a hacer que funcione correctamente en todos los navegadores:

*Importante que cambies donde dice "CODIGO" por el código que bing te otorgue.

Código HTML:

<!--Meta X-UA-Compatible -> Mejor experiencia para IE -->
 <meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible'/>
 
 <!-- meta viewport -> dispositivos móviles -->
 <meta content='width=device-width,initial-scale=1.0,maximum-scale=1.0' name='viewport'/>

 <!-- Para que indexe Bing [código proporcionado por él] -->
 <b:if cond='data:blog.url == data:blog.homepageUrl'>
  <meta content='[CODIGO]' name='msvalidate.01'/>
 </b:if>

Ahora vienen las metas para indexar el contenido correctamente en Facebook:

Código HTML:

<meta property='og:site_name' expr:content='data:blog.title'/>
 <meta property='og:type' content='blog'/>
 <meta expr:content='data:blog.canonicalUrl' property='og:url'/>
 <b:if cond='data:blog.metaDescription'>
  <meta property='og:description' expr:content='data:blog.metaDescription'/>
 <b:else />
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
   <!-- Metas home -->
   <meta property='og:description' content='[AQUÍ COLOCA LA DESCRIPCIÓN DE TU BLOG]'/>
  <b:else />
   
   <meta name='description' property='og:description' expr:content='data:blog.pageName + ": " + data:blog.title'/>
  </b:if>
 </b:if>

 <!-- Imagen del post -->
 <b:if cond='data:blog.postImageThumbnailUrl'>
  <meta property='og:image' expr:content='data:blog.postImageThumbnailUrl' />
 </b:if>

Ahora unas cosas mas para indexar todo el contenido y agregar keys, que aunque ya casi no se utilizan pueden servir:

Código HTML:

<meta name='keywords' content='[palabras, clave, separadas, por, coma]'/>

 <!-- Indexación -->
 <b:if cond='data:blog.pageType == "archive"'>
  <!-- No queremos indexar en los archivos -->
  <meta content='noindex,nofollow' name='robots'/>
 <b:else />
  <b:if cond='data:blog.pageType == "error_page"'>
   <!-- Ni en las 404 -->
   <meta content='noindex,nofollow' name='robots'/>
  <b:else />
   <b:if cond='data:blog.pageType == "index"'>
    <b:if cond='data:blog.homepageUrl == data:blog.url'>
     <!-- En el home sí -->
     <meta content='index,follow' name='robots'/>
    <b:else/>
     <!--  Pero en el resto de las index no -->
     <meta content='noindex,nofollow' name='robots'/>
    </b:if>
   <b:else />
    <!-- En el resto (páginas y posts) sí -->
    <meta content='index,follow' name='robots'/>
   </b:if>
  </b:if>
 </b:if>

 <!-- Links rel=next y rel=prev -> Indexación también -->
 <b:if cond='data:blog.pageType == "item"'>
  <b:if cond='data:blog.newerPageUrl'>
   <link expr:href='data:blog.newerPageUrl' rel='next'/>
  </b:if>
  <b:if cond='data:blog.olderPageUrl'>
   <link expr:href='data:blog.olderPageUrl' rel='prev'/>
  </b:if>
 </b:if>

 <!-- Contenido -->
 <meta content='all' name='audience'/>
 <meta content='general' name='rating'/>

Por ultimo, los títulos:

Código HTML:

<b:if cond='data:blog.url != data:blog.homepageUrl'>
  <meta property='og:title' expr:content='data:blog.pageName + ": " + data:blog.title'/>
  <title><data:blog.pageName/>: <data:blog.title/></title>
 <b:else/>
  <meta property='og:title' expr:content='data:blog.pageTitle'/>
  <title><data:blog.pageTitle/></title>
 </b:if>

  <b:include data='blog' name='all-head-content'/>

Ya solo nos falta colocar lo último. La url canonica, favicon, descripción, imagen del post, feed y un script para la compatibilidad con HTML5:

Código HTML:

<!-- Meta content-type está obsoleta, usaremos charset -->
 <meta charset='utf-8' />
 <meta name='generator' content='blogger' />

 <!-- Link al favicon (es el personalizado) -->
 <b:if cond='data:blog.blogspotFaviconUrl'>
  <link expr:href='data:blog.blogspotFaviconUrl' rel='icon' type='image/x-icon'/>
 </b:if>

 <!-- Link rel=canonical -->
 <link rel='canonical' expr:href='data:blog.canonicalUrl' />

 <!-- La descripción -->
 <b:if cond='data:blog.metaDescription'>
  <meta expr:content='data:blog.metaDescription' name='description' />
 </b:if>

 <!-- La imagen del post -->
 <b:if cond='data:blog.postImageThumbnailUrl'>
  <link rel='image_src' expr:href='data:blog.postImageThumbnailUrl' />
 </b:if>


 <!-- Link rel=me si existe -->
 <b:if cond='data:blog.meTag'>
  <data:blog.meTag />
 </b:if>

 <!-- Links del feed -->
 <b:if cond='data:blog.feedLinks'>
  <data:blog.feedLinks />
 </b:if>

 <!-- Compatibilidad con HTML5 sí, pero no para IE9, que es un buen navegador -->
 <!--[if lt IE 9]>
  <script src='http://html5shiv.googlecode.com/svn/trunk/html5.js'></script>
 <![endif]-->

Código HTML:

</head>

Eso es todo...

Actualizo:

Pido una disculpa a ecoal95, los créditos son para el.
Fuente: Reemplazar el includable all-head-content en blogger | Emilio Cobos-CMC

Ver mas

Añadir caja de comentarios Facebook en Blogger

He decidido poner comentarios de Facebook en mis blogger por dos motivos
1)Cuando alguien comenta aparece en su muro
2)Los visitantes suelen estar ya con el login hecho

He terminado haciéndome un pequeño código javascript para la API de Facebook para que se muestre el correspondiente a cada post, lo comparto aquí

En Plantilla -> Editar Html , y marcamos "Expandir plantilla de artilugios"

Luego dentro del <body>, justo debajo copiamos esto

Código:

&lt;!-- FACEBOOK SDK EMPIEZA --&gt;
&lt;div id=&quot;fb-root&quot;&gt;&lt;/div&gt;
&lt;script&gt;(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 = &quot;//connect.facebook.net/es_ES/all.js#xfbml=1&quot;;
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));&lt;/script&gt;
&lt;!-- FACEBOOK SDK ACABA --&gt;

Luego buscamos la línea
<div class='post-footer'>

nos deben salir dos coincidencias, solo interesa la primera y justo encima pegamos esto

Código:

<!-- FACEBOOK COMENTARIOS EMPIEZA -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='currentUrll' style='display:none'><data:post.url/></div>
<br/><br/>
<script>
var urll=document.getElementById(&quot;currentUrll&quot;).innerHTML;
document.write(&quot;<div class='fb-comments' data-colorscheme='dark' data-href='&quot;+urll+&quot;' data-num-posts='5' data-width='640'/>&quot;);
</script>
</b:if>
<!-- FACEBOOK COMENTARIOS ACABA -->

si nuestro blog es blanco quitamos lo que dice: data-colorscheme='dark'

si queremos mostrar mas o menos de cinco cambiamos el número de: data-num-posts='5'

dependiendo del ancho del blog cambiamos: data-width='640'

yo siempre que añado código a la plantilla suelo separarlo varias líneas vacías antes y después para encontrarlo fácilmente

y hecho, si os funciona

Ver mas

noticias

Empezar desde cero contador de botón compartir facebook

Añadir los botones de las redes sociales a tu blog

SEO en la cabecera de blogger

Añadir caja de comentarios Facebook en Blogger

Entradas populares

Site Links