Jump to content
Alucard

[MOD] Comentarios de Facebook

Recommended Posts

Hoy les traigo este mini-mod a pedido de @Rengo, lo que hace es integrar los comentarios de Facebook a nuestro sitio.

 

Características: 

  • Moderar comentarios
  • Si es visitante se mostraran los de FB por defecto

 

En m.post_comments.tpl agregar arriba de todo:

<script type="text/javascript"> {literal}
$(document).ready(function(){
    $("#comentarios_web").on( "click", function() {
      $('#post-comentarios_fb').hide();
      $('#post-comentarios').show();
     });
    $("#comentarios_fb").on( "click", function() {
      $('#post-comentarios_fb').show();
      $('#post-comentarios').hide();
    });
  });
{/literal} </script>
<div class="commentsbas">
    <button type="button" id="comentarios_web" class="basbutton">Comentarios {$tsConfig.titulo} <span >{$tsPost.post_comments}</span></button>
    <button type="button" id="comentarios_fb" class="basbutton">Comentarios Facebook <span class="fb-comments-count" data-href="{$tsConfig.url}/posts/{$tsPost.categoria.c_seo}/{$tsPost.post_id}/{$tsPost.post_title|seo}.html"></span></button> 
    <div id="post-comentarios_fb" {if $tsUser->is_member}style="display:none"{/if}>
        <div class="fb-comments" data-href="{$tsConfig.url}/posts/{$tsPost.categoria.c_seo}/{$tsPost.post_id}/{$tsPost.post_title|seo}.html" data-numposts="10" data-width="840" data-order-by="reverse_time" data-colorscheme="light"></div>
    </div>
</div>

 

Abajo busca:

<div id="post-comentarios">

 

Y lo remplazas por:

<div id="post-comentarios" {if !$tsUser->is_member}style="display:none"{/if}>

 

En una hoja de estilos (como estilo.css) agrega al final:

.commentsbas {
    float: right;
    width: 835px;
    overflow: hidden;
    margin-top: 15px;
}
.basbutton {
    float: left;
    width: 50%;
    color: #FFF;
    display: block;
    font-weight: bold;
    line-height: 1.2;
    padding: 14px;
    text-align: center;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    border-radius: 0;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
}
#comentarios_web {
    border-top: 6px solid #197FB3;
    background: #1593FF;
}
#comentarios_fb {
    border-top: 6px solid #555;
    background: #3B5998;
}
.basbutton span {
    border-radius: 3px;
    color: #ddd;
    display: inline;
    font-size: 0.9em;
    padding: 6px 11px;
    position: relative;
}
#comentarios_web span {
    background-color: #0D79D5;
}
#comentarios_fb span {
    background-color: #5872a7;
    padding: 6px 6px!important;
}

Diseñado para el tema default, es posible que tengan que editar un poco de css

 

 

Para moderar los comentarios existen dos formas, elije la que sea de tu agrado.

 

Forma 1 (Meta tag):


En main_header.tpl dentro de <head> agregaremos:

<meta property="fb:admins" content="TU_FACEBOOK_USER_ID"/>

Remplazamos TU_FACEBOOK_USER_ID por nuestro id de usuario en facebook, el id yo lo saco del código fuente del perfil pero existen paginas como esta que solo introduces la url del perfil y te da el id.

 

Esta etiqueta se puede repetir cuantas veces quieran y agregar a todo su staff...
Ejem:

<meta property="fb:admins" content="TU_FACEBOOK_USER_ID_admin"/>
<meta property="fb:admins" content="TU_FACEBOOK_USER_ID_mod"/>

etc...

 

Forma 2 (Facebook App): 
Vamos a Iniciar sesión en Facebook | Facebook y creamos una nueva app para nuestro sitio (si ya tienes una creada solo necesitaremos el ID de la app)

 

En main_header.tpl dentro de <head> agregaremos:

<meta property="fb:app_id" content="TU_APP_ID" />

Y remplazamos TU_APP_ID por tu ID de tu app.

 

Capturas:

ysTIBPj.png

3IUH7bQ.png

 

u4TD4LY.png

 

Demo

 

Hasta otro aporte :D 

Editado por Basdower
  • Me gusta 10

Compartir este post


Enlace al post
Compartir en otros sitios

Eres mi ídolo :) +1

 

jaja por alguna razón misteriosa y siniestra no me funcionó :P ,todo parece estar bien pero al hacer click no carga los comments del post ni de face :)

Editado por KillerJohn

Compartir este post


Enlace al post
Compartir en otros sitios
hace 1 hora, KillerJohn dijo:

Eres mi ídolo :) +1

 

jaja por alguna razón misteriosa y siniestra no me funcionó :P ,todo parece estar bien pero al hacer click no carga los comments del post ni de face :)

Lo mas seguro es que tu tema no tenga la id post-comentarios, esta id viene en el tema por defecto y la mayoria de los temas la conservan. Solo tendrias que cabiar post-comentarios por la clase o id correspondiente a tu tema.

 

Saludos

Compartir este post


Enlace al post
Compartir en otros sitios
hace 22 minutos, albert2227 dijo:

muy bueno, solo una duda,  ¿las notificaciones de los comentarios se ven en el panel del user???

No es posible agregar las notificaciones de fb :( 

Compartir este post


Enlace al post
Compartir en otros sitios
hace 9 minutos, Basdower dijo:

No es posible agregar las notificaciones de fb :( 

medio lo probe y se ve bien, lo que deberían explicar es como sacar la API de la app de facebook

Compartir este post


Enlace al post
Compartir en otros sitios
1 hour ago, albert2227 dijo:

muy bueno, solo una duda,  ¿las notificaciones de los comentarios se ven en el panel del user???

 

Si tenes app te llega notificaciones en el facebook ;)

Compartir este post


Enlace al post
Compartir en otros sitios
hace 1 hora, Basdower dijo:

Lo mas seguro es que tu tema no tenga la id post-comentarios, esta id viene en el tema por defecto y la mayoria de los temas la conservan. Solo tendrias que cabiar post-comentarios por la clase o id correspondiente a tu tema.

 

Saludos

gLzDw.gif

Compartir este post


Enlace al post
Compartir en otros sitios

Registra una cuenta o conéctate para comentar

Debes ser un miembro de la comunidad para dejar un comentario


  • Similar Content

    • Por unfernacho
      Hola amigos alguien podría ayudarme a adaptar este mod para que solo puedan utilizarlo usuarios de determinados rangos? el mod es el siguiente:
      Lo que quería es que en la creación de un rango esté la opción de si los usuarios de ese rango pueden publicar un vídeo en su perfil, el mod que siga siendo el mismo solo que tenga esa opción  alguien podría? espero sus respuestas!!
       
    • Por Miguel92
      Bueno les presento un complemento que lo tengo en demo32.hol.es, lo hice porque el panel de la izquierda era muy tosco y feo así que decidí cambiarlo por el de la derecha si alguien quiere este panel, se los pasaré...lo hago así porque no se si les gustará o si lo usarán o no!
       

       
      Para ello deben tener el conjunto de Glyphicon Halflings aunque también se los dejaré por si acaso!
       
      Si la imagen no se ve haz clic aquí
      Después le haré el mod para que el usuario elija la imagen del fondo desde su cuenta!...
    • Por Miguel92
      Hola, este es un mod/mini-mod/complemento que aplica un background solo en el perfil... he tratado de hacerlo con home, fotos, tops, etc. desde la cuenta, en teoría lo que quería hacer es que los usuarios eligieran las imágenes que querían poner para las secciones ya mencionadas, pero solo logré para el perfil... Si el mod ya existía pido perdón, porque no lo he visto
       
      1) Ejecutar esta consulta
      ALTER TABLE `u_perfil` ADD `p_fondo` VARCHAR(200) NOT NULL;  2) Ir a c.cuenta.php y buscar 
      function loadHeadInfo($user_id){         global $tsUser, $tsCore;         // INFORMACION GENERAL y dentro de esta función buscamos 
      p.p_socials, p.p_empresa, y agregar a lado de esto
      p.p_fondo,  Luego buscar más abajo
      }         // COMPROBAR PORCENTAJE         $total = array(5,8,9,8,9); // CAMPOS EN CADA CATEGORIA         $tid = $save - 1; y arriba agregamos
                  case 9:                 // IN DB                 $perfilData = array(                     'fondo' => $tsCore->setSecure($_POST['fondo']), //Este es para el perfil                 );             break;  
      3) Vamos a estilos.css y en body dentro de las llaves {...} agregaremos esto
          background-position: center center;     background-repeat: no-repeat;     background-attachment: fixed;     background-size: cover;  
      4) Luego buscar tuTheme/templates/t.cuenta.tpl y debajo de 
      <li><a onclick="cuenta.chgtab(this)">Cambiar Nick</a></li> agregamos
      <li><a onclick="cuenta.chgtab(this)">Fondo</a></li> un poco más abajo debajo de
      {include file='modules/m.cuenta_nick.tpl'} agregamos
      {include file='modules/m.cuenta_fondo.tpl'}  
      5) Crearemos el archivo m.cuenta_fondo.tpl y la colocaremos en modules
      <div class="content-tabs fondo" style="display:none">     <fieldset>     <div class="alert-cuenta cuenta-9"></div>              <div class="field" style="padding: 5px 0">             <label for="fondo" style="display: inline-block;">Fondo del Perfil:</label>             <input type="text" value="{$tsPerfil.p_fondo}" maxlength="200" name="fondo" id="fondo" class="text cuenta-save-9" style="width:65%; display: inline-block;">         </div>    </fieldset>                   <div class="buttons">             <input type="button" value="Guardar" onclick="cuenta.save(9)" class="mBtn btnOk"/>         </div>                                      <div class="clearfix"></div> </div>  
      6) Último paso vamos a templates/sections/main_header.tpl y buscamos
      </head> <body> y arriba agregamos
      {literal} <style>     body {         background-image: url({/literal}{$tsInfo.p_fondo}{literal});     } </style> {/literal} RESULTADO FINAL:

       
       
      Para evitar las puntas blancas busquen en estilos.css
       /****** Bordes Redondos ******/  debajo agregan ↓ ↓ ↓ 
      .rtop { border-radius: 11px 11px 0 0; } .rbott { border-radius: 0 0 11px 11px; }  y listo quedará más lindo
      Para el fondo con opaco → ir a sections/main_header.tpl y buscar <body> debajo pegamos
      <div id="background_transparent"></div> y en estilo.css debajo de body { ... } pegamos
      Fondo 1
      #background_transparent {     background-color: rgba(255,255,255,.6);     position: fixed;     height: 100%;     top: 0;     width: 100%;     z-index: -1; } Fondo 2
      #background_transparent {     background-color: rgba(0,0,0,.8);     position: fixed;     height: 100%;     top: 0;     width: 100%;     z-index: -1; } Fondo1                                                           Fondo2

    • Por unfernacho
      Bueno el mod consistiría en que el usuario pueda agrandar el tamaño de la letra a su vista, por ejemplo la fuente por default es 13px, que el usuario pueda agrandarla hasta 22px que es un tamaño que ya sin anteojos ya se podría leer fácilmente digamos, entonces a el usuario le aparezcan 2 botones por ejemplo [ - ] [ + ] y vaya subiendo y bajando el tamaño de la letra según los clicks del usuario por ejemplo cuando el usuario empiece a clieckear el botón [ + ] vaya subiendo el tamaño de la letra de esta forma: (13px por default)(16px 1 click)(18px 2 clicks)(21px 3 clicks)(24px 4 clicks), luego de bajada lo mismo hasta que se estanque en 13px que es el tamaño por default.
       
      alguien podría lograr hacerlo? espero sus respuestas!!! gracias!
       
    • Por unfernacho
      Bueno antes hice un tema pidiendo si alguien podía adaptar un mod, pero ahora creo que ya se como hacer para que esto funcione, pero no se donde agregarlo.
      El mod es el siguiente:
      Lo que quiero hacer es que el icono aparte de que aparezca al lado del nombre en el perfil también aparezca dentro del post y al pasar el ratón por arriba del nombre como se muestra en estas imagenes:
      ASI SE VE EL MOD ORIGINAL

      LO QUE QUIERO ES AGREGAR ESE ICONO EN ESTAS PARTES DE LA WEB

       

       
      Entonces lo que creo que hay que hacer basándome en el mod original es agregar el u.user_vips, al PHP correspondiente y el {if $tsInfo.user_vips} al lado del NICK, lo que no se es en que archivos se encuentran en que php se agrega el u.user_vips, y en que parte, y en que archivo se agrega el info.user_vips, alguno podría ayudarme? gracias!
      @Kmario19 @Vellenger necesito su ayuda 
  • Navegando Recientemente   0 miembros

    No registered users viewing this page.

×