Recordad que para pedir soporte alguno, debéis facilitar los datos de soporte oportunos por favor, mirad aquí y leer las Normas generales del foro, esto nos servirá de ayuda para dar el mejor soporte..

Gracias.

La Administración de phpBB España.

Sexy integración del botón Me Gusta en tu foroTema Solucionado

Soporte de MODs para phpBB 3.0.x
Dudas sobre AutoMOD aquí por favor.
Cerrado
Avatar de Usuario
vhs2671
Observador/a
Mensajes: 12
Registrado: 05 Oct 2011, 06:47
Edad: 32

Sexy integración del botón Me Gusta en tu foro  Tema Solucionado

#1

Mensaje por vhs2671 »

Este será el resultado:

Imagen

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:
Imagen

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>
Sustituimos las XXXXXX por el ID que estaba tapado con el rectángulo rojo, recuerdan. Lo pusimos en overall_header.html por simples cuestiones de comodidad para futuros experimentos con el API de Facebook.

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>
Yo uso esta forma y no XFBML por que al usar HTML5 la validación de W3C no se ve afectada, que si usáramos un marcado extraño de Facebook, los parámetros son los siguientes.

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 -->
Eliminamos toda la parte del <!-- IF S_DISPLAY_SEARCHBOX --> para que no aparezca el cuadro de búsqueda en viewtopic y que además no haya conflicto CSS como ya lo explique claramente con una imagen, y nos queda 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>
Esto es para que los botones aparezcan arriba, para abajo es igual, localizar la etiqueta div con clase “buttons” y agregar la etiqueta div con clase “fb-like”.

El resultado final

Imagen

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. :cerveza:
No tengo un sitio web por ahora, pero algún día tendré uno, y si estas agradecido con mis aportes, visítalo!!!
:)

Cerrado

Volver a “Soporte de MODs”