Pequeña introducción:
He visto muchos métodos usando servicios de terceros, como add-this, shareholic, etc. pero casi ninguno “correcto”, usando las id de aplicaciones que te da el mismo Facebook. En fin, voy a decirles una forma un poco avanzada y “sexy” de integrar el botón “Like” en tu foro, digo avanzada no porque sea muy complicado sino porque para obtener el id de una aplicación necesitas activar tu cuenta con una tarjeta de crédito o un celular, y eso ya es adentrarse más seriamente en el desarrollo de aplicaciones con Facebook como plataforma.
La teoría
Ese lugar que elegí para poner los botones de “like & send” está estratégicamente pensado, pongan atención que esto no lo enseñan en la escuela.
- Uno como administrador debe pensar como el usuario, al usuario promedio no le gusta navegar por toda la página buscando el botón para “compartir”, a él le gustan las cosas rápido y al alcance de la mano.
- El cuadro de búsqueda que debería ir a un del botón “responder” nadie lo usa, al menos en viewtopic. El usuario cuando llega a usar el buscador (xD) lo hace sobre el header, viewforum, o desde el index, pero muy rara vez sobre viewtopic, y fue por eso que quite el cuadro de búsqueda en viewtopic.
- Otra de las razones por la que quite la búsqueda en viewtopic, fue por esto:
La practica
Para empezar necesitas registrar una nueva aplicación en https://developers.facebook.com/apps y por supuesto tener activada tu cuenta.
Ya que tengamos la aplicación creada y lista.
Lo que necesitamos es el id que por obvias razones de seguridad está oculto con color rojo. Ahora ya pueden cerrar Facebook, pero no olviden apuntar ese número en algún lugar, que es el que importa.
Ahora vamos a el archivo overall_header.html de nuestro tema, justo después de donde se abre la etiqueta body, ponemos lo siguiente:
Código: Seleccionar todo
<div id="fb-root"></div>
<script src="http://connect.facebook.net/es_ES/all.js"></script>
<script>
FB.init({
appId : 'XXXXXX',
status : true,
cookie : true,
xfbml : true,
});
</script>
Abrimos nuestro archivo viewtopic_body.html, buscamos la línea
<div class="buttons">
Cuidado que en ese archivo hay dos líneas iguales, una son los botones de abajo y otra las de arriba, bueno justo donde esa etiqueta div se cierra agregamos:
Código: Seleccionar todo
<div class="fb-like" data-send="true" data-width="450" data-show-faces="false" data-font="trebuchet ms"></div>
class=”fb-like” indica al script que cargamos en overall_header.html (recuerdan?) que la etiqueta div se va a convertir en un botón like.
data-send=”true” indica que aparte del botón like, también aparecerá el botón “send”.
data-width=”450” esto no lo tengo que explicar, pero se mide en pixeles.
data-show-faces=”false” yo desactive este parámetro por privacidad para los usuarios, lo que hace es mostrar la imagen de las personas que previamente dieron like a la pagina actual.
data-font=”trebuchet ms” la fuente en la que se mostraran los botones, amo esta fuente, como dato curioso, el autor de trebuchet ms también fue el creador de la comic sans.
En https://developers.facebook.com/docs/re ... gins/like/ encontraran mas documentación sobre los parámetros disponibles.
Ahora quedo algo asi:
Código: Seleccionar todo
<div class="buttons">
<!-- IF not S_IS_BOT and S_DISPLAY_REPLY_INFO -->
<div class="<!-- IF S_IS_LOCKED -->locked-icon<!-- ELSE -->reply-icon<!-- ENDIF -->"><a href="{U_POST_REPLY_TOPIC}" title="<!-- IF S_IS_LOCKED -->{L_TOPIC_LOCKED}<!-- ELSE -->{L_POST_REPLY}<!-- ENDIF -->"><span></span><!-- IF S_IS_LOCKED -->{L_TOPIC_LOCKED_SHORT}<!-- ELSE -->{L_POST_REPLY}<!-- ENDIF --></a></div>
<!-- ENDIF -->
<div class="fb-like" data-send="true" data-width="450" data-show-faces="false" data-font="trebuchet ms"></div>
</div>
<!-- IF S_DISPLAY_SEARCHBOX -->
<div class="search-box">
<form method="get" id="topic-search" action="{S_SEARCHBOX_ACTION}">
<fieldset>
<input class="inputbox search tiny" type="text" name="keywords" id="search_keywords" size="20" value="{L_SEARCH_TOPIC}" onclick="if(this.value=='{LA_SEARCH_TOPIC}')this.value='';" onblur="if(this.value=='')this.value='{LA_SEARCH_TOPIC}';" />
<input class="button2" type="submit" value="{L_SEARCH}" />
{S_SEARCH_LOCAL_HIDDEN_FIELDS}
</fieldset>
</form>
</div>
<!-- ENDIF -->
Código: Seleccionar todo
<div class="buttons">
<!-- IF not S_IS_BOT and S_DISPLAY_REPLY_INFO -->
<div class="<!-- IF S_IS_LOCKED -->locked-icon<!-- ELSE -->reply-icon<!-- ENDIF -->"><a href="{U_POST_REPLY_TOPIC}" title="<!-- IF S_IS_LOCKED -->{L_TOPIC_LOCKED}<!-- ELSE -->{L_POST_REPLY}<!-- ENDIF -->"><span></span><!-- IF S_IS_LOCKED -->{L_TOPIC_LOCKED_SHORT}<!-- ELSE -->{L_POST_REPLY}<!-- ENDIF --></a></div>
<!-- ENDIF -->
<div class="fb-like" data-send="true" data-width="450" data-show-faces="false" data-font="trebuchet ms"></div>
</div>
El resultado final
Palabras para finalizar
Esto es a manera de ejemplo de lo que se puede hacer, ya dependerá de ustedes integrar Twitter, tmblr, tuenti, g+ y por que no? El botón de taringa también xD
Piensen, inventen, sean ingeniosos, y no dependan de terceros, si pueden háganlo como los machos, a código puro y duro, y con id propios.
Nos vemos en otros experimentos.