300x250 AD TOP

sábado, 17 de agosto de 2013

Etiquetado Como: , ,

Integrar comentarios de Facebook en nuestra Web o Blog (Blogger)



Para integrar el Box de comentarios de facebook en nuestra web es fácil primero vamos a  la pagina del plugin http://developers.facebook.com/docs/reference/plugins/comments/ y en el formulario podemos configurar los parámetros de presentacion del plugin

URL to comment on: URL de la pagina especifica donde se aplicara el BOX
Number of posts: numero de post que se van a mostrar
Width: Ancho del Box
Color Scheme: puedes elegir entre Light y Dark

le damos click en el botón "Get Code" y tendremos dos porciones de código el JavaScript SDK  y el div del BOX de comentario, para terminar de tener el código preparado hay que elegir a que aplicación  asociamos el BOX por lo que recomiendo crear una aplicación para gestionar los comentarios 
Código I:
Este código se recomeindo colocar justo debajo de la etiqueta body 

<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&appId=111111111";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Código II:
Este código es el box de comentario hay que remplazar el valor de data-href="" por la url especifica donde se mostrara el comentario 
<div class="fb-comments" data-href="http://example.com" data-width="470">

Integrar Box de comentario en Blogger (Blogspot)


Aquí lo podemos hacer de dos formas primero es integrarlo dentro de cada entrada o pagina que vallamos creando esto lo hacemos igual que para una web, sin embargo esto es un poco tedioso la otra forma y creo la recomendada es integrarla en la plantilla (plantilla > editar html) justo antes o remplazando al formulario de comentario, lo que haremos acá es simple el codigo I (JavaScript SDK) lo Integrar Box de comentario en Blogger (Blogspot)ingresamos de igual forma justo debajo de la etiqueta "body"
el segundo código es el que lo vamos a variar un poco nos quedara de esta forma:
 <b:if cond='data:post.link'>
  <div class='fb-comments' data-width='600' expr:href='data:post.link'/>
 <b:else/>
  <b:if cond='data:post.url'>
   <div class='fb-comments' data-width='600' expr:href='data:post.url'/>
  </b:if>
 </b:if>

En la linea 1 aplicamos una condicional que se ejecutara si hemos ingresado la url en el campo adicional, la linea 2 es el box del comentario solo que le variamos "href=''"  por "expr:href='data:post.link'" este ultimo nos devuelve href='http://laurldelaentrada.com' en la linea 3 es un else, en la linea 4 damos la condicional donde nos devuelve la url de la entrada (vinculo permanente)
en la linea 5 es el box del comentario solo que cambiando "href" por "href='data:post.link"
esto le da el comportamiento dinámico donde se remplazara la url dependiendo de que entrada se muestre.
Espero que les halla servidor

Referencias:
http://vagabundia.blogspot.com/2010/10/el-campo-de-enlace-en-blogger.html

0 comentarios:

Publicar un comentario

Gracias por comentarnos