lunes, 27 de mayo de 2013

Intrega en tu Blog las cajas de comentarios de Facebook y de Blogger fácil y rápidamente

Damian 5/27/2013

A petición de un usuario . Hoy les presento una forma de como integrar o agrupar las cajas de comentarios de Facebook y de Blogger de manera sencilla y rapida.

Paso 1) Añadir el CSS y el script

nos dirigimos a Plantilla--Editar HTML-- damos un clic dentro del editor de blogger y realizamos la siguiente combinación de teclasCTRL-F , esto es para abrir el buscador dentro del editor de bloggger y buscamos la etiqueta/head , una vez encontrada justo arriba de este pegamos el siguiente codigo.

style
    .comments-page { 
      background-color: rgba(255, 255, 255, 0.6);/*colo de fondo del contenedor*/
      background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
      background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
      background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
      background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
      background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
      width:100%;
      box-shadow: 0px 0px 8px #000; /* Sombra */
   } 
    #blogger-comments-page {  padding: 0px 5px;  display: none;} 
    .comments-tab { 
     float: left;
     font-size:14px; /* Tamaño de la fuente en las pestañas */
     padding: 0 40px;
     height: 0; 
     line-height: 30px;
     text-transform: uppercase;
     cursor: pointer;
     color: #ffffff;
     border-right: 30px solid transparent;
     border-bottom: 30px solid #3D3D3D;
     border-bottom-color: #d50ee7;
     } 
    .comments-tab-icon { height: 14px;  width: auto;  margin-right: 3px;} 
    .comments-tab:hover {   
     color: #ffffff;
     border-right: 30px solid transparent;
     border-bottom: 30px solid #3D3D3D;
     border-bottom-color: #8ef44b; 
    } 
    .inactive-select-tab { 
     color: #ffffff;
     border-right: 30px solid transparent;
     border-bottom: 30px solid #3D3D3D;
     border-bottom-color: #346de3; 
    }
    /style
    script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/ 
    script src='http://code.jquery.com/jquery-latest.js'/
    script type='text/javascript' 
 //![CDATA[
    function commentToggle(selectTab) { 
       jQuery('.comments-tab').addClass('inactive-select-tab'); 
       jQuery(selectTab).removeClass('inactive-select-tab'); 
       jQuery('.comments-page').hide(); 
       jQuery(selectTab + '-page').show(); 
    } 
 //
    /script

Paso 2) Añadir las Cajas de Comentarios
Terminado el paso uno buscamos con el buscador la siguiente linea de código.

b:includable id='comments' var='post'

una vez encontrada seleccione todo asta el cierre de del includable/b:includable ,y reemplace por el siguiente código.

b:includable id='comments' var='post'
 div class='comments' id='comments'
!--INICIO COMENTARIOS--
center
tabletbodytr
tddiv class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' style='float:left;' title='Comentarios Facebook' img class='comments-tab-icon' src='http://cdn1.iconfinder.com/data/icons/WPZOOM_Social_Networking_Icon_Set/32/facebook.png'/ fb:comments-count expr:href='data:post.url'/ Facebook Comentarios /div/td
tddiv class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&apos;#blogger-comments&apos;);' title='Comentarios Blogger'img class='comments-tab-icon' src='http://cdn1.iconfinder.com/data/icons/new_google_product_icons_by_carlosjj-dwke/32/blogger.png'/data:post.numComments/ Blogger Comentarios/div/td
/tr/tbody/table
div class='comments-page' id='fb-comments-page'
b:if cond='data:blog.pageType == &quot;item&quot;'
div id='fb-root'/div id='fb-root'/script(function(d){var js, id = &#39;facebook-jssdk&#39;; if (d.getElementById(id)) {return;}js = d.createElement(&#39;script&#39;); js.id = id; js.async = true;js.src = &quot;/script
fb:comments colorscheme='light' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='740px'//b:if/div
div class='comments comments-page' id='blogger-comments-page' style='display:none; '
!--FIN DE ESTILO--
   div id='mbt-form'
!--FIN DE ESTILO--
    a name='comment-form'/
    b:if cond='data:mobile'
      h4 id='comment-post-message'
        a expr:id='data:widget.instanceId + &quot;_comment-editor-toggle-link&quot;' href='javascript:void(0)'data:postCommentMsg//a/h4
      pdata:blogCommentMessage//p
      data:blogTeamBlogMessage/
      a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/
      iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/
    b:else/
      h4 id='comment-post-message'data:postCommentMsg//h4
      pdata:blogCommentMessage//p
      data:blogTeamBlogMessage/
      a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/
      iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/
    /b:if
    data:post.friendConnectJs/
    data:post.cmtfpIframe/
    script type='text/javascript'
      BLOG_CMT_createIframe(&#39;data:post.appRpcRelayPath/&#39;, &#39;data:post.communityId/&#39;);
    /script
  /div
/div
/center
 !--FIN--
/div
/b:includable

una vez reemplazado el codigo busque la siguiente linea.

b:includable id='threaded_comments' var='post'

realizamos el mismo procedimiento que en el anterios seleccione todo asta el cierre del includable/b:includable yreemplace.

b:includable id='threaded_comments' var='post'
  div class='comments' id='comments'
    
 center
tabletbodytr
tddiv class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' style='float:left;' title='Comentarios Facebook' img class='comments-tab-icon' src='http://cdn1.iconfinder.com/data/icons/WPZOOM_Social_Networking_Icon_Set/32/facebook.png'/ fb:comments-count expr:href='data:post.url'/ Facebook Comentarios /div/td
tddiv class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&apos;#blogger-comments&apos;);' title='Comments from Blogger'img class='comments-tab-icon' src='http://cdn1.iconfinder.com/data/icons/new_google_product_icons_by_carlosjj-dwke/32/blogger.png'/data:post.numComments/ Blogger Comentarios/div/td
/tr/tbody/table
div class='comments-page' id='fb-comments-page'
b:if cond='data:blog.pageType == &quot;item&quot;'
div id='fb-root'/div id='fb-root'/script(function(d){var js, id = &#39;facebook-jssdk&#39;; if (d.getElementById(id)) {return;}js = d.createElement(&#39;script&#39;); js.id = id; js.async = true;js.src = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&quot;;d.getElementsByTagName(&#39;head&#39;)[0].appendChild(js);}(document));/script
fb:comments colorscheme='light' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='740px'//b:if/div
div class='comments comments-page' id='blogger-comments-page' style='display:none; '
  
    a name='comments'/
    h4
      b:if cond='data:post.numComments == 1'
        1 data:commentLabel/:
      b:else/
        data:post.numComments/ data:commentLabelPlural/:
      /b:if
    /h4

    div class='comments-content'
      b:if cond='data:post.embedCommentForm'
        b:include data='post' name='threaded_comment_js'/
      /b:if
      div id='comment-holder'
         data:post.commentHtml/
          !--INICIO DE LIKE EN COMENTARIOS--
            script type='text/javascript'
var likeurl=&#39;data:blog.url/&#39;;
//![CDATA[
for(i=0;iitems_copy.length;i++){a=document.getElementById('c'+items_copy[i].id);gl="'"+items_copy[i].id+"'";b=a.innerHTML+'div class="like-cm" onmousemove="likecom('+gl+')"div id="like-cm'+items_copy[i].id+'"/div/div';a.innerHTML=b}function likecom(i){var a=document.getElementById('like-cm'+i);if(a){a.innerHTML='iframe style="margin:-6px 0 0 -13px" frameborder="0" allowtransparency="true" scrolling="no" height="20" src="http://www.blogger.com/blog-post-reactions.g?options=[Like]&textColor=%23666666#'+likeurl+i+'" width="100"/iframe'}}
//
/script
         !--FIN--
      /div
    /div

    p class='comment-footer'
      b:if cond='data:post.allowNewComments'
        b:include data='post' name='threaded-comment-form'/
      b:else/
        data:post.noNewCommentsText/
      /b:if
    /p

    b:if cond='data:showCmtPopup'
      div id='comment-popup'
        iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'
        /iframe
      /div
    /b:if

    div id='backlinks-container'
    div expr:id='data:widget.instanceId + &quot;_backlinks-container&quot;'
       b:if cond='data:post.showBacklinks'
         b:include data='post' name='backlinks'/
       /b:if
    /div
    /div
  /div

/center
/div
/b:includable

terminado el paso 1 y el paso 2. guarde los cambios y ahora tendra integrado en su blog la caja de comentarios de Facebook y Blogger, se llegara a tener algun problema haganmelo saber para hacer la respectiva correccion

Blogger , JQuery

6 comentarios:

Retube27 de mayo de 2013, 14:54
Que bueno! Si se añadiera otra pestaña con los comentarios de Google+ ya sería la leche!

Un saludo
ResponderEliminar
Respuestas
Carlos Germán6 de junio de 2013, 10:51
Muy bueno aunque los comentarios de blogger no son muy buenos, yo cambie el de mi blog por los de Disquis y tiene una mejor funcionalidad =D.
ResponderEliminar
Respuestas
Unknown24 de junio de 2013, 3:27
Hola Hannibal. La cuestión apariencia está perfecta. El problema llega al commentar en Facebook.
En algunos post, debajo del check "publicar en facebook" sale un rectángulo amarillo con el mensaje de error "Warning: http://unminutodehumor.blogspot.com.es/2013/06/ejercicio-muy-facil-y-rapido-de.html is unreachable."
Pero esto no parece relevante porqu aún así, el comentario sí que se publica.
Lo importante en mi caso es que puedo comentar como FanPage y veo como se anidan los comentarios pero, al refrescar la página del post, aarecen todos los comentarios excepto los creado por la FanPage.
¿Sabe a qué puede ser debibo?
Por otro lado, me extrña mucho que en el código que propones, no se utilice un id de app de FB. ¿Por qué no? ¿Se podría utilizar?
Gracias y he de decir que es el tutorial que, aunque me funcione como quiero, más claramente está explicado a este respecto.
Saludos
ResponderEliminar
Respuestas

Añadir comentario

social counter

lunes, 27 de mayo de 2013

Intrega en tu Blog las cajas de comentarios de Facebook y de Blogger fácil y rápidamente

6 comentarios:

Guia instructiva Offensive Security en PDF convierte en un White Hacker

Categorias

Blog Archive

Entradas populares