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.

Como vincular tu foro phpBB3 con FacebookTema Solucionado

Soporte de MODs para phpBB 3.0.x
Dudas sobre AutoMOD aquí por favor.
Cerrado
Elpingo
Asiduo/a
Mensajes: 184
Registrado: 04 Nov 2009, 21:03

Como vincular tu foro phpBB3 con Facebook  Tema Solucionado

#1

Mensaje por Elpingo »

A pedido de algunos usuarios, voy a mostrar una simple guía para vincular Facebook con tu sitio.

Antes que nada voy a explicar algo muy importante para que no tengan sorpresas: Existe un Mod que se llama Facebook Connect, el cual es absolutamente desaconsejable instalar en un foro activo, ya que ocasiona conflicto con la última versión 3.0.7-PL1 de phpBB3. En mi caso no me dejaba ingresar al ACP, consultando el soporte del Mod en phpbb.com me doy con que son varios los que tuvieron el mismo problema. Hay dos formas de solucionarlo, una es tener instalada y activada otra plantilla sin el código de Facebook y cuando nos identificamos, vamos al Panel de Usuario y en Preferencias de Foro cambiamos a esta plantilla para ingresar al ACP; la otra y más aconsejable, es instalar el Support Toolkit (STK), en la carpeta contrib encontrarán la opción de agregar un link en la página principal y en el ACP, obviamente el link de la página principal lo verá solamente el administrador, entonces hacemos uso de esta opción implementando el link. Si no podemos ingresar al ACP, hacemos clic en el link de Support Toolkit y desde allí accedemos al ACP.

Para descargar el Support Toolkit visita el siguiente enlace: http://www.phpbb.com/support/stk/
Nota: El Support Toolkit es un kit de herramientas que sirve para hacer mantenimiento y/o reparaciones de nuestro foro ante cualquier eventualidad. (Que yo sepa, no hay traducción al español de este mod)

Bueno, hechas las aclaraciones del caso vamos al grano:

Para los que no saben donde obtener el código, deben iniciar sesión en Facebook e ir al pié de página y hacer clic donde dice "Desarrolladores" , luego hacen clic en el botón verde donde dice "Add Facebook to my site" en esta página encuentran las sugerencias y lo que puedes incorporar a tu sitio desde las aplicaciones de Facebook, hacen clic donde dice "register your application" e ingresarán a la página donde deberán ingresar el nombre del sitio, la URL del sitio y seleccionar el idioma, con esto obtendrán la App ID y App Secret (El ID unico y la clave secreta) más abajo verán un código de ejemplo, debajo de este código verán los link social plugins like the Like button ingresando en algunos de estos link podrán generar el código de acuerdo a la aplicación que quieran vincular.

En este caso voy a explicar como incorporar el botón de "Conectar a Facebook" y el botón de "Compartir en Facebook" utilizando el JavaScript SDK que proporciona facebook para dichas aplicaciones. (Actualmente Facebook a incorporado los iframe como una alternativa más sencilla, para los que no saben mucho de programación.)

Cuando obtenemos los códigos, uno de ellos es el que interpreta el lenguaje JavaScript SDK de facebook, este código debemos pegarlo en el header o el body una vez por página, osea que si quieres mostrar el botón de "conectar" en paginas diferentes, deberás pegar este código en cada una de las paginas.
En phpBB3 esto se hace muy simple ya que solo debemos pegarlo en el overall_header.html

Abrir: styles/prosilver/template/overall_header.html
Buscar

Código: Seleccionar todo

<body id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">
Agregar despues: (CODIGO DE EJEMPLO) - Aqui deberán pegar el codigo que obtuvieron con su llave y clave secreta.

Código: Seleccionar todo

<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/es_LA" type="text/javascript"></script><script type="text/javascript">FB.init("e4bafffcccb27a56c085d1a1bc275bb2");</script>
Aquí empezamos a jugar con las opciones para mostrar el botón, si lo quieren mostrar al lado del botón "Identificarse" en el login o en la cabecera del foro, tengan en cuenta que pueden incorporar varias aplicaciones del facebook como mostrar la foto del perfil, los comentarios, fans, etc...

Para mostrar la foto del perfil en la cabecera
En el overall_header.html buscar

Código: Seleccionar todo

<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
			<div id="search-box">
Agregar después: (CÓDIGO DE EJEMPLO)

Código: Seleccionar todo

<fb:profile-pic uid="loggedinuser" size="small" facebook-logo="true"></fb:profile-pic>
Para mostrar el boton "Conectar" en la cabecera
En el overall_header.html buscar

Código: Seleccionar todo

<li class="icon-logout"><a href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}" accesskey="x">{L_LOGIN_LOGOUT}</a></li>
Agregar después: (CÓDIGO DE EJEMPLO)

Código: Seleccionar todo

<li><fb:login-button v="2" size="small" onlogin="window.location.reload(true);">Conectar a Facebook</fb:login-button></li>
Aqui tienen una captura de como se vería:
Imagen

Para mostrar el boton en el login
Abrir: styles/prosilver/template/login_body.html

Buscar:

Código: Seleccionar todo

<dd>{S_HIDDEN_FIELDS}<input type="submit" name="login" tabindex="6" value="{L_LOGIN}" class="button1" />
Agregar en la misma linea a continuación: (CÓDIGO DE EJEMPLO)

Código: Seleccionar todo

<span style="margin-left:5px"><fb:login-button v="2" size="small" onlogin="window.location.reload(true);">Conectar a Facebook</fb:login-button></span>
Ahora vamos con el botón de "Compartir en Facebook" que es el más importante puesto que podemos obtener tráfico a nuestro sitio.

Abrir styles/prosilver/template/viewtopic_body.html
Buscar:

Código: Seleccionar todo

<!-- IF PAGINATION or TOTAL_POSTS -->
		<div class="pagination">
Agregar después: (CÓDIGO DE EJEMPLO)

Código: Seleccionar todo

<script type="text/javascript">
function callPublish(msg, attachment, action_link) {
  FB.ensureInit(function () {
    FB.Connect.streamPublish('', attachment, action_link);
  });
}</script>
        <input type="button" onclick="callPublish('',{'name':'{TOPIC_TITLE}','href':'{U_VIEW_TOPIC}','description':'Crakinet! - Comparte Inspiración...! - Publica tu post y compartelo en Facebook','media':[{'type':'image','src':'http://crakinet.com/img/crakinet-isologo-16.gif','href':'http://crakinet.com/forum/'}]},[{'text':'Registrate en Crakinet!','href':'http://crakinet.com/forum/ucp.php?mode=register&sid=93a5e6dede027bf9265851401d6f3ba9'}]);return false;" value="Compartir en Facebook" style=" background-color:#4F6AA3; font-weight:bold; color:#FFF; margin-top:5px" />
        &bull;
ATENCIÓN: Si examinan bien el código anterior verán que en una de las lineas, después de: onclick="callPublish('',{'name':' dice {TOPIC_TITLE} y a continuación después de ','href':' dice {U_VIEW_TOPIC} este es todo el secreto para que el titulo del post y el respectivo link se muestren automáticamente en el Facebook.
Cuando generan el código en facebook, donde dice "name" tienen el nombre de su sitio y donde dice "href" la url hacia su sitio, entonces cambiamos el nombre del sitio por {TOPIC_TITLE} y la url por {U_VIEW_TOPIC} de esta manera se genera dinámicamente el titulo del post con el link.

Recuerden que el usuario o visitante cuando hace clic en "Compartir" tendrá la opción de agregar un comentario, por esta razón nos puede resultar de gran utilidad este boton ya que podremos conseguir mayor visita a nuestro sitio.

En la siguiente imagen pueden ver como quedaría:
Imagen

Lo último y algo muy importante: Al momento de actualizar el foro de forma automática, puede ocurrir que nos indique un error en las plantillas, esto se deberá al código de Facebook, por lo tanto tendrán que borrar este código, actualizar y luego volver a pegar. Tengan en cuenta que aquí no se ha instalado ningún mod, simplemente pegamos un código correspondiente a una aplicación externa; y si optan por mostrar el boton en la cabecera, será más fácil realizar esta tarea, ya que solo abriremos el overall_header.html y el viewtopic_body.html

Esta aplicación la pueden ver funcionando en http://crakinet.com/forum/

Extra
Si quieren mostrar el boton de facebook solo a los usuarios registrados deben pegar el código de la siguiente forma:

Código: Seleccionar todo

<!-- IF S_USER_LOGGED_IN -->
    Aqui el código
<!-- ENDIF -->

Perdón a los usuarios de Subsilver, pero al momento de hacer este post no disponía de la plantilla. Si alguien puede hacer la contribución, los usuarios de subsilver se lo agradecerán!!!

Esto es todo y espero les sirva!

Saludos! :ok:

Cerrado

Volver a “Soporte de MODs”