WordPress

Compartiendo experiencias sobre la plataforma CMS más importante del mundo

BuddyPress

El increíble y fabuloso plugin de WordPress para crear redes sociales verticales

¿Cómo crear una RED SOCIAL?

Experiencias, ideas y materiales para llevar adelante tu próximo proyecto de creación de una red social

Mostrando entradas con la etiqueta BuddyPress. Mostrar todas las entradas
Mostrando entradas con la etiqueta BuddyPress. Mostrar todas las entradas

martes, 26 de marzo de 2013

¿Cómo obtener la URL de un avatar en BuddyPress?

Este resumen no está disponible. Haz clic en este enlace para ver la entrada.

viernes, 22 de marzo de 2013

¿Cómo agregar la SideBar en las páginas de actividad individual de BuddyPress?

Si trabajan con BuddyPress, habrán notado que en el tema estándar no disponemos de una SideBar en las páginas individuales de una actividad en particular. Para agregarla, seguimos el siguiente procedimiento (que he descubierto gracias a este post)

1) Vamos a la siguiente carpeta:

/wp-content/plugins/buddypress/bp-themes/bp-default/members/single/activity

2) Editamos el archivo permalink.php. En el siguiente código pueden ver los cambios realizados marcados en color azul:


<?php get_header() ?>

<style>
.activity-content {
 border: 0px !important;
}
</style>

<div id="content">
<div class="padder">

<div class="activity no-ajax">
<?php if ( bp_has_activities( 'display_comments=threaded&include=' . bp_current_action() ) ) : ?>

<ul id="activity-stream" class="activity-list item-list">
<?php while ( bp_activities() ) : bp_the_activity(); ?>

<?php locate_template( array( 'activity/entry.php' ), true ) ?>

<?php endwhile; ?>
</ul>

<?php endif; ?>
</div>

</div><!-- .padder -->
</div><!-- #content -->

<?php locate_template( array( 'sidebar.php' ), true ) ?>

<?php get_footer() ?>


Eso es todo, el resultado es el que se ve en la imagen.



Si además quieren hacer que la página de actividad individual se más ancha, similar al resto de las páginas de  BuddyPress, cambien los siguientes estilos:


body.activity-permalink {
  max-width: 1250px;
}

body#bp-default.activity-permalink #wp-admin-bar .padder {
  max-width: 1250px;
}


Espero les sirva.
Hasta la próxima!

sábado, 27 de octubre de 2012

¿Cómo probar nuestra versión móvil de WordPress con un emulador Android?

Muchos de nosotros, que trabajamos con sitios web en WordPress u otras plataformas, tenemos también versiones de nuestros sitios para dispositivos móviles. A la hora de probar nuestro sitio desde uno de estos dispositivos, una alternativa es usar un emulador.

En este breve artículo voy a describir cómo utilizar el emulador de Android provisto por Google, el cual pueden descargar desde: http://developer.android.com/sdk/index.html


Una vez descargado el SDK, lo instalamos en Windows. Cuando terminamos la instalación, se ejecutará el SDK Manager y obtendremos una pantalla como la siguiente:


Instalamos lo que necesitamos y luego pasamos a ejecutar el emulador. Ejecutamos el AVD Manager y hacemos cilc en New:


Completamos los valores, por ejemplo como se ve en la imagen:


Luego seleccionamos la AVD creada y la iniciamos con el botón Start:



Y obtendremos algo como lo siguiente:


Una vez ahí dentro hacemos lo que queremos. Vamos a probar por ejemplo nuestro sitio móvil desde el navegador:


Y observen aquí el resultado:


A partir de ahora, a hacer volar nuestra imaginación y nuestras necesidades de Testing.
Hasta la próxima!

miércoles, 26 de septiembre de 2012

¿Cómo controlar el spam en BuddyPress? #WordPress

Cuando creamos una red social con BuddyPress, el plugin de WordPress para las redes sociales, uno de los problemas a los que nos enfrentamos es el spam en el registro de usuarios.

Claro: a diferencia de la mayoría de los sitios de WordPress, en BuddyPress tenemos que habilitar el sitio para que cualquier visitante se pueda registrar, y cuántos más sean, más exitosa será nuestra red.

Sin embargo, existen por ahí robots que atacan BuddyPress y comienzan a registrar usuarios. Lo he comprobado en uno de mis sitios, en donde han pasado dos controles que uno podría creer que eran difíciles para un robot:
  • CAPTCHA
  • La activación de usuario por correo electrónico
Y no creas que tu sitio no recibirá ataques. El sólo hecho de usar WordPress, quizá el CMS más popular del mundo, te hace vulnerable, ya que los robots entrenan día y noche para atacar sitios que estén montados sobre esta plataforma.


Buscando alternativas, realmente encontré muchas y todas se complementan. Algunas en particular me asustaron un poco, porque frenan demasiado y no quiero perder registros. Así que decidí optar por la más simple o la que parecía más ingenua...

Preguntarle a un robot algo que no pueda responder...

"¿cuánto es 2+2?"

¿Increible no?

Es que los robots están preparados para completar direcciones de correo, nombres de usuario, CAPTCHA y hasta para activar activar cuentas. Pero no es tan fácil que contesten algo que se te acaba de ocurrir. Es ahí donde recurro al plugin BuddyPress Humanity, tan viejo y desactualizado que WordPress pone una advertencia en su directorio. Este plugin agrega una pregunta en tu página de registro y tu eliges las posibles respuestas:

Opciones de configuración:




Pantalla de registro:


No hay mucho más para decir, por ahora está ayudando bastante. La preguntas la puedes cambiar cuando quieras. Un plugin recomendable.

Enlace: http://wordpress.org/extend/plugins/buddypress-humanity/

Y ustedes,
¿qué estrategias utilizan para controlar el spam de registros en sus sitios WordPress / BuddyPress?

Hasta la próxima!

photo credit: Darwin Bell via photopin cc

sábado, 8 de septiembre de 2012

Error al realizar una publicación en BuddyPress


Supongan que encuentran un error en BuddyPress al tratar de insertar una nueva publicación o comentar una actividad existente como el siguiente:

Error Duplicate entry '23518' for key 'PRIMARY' de la base de datos de WordPress para la consulta INSERT INTO wp_bp_activity ( user_id, component, type, action, content, primary_link, date_recorded, item_id, secondary_item_id, hide_sitewide ) VALUES ( 2, 'activity', 'activity_update', ..

Se trata de un error de clave duplicada. Es fatal porque impide realizar prácticamente cualquier actividad en BuddyPress.

La solución es más que sencilla. Reparar la tabla wp_bp_activity en MySQL.

Espero les sea útil. Hasta la próxima.

viernes, 10 de agosto de 2012

¿Alternativa a Akismet? Spam Destroyer

Este plugin para frenar el spam viene bien recomendado así que lo vamos a probar. Es una alternativa sin costo a Akismet, que además tiene algunas funcionalidades para BuddyPress y BBPress. Y de muy simple instalación. Más información en este enlace:

Spam Destroyer Really Works To Kill WordPress Spam

domingo, 5 de agosto de 2012

¿Cómo desarrollar un plugin para WordPress?

Si trabajas con WordPress sabrás que una de las formas más utilizadas de extender la plataforma es a través de los Plugins. Quizá muchas veces te has encontrado utilizando plugins construidos por terceros, pero nunca te has embarcado en la tarea de desarrollar un plugin. Aunque no lo creas, no es una tarea compleja, si ya posees conocimientos de programación.

En este breve artículo, explicaremos cómo construir uno sencillo. Espero te resulte útil!

imageAlcance de este pequeño plugin

Trabajo en algunos proyectos en WordPress en donde además de permitir el registro de usuarios por el método estándar, también permito que los usuarios ingresen al sistema con sus cuentas de Twitter o Facebook, para lo cual utilizo plugins existentes.

Sin embargo, en algunos casos, estos plugins permiten a los usuarios ingresar al sistema sin especificar su correo electrónico (en realidad eso depende de como los configures).

Lo que vamos a hacer en este breve ejemplo, es construir un plugin que le recomiende a los usuarios que no tengan configurado bien su correo, que lo hagan. Para ello agregaremos un widget en la SideBar con un cartel de advertencia, como el que puede verse la imagen de la derecha

Funcionamiento

Parte 1: verificación del correo del usuario

Nuestro plugin tendrá un funcionamiento sencillo.
Primero crearemos una función para consultar el correo electrónico del usuario. Trabajaremos con dos funciones de WordPress:
  • is_user_logged_in: para verificar si hay un usuario conectado.
  • wp_get_current_user: para obtener la cuenta de correo del usuario conectado.
En nuestro caso, a los usuarios que ingresan usando la autenticación de Twitter o Facebook, se les crea un correo electrónico obligatorio ficticio:
  • Los de Facebook contienen el dominio “unknown.com”
  • Los de Twitter comienzan con el nombre “changeme”
Nuestro algoritmo determinará si el correo posee esas cadenas para decidir si tiene que advertir o no al usuario.


Parte 2: widget

La segunda parte se encargará de mostrar una advertencia al usuario en un widget que podrá agregarse en el SideBar:
image

Además agregará un link que lleve al usuario a la página de configuración de su correo. En nuestro caso, como se trata de una red social vertical creada con el plugin BuddyPress, utilizaremos datos globales de BuddyPress que podemos obtener con la instrucción:

global $bp;

Y en particular la URL del perfil con:

$bp->loggedin_user->domain

¿Cómo se construye el plugin?

Simplemente se crea el código PHP respetando el encabezado especificado por WordPress (el código lo pueden ver en la próxima sección). El archivo puede grabarse como main.php y almacenarse en una carpeta dentro de la carpeta: /wp-content/plugins/. También será necesario almacenar un archivo readme.txt.

Una vez que hayamos almacenado el plugin en la carpeta correspondiente aparecerá en la lista de nuestros plugins inactivos listo para activarlo:

image

Una vez activado, sólo nos queda agregar el widget en la SideBar y ya podemos comenzar a utilizarlo.

image

El código

A continuación les pego el código completo:

<?php

/*
Plugin Name: Autonautas Mail Verification
Plugin URI: http://viviendoenlaeradelaweb20.blogspot.com/
Description: Verifica que el usuario tenga bien configurado su correo. Caso contrario emite una alerta en el SideBar.
Version: 1.0
Author: Juan Pablo Pussacq Laborde
Author URI: http://viviendoenlaeradelaweb20.blogspot.com/
License: GPL2
*/

function autonautas_mail_read () {

    $resultado = "OK";

    // Sólo se controla al usuario conectado
    if ( is_user_logged_in() ) {

        $usuario_actual = wp_get_current_user();
        $correo_actual = $usuario_actual->user_email;

        // Sufijo que tienen los mails de los usuarios registrados con Twitter
        $buscado_t = strpos($correo_actual, "changeme");

        // Sufijo que tienen los mails de los usuarios registrados con Facebook
        $buscado_f = strpos($correo_actual, "unknown.com");

        if ( ($buscado_t !== FALSE) or ($buscado_f !== FALSE) ) {
            $resultado = "MAL";
            }
        }

    return $resultado;
}

add_action('wp_head','autonautas_mail_read');

function autonautas_mail_widget () {

    $estado_correo = autonautas_mail_read ();
  
    if ( $estado_correo !== "OK" ) {

        global $bp; // Datos globales de BuddyPress

        echo "<p></p>";
        echo "<div style='padding: 15px; color: black; border-radius: 3px; background-color: white; border: 7px solid red;' id='autonautas_mail_verification'>";
        echo "<p></p>";
        echo "<center>";
        echo "<h3>Advertencia!!</h3>";
        echo "</center>";
        echo "<p></p>";
        echo "<p>Tu correo electrónico no está configurado. Ante cualquier problema con tu cuenta no podremos contactarte <a href='/2011/11/configura-tu-correo/'>[...]</a></p>";
        echo "<p></p>";
        echo "<p></p>";
        echo "<center>";
        echo "<img src='/wp-content/uploads/2011/08/mensajes.png'></img>";
        echo "<div id='autoayuda' class='activity-list'><div class='activity-header'><a width: 120px ; display: block; ' href='" . $bp->loggedin_user->domain . "settings/'>Configura tu correo</a></div></div>";
        echo "</center>";
        echo "<p></p>";
        echo "<p></p>";
        echo "</div>";
        }
}

wp_register_sidebar_widget('autonautas_mail_verification', 'autonautas_mail_verification', 'autonautas_mail_widget');

?>

Conclusión

Como pueden ver, crear un plugin no es complicado y muchas veces puede ayudarnos con ciertas actividades que no podemos resolver con otros plugins. Espero que les haya servido.

Hasta la próxima!

Enlaces de interés:

lunes, 30 de julio de 2012

Problema con Twit Connect en BuddyPress al cambiar el nombre de usuario en Twitter

El plugin Twit Connect es útil para registrar o conectar usuarios a tu sitio en WordPress a través de tu cuenta de Twitter. Lo he usado durante mucho tiempo con buenos resultados y sin problemas.


Sin embargo existe una situación poco común que se da cuando un usuario cambia el nombre de su cuenta  en Twitter. Una vez que ocurre esto, el plugin sigue funcionando y permitiendo que el usuario ingrese con su cuenta de Twitter, pero se produce un comportamiento no esperado en las siguientes situaciones, al menos en BuddyPress:
  • No se puede utilizar la opción de menciones de BuddyPress cuando agregamos "@" como prefijo del nombre de usuario.
  • No se pueden enviar mensajes privados a ese usuario.
Al verificar los datos en la Base de Datos se puede observar que cuando el usuario cambiar su id de usuario en Twitter, se produce una diferencia de valores entre los campos user_login y user_nicename en la tabla wp_users. Para detectar los usuarios con este tipo de problemas, simplemente ejecutamos esta consulta:

SELECT *
FROM wp_users
WHERE User_login  <> user_nicename

Para resolver el inconveniente, podemos modificar el usuario con el problema, igualando el user_nicename al nuevo nombre de cuenta en BuddyPress.

UPDATE  `NOMBRE_BASE`.`wp_users` 
SET  `user_nicename` =  'NUEVO_NOMBRE_USUARIO_BP' 
WHERE  `wp_users`.`ID` =1430;

(Completar los valores ID y user_nicename según corresponda)

Esto resolverá los problemas en las funciones de menciones y mensajes privados. Sin embargo debemos tener en cuenta que los enlaces del nombre de usuario en las actividades antiguas quedarán erróneos.

Pueden seguir el hilo de este problema en los foros de WordPress en este enlace: http://wordpress.org/support/topic/plugin-twit-connect-user-changed-his-username-on-twitter

Hasta la próxima!

¿Cómo cambiar la imagen del botón de ingreso de Facebook?

Si tu sitio web admite ingreso o registro de usuarios a través de sistemas de autenticación de terceros como Facebook, Twitter, Linkedin o Google, es posible que quieras cambiar la imagen del botón de conexión.

En este artículo hablaremos específicamente del botón de conexión de Facebook. Es posible que el estándar no sea de tu agrado o no este alineado con el diseño gráfico de tu sitio. En la siguiente imagen puedes ver el botón (Facebook Login Button) generado desde esta página: https://developers.facebook.com/docs/reference/plugins/login/




¿Imaginemos que queremos armar un botón distinto, cómo el que se ve en esta imagen?






En algunos sistemas como Facebook, no es tan sencillo de cambiar la imagen mediante CSS, porque el botón termina de cargarse luego de que se apliquen los estilos. Buscando en Google encontré muchos métodos que ya no funcionan y otros que usan JavaScript en el evento windows.onload. Este último no me convenció.

Finalmente encontré una muy buena opción que probé con éxito en WordPress. El artículo que la explica es "Facebook Login Button with Image" del autor Muhammad Hasan Septiadi. El método consiste básicamente en la creación de 3 DIVs:
  • Un DIV contenedor de los otros
  • Un DIV con nuestra imagen
  • Un DIV con el Facebook Login Button, pero transparente
La forma en que está creado el código, hace que parezca que estamos haciendo clic en nuestra imagen, cuando en realidad estamos haciendo clic en el botón de Facebook, pero este no se ve. A continuación transcribo el código propuesto por el autor en su blog:

<div style="position:relative;width:216px;height:72px;" >
<div style="position:absolute;left:0px;top:0px;width:216px;height:72px;z-index:111;">
<img src="yourimage.jpg" style="cursor:pointer" />
</div>
<div style="position:absolute;left:0px;top:0px;width:216px;height:72px;overflow:hidden;z-index:333;opacity:0;filter:alpha(opacity=0);">
<fb:login-button show-faces="true" width="216">----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</fb:login-button>
</div>
</div>

Este código puede ser que necesites modificarlo de acuerdo a tus preferencias y a la imagen que utilices. En mi caso, yo utilizo el plugin WP-FB-AutoConnect en algunos sitios de WordPress. Para aplicar este método dentro de este plugin, una posible opción es editarlo y realizar una simple modificación. Para ello seguir los siguientes pasos:
  1. Ir a la sección de plugins.
  2. Buscar el plugin WP-FB-AutoConnect
  3. Clic en Editar
  4. Editar la página wp-fb-autoconnect/Main.php
  5. Buscar la siguiente línea de código
<?php
$btnTag = "document.write('<fb:login-button v=\"2\" size=\"small\" onlogin=\"$jfb_js_callbackfunc();\">Login with Facebook</fb:login-button>');";
?>

Y reemplazarla por el siguiente código:

<?php
$btnTag = "document.write('<div style=\"position:relative;left:4px;top:-30px;width:180px;height:58px;\" ><div style=\"position:absolute;left:0px;top:0px;width:180px;height:58px;z-index:111;\"><img src=\"TU_IMAGEN\" /></div><div style=\"position:absolute;left:45px;top:10px;width:180px;height:58px;overflow:hidden;z-index:333;opacity:0;filter:alpha(opacity=0);\"><fb:login-button v=\"2\" size=\"large\" onlogin=\"$jfb_js_callbackfunc();\">Login with Facebook</fb:login-button></div></div>');";
?>

Aquí termina, sólo quedan ver los resultados. Espero te sea útil y cualquier duda o método alternativio, no dejes de comentarlo. Hasta la próxima!

viernes, 13 de julio de 2012

¿Cómo crear una red social profesional con BuddyPress y WordPress?

BuddyPress es mi herramienta preferida para crear redes sociales. Si la red social es profesional, quizá necesitemos funcionalidad específica.

Les dejo entonces este enlace con los mejores plugins para redes profesionales. Muy recomendado:

How to Create a Professional Networking Site With WordPress and BuddyPress

martes, 3 de julio de 2012

Más ejemplos de redes sociales con BuddyPress

Como ustedes saben, BuddyPress es mi software de redes sociales verticales favorito. Sigue creciendo y manteniendo su nivel. Por supuesto que lo ayuda estar montado sobre el monstruo de WordPress.

Cada vez más proyectos lo utilizan y nos sirven de inspiración. Les dejo este enlace con algunos de ellos:

13 Shining Examples of BuddyPress in the Wild

lunes, 25 de junio de 2012

¿Intranets con WordPress?

Claro que podemos crear una intranet con Wordpress. Recordemos que Wordpress no es una herramienta de bloging, sino un CMS, sistema de gestión de contenidos.

En el siguiente enlace nos proponen un conjunto de plugins, entre los que se destaca BuddyPress mi plugin prederido para redes sociales verticales, que en conjunto con otros plugins para gestión de documentos, proyectos y wikis hacen de WordPress una plataforma más que interesante para Intranets.

Les recomiendo este artículo:
Planning and Building an Intranet with WordPress

lunes, 21 de mayo de 2012

Como redireccionar a los usuarios de BuddyPress luego del ingreso

Vean este artículo con dos plugins que nos resuelven esta tarea fácilmente:

Daily Tip: Redirect BuddyPress Users After Login

Tengan en cuenta que si requieren una condición distinta, el código de estos plugins es sencillo de entender. Nos vemos!

miércoles, 5 de octubre de 2011

#BuddyPress Data Model

miércoles, 18 de mayo de 2011

Roadmap #BuddyPress v 1.3 y 1.4+

Transcribo esta importante información desde http://buddypress.org/about/roadmap/:

The roadmap is a list of features planned for each future release of BuddyPress. When a feature has been completed it will be crossed off this list.

You can keep up with the latest features as they are built by using the bleeding edge version of BuddyPress via SVN. This is not recommended for production sites.

The roadmap is currently being worked on and will result in a second community vote. Please see the possible features below.

1.3
  • WordPress 3.1 support
  • Better XProfile field management – reorder groups and fields between groups
  • Basic profile privacy – hide from public / only friends
  • Install / Upgrade wizard
  • Better integration with WordPress pages / $wp_query
Potential Future BuddyPress Features (1.4+)
  • A quick blog post form via the theme. (try plugin: BuddyPress QuickPress)
  • Privacy controls (try plugin: bp-authz)
  • Global content tagging
  • Inappropriate content flagging
  • Bulk accept/reject friendship requests
  • Grouping of similar activity stream items
  • Ability to block all communication from a user
  • Option to receive forum post notifications via email
  • Message file attachments
  • Structured profile fields (templates for address / phone number)
  • Profile field specific searching (try plugin: BP Member Filter)
  • AJAX live updating of site wide activity stream
  • Editable blog avatars
  • Import/Export of all BuddyPress user data
  • Integration of the open stack
  • Group pages and file attachments. (try plugin: BP Group Docs)
  • Bulk accept/reject group invites
  • Archiving of messages to an archive folder

lunes, 16 de mayo de 2011

sábado, 23 de abril de 2011

jueves, 14 de abril de 2011

Caracteres extraños en el #RSS de #BuddyPress

BuddyPress RSS Character Fixer es la respuesta. Descargalo desde http://buddypress.org/community/groups/bp-rss-character-fixer/.

¿Cómo instalar #BuddyPress en Windows? (de #WordPress)

image

1) Instalá WordPress. Si no sabés cómo hacerlo, lee esto: http://viviendoenlaeradelaweb20.blogspot.com/2011/04/como-instalar-wordpress-en-windows.html

2) Instalá y activá el plugin BuddyPress

3) Ajustá los enlaces permanenetes. Podés hacerlo con la opción “Numérico” a modo de ejemplo:

image

4) Instalá un tema compatible con BuddyPress, por ejemplo “BuddyPress Default”.

5) Instalá el paquete de idioma de BuddyPress en español. Los podés descargar desde este enlace: http://www.buddypress-es.com/noticias/descargas/. Sólo tenés que guardar el archivo .mo en la siguiente carpeta: /wp-content/plugins/buddypress/bp-languages/.

6) Para habilitar la posibilidad de que los usuarios puedan crear cuentas en tu sitio, debes ir a Ajustes / General y activar la casilla: “cualquiera puede registrarse”.

image

7) Vas a necesitar poder activar las cuentas de los usuarios. Una manera sencilla para hacerlo en tu servidor local es activar un plugin que permite utilizar tu cuenta de Gmail como servidor de correo: HGK SMTP. La configuración se hace con los valores predeterminados, salvo los de tu cuenta de correo y puedes enviar un mail de prueba para ver que todo funcione correctamente.

Con esto ya puedes empezar a disfrutar. Hay muchos plugins adicionales, pero eso es para otro artículo.

Hasta la próxima!

sábado, 9 de abril de 2011

10 sitios increíbles de #BuddyPress (#redsocial)

Desde el sitio de WPMU.Org me entero de una lista de 10 interesantes sitios de BudyyPress que nos pueden servir de inspiración a la hora de crear nuestra red social.
Pueden leer el artículo original en: http://wpmu.org/10-of-the-latest-and-greatest-inspirational-buddypress-sites/.
Aquí un ejemplo:
helloecoliving