No voy hablar del uso de la aplicación en si misma, ya hay cientos de entradas en Internet sobre el uso de la app, el éxito es notable y ha creado una verdadera legión de fans.

Lo que vamos a ver es la manera de integrar instagram con wordpress. De momento, el repositorio de plugins de wordpress contiene un reducido número de plugins . Los hemos estado analizando para ver cual de ellos se adaptaba mejor a nuestras necesidades. Lo que buscábamos era un plugin que nos dejara mostrar nuestras imágenes de instagram  en cualquier parte de nuestra web, ya sea en páginas,  post  o en el sidebar.

De todos los plugin analizados, el mejor es sin duda Instapress , porque además de mostrar las galerías en cualquier parte de la web, tiene varias opciones que nos permitirán mostrar el contenido de diferente manera. Con Instapress podemos mostrar las imágenes de nuestra cuenta o la del usuario que deseemos, un follower, las imágenes de la categoría popular o quizás una de las cosas más interesantes, mostrar imágenes según el tag  (hashtag) que le marquemos en la configuración. Esto es muy interesante desde el punto de vista de la temática de nuestra web.

Una vez instalado el plugin , lo activamos. Vamos a  Ajustes en el Admin Panel y selecconamos Instapress. Lo primero que debemos hacer es introducir nuestro usuario y password de nuestra cuenta de Instagram. El resto de funciones se pueden dejar de momento sin seleccionar.

Debo decir que en la primera instalación del plugin, en una versión actualizada de wp pero con un theme algo desfasado, todo ha ido correcto, excepto la opción del plugin que al clickar sobre cada imagen se muestra con el efecto “fancybox” .  Aquí me ha fallado, y al seleccionar en cada imagen direccionaba hacia la url de la imagen. Como no podía actualizar el theme de esa web he decidido cambiar de web para testearlo. Si tu theme lleva incorporado el efecto “fancybox” por defecto, puede que te encuentres con alguna incompatibilidad.

En páginas y post podemos integrar instagram via shortcode con el siguiente formato:

[ instapress userid="" piccount="" size="" ]  podemos jugar con los parámetros del shortcode:

• userid: ID o nombre de usuario de instagram ( en blanco para el feed de poular, “self” para tus propias imagenes o “feed” para tu feed)
• piccount: Numero de imagenes (por defecto: 9) – Hay que habilitar cache para mas de 20 imágenes.
• size: Medida en Pixels (Por defecto: 85)
• effect: Nombre del efecto , actualmente solo es posible “fancybox”
• url: si le das algun valor, Instapress ignora el valor para userid and piccount  y muestra una sola imagen.
• title: marca 1 para mostrar el titulo de tus imagenes
• paging: Marca 1, y tus imágenes se mostraran en galería. El valor piccount definirá el numero de imágenes por pagina.
• tag: Usa esta opción para filtrar por hashtag. Se puede usar un solo tag. La opción  userid se ignora si seleccionas esta opción.

Pero el plugin nos lo pone más fácil. En el editor de texto te aparece este  icono para insertar tus galerías de Instagram, lo seleccionamos y se nos abrirá esta ventana de configuración:

y es aquí donde puedes jugar con todos los atributos . Mira este ejemplo de integración en el post:

una minigalería de 4 imágenes de tu feed de Instagram. El proceso es el mismo para mostrarlo en páginas, mira esta demo para ver como queda integrado en una página.

Para integrar instagram en el sidebar no tiene mayor secreto que usar el widget que proporciona el plugin. Mira de ajustar correctamente los pixels y el número de imágenes, para que encajen correctamente con el tamaño de la barra lateral. En nuestro sidebar de guiawordpress.org puedes ver un ejemplo de como queda.

Todo es ir probando, hasta encontrar la manera correcta en que tus imágenes de instagram se muestren correctamente en wordpress.

Si nada de esto te sirve para integrar instagram en tu site y lo que quieres es mostrarla en alguna parte de tu template o theme, también puedes llamar al shortcode en cualquier parte de tu theme via php:

dentro del código php solo se trata que uses las variables que te he comentado, para mostrar las galerías de imágenes de instagram de la manera que consideres oportuna.

Espero que te haya servido de ayuda el post, de esta manera podrás sacarle mas jugo a tu creatividad combinando Instagram y WordPress.

Porque no me sigues en Instagram ? @gintoni puedes dejar tu username en los comentarios de este post para que te podamos seguir también.

Saludos,

En primer lugar, asegúrate que tienes tu instalación de wordpress correctamente actualizada a la última versión.

Una buena opción para evitar ataques es proteger nuestro directorio / wp-admin /. Vamos a bloquearlo para que solo algunas IP puedan acceder a este directorio. Crearemos un archivo htaccess y lo colocamos en /wp-admin/.htaccess.  Aquí va un ejemplo de lo que figura en este archivo:

AuthUserFile /dev/null

AuthGroupFile /dev/null

AuthName “Access Control”

AuthType Basic

order deny,allow

deny from all

# whitelist home IP address

allow from 64.233.169.99

# whitelist work IP address

allow from 69.147.114.210

allow from 199.239.136.200

# IP while in Madrid; delete when back

allow from 128.163.2.27

Hemos cambiado las direcciones IP , recuerda siempre por motivos obvios de seguridad no hacer nunca pública la información de tus IP.

A las direcciones IP arriba mencionadas les hemos permitido el acceso al directorio /wp-admin /, pero al resto de ellas que no estén en ese rango se lo denegamos. Esto puede salvarnos de situaciones desagradables.

Haremos que el archivo wp-content/plugins/index.html esté vacío, así evitaremos ceder una lista de los plugins que estamos ejecutando en nuestro wp. Si alguien quiere hackear tu blog podría utilizar esta información para intentar acceder vía alguno de los plugins instalados.

Otra cosa muy útil y que casi nunca hacemos, es seguir las actualizaciones y novedades del blog de desarrollo de wordpress http://wordpress.org/development/feed/ . Cuando los creadores de wordpress encuentran un agujero de seguridad cuelgan tan pronto como pueden una solución adecuada para subsanarlo con algún nuevo parche de seguridad. Hay que estar atento y aplicarlo en cuanto sea necesario, ya sea actualizando o siguiendo las instrucciones de los desarrolladores.

Y por último y no menos importante. Vamos a nuestro archivo header.php y buscamos la linea de código :

<meta name=”generator” content=”WordPress <?php bloginfo(’version’); ?>” />

y eliminamos completamente esa linea, pero ojo, solo esa, y siempre previamente de haber tenido la preocupación de hacer una copia de seguridad de nuestros archivos. Si no quieres borrar toda la linea, puedes solo eliminar “bloginfo(’version’)”. Esto lo hacemos para evitar que sepan que copia de WP estamos usando , poniendo otro obstáculo a quien intente hackear nuestro blog.

Esperamos que te hayan servido estos pequeños trucos de ayuda . Si tienes alguna duda al respecto, puedes dejarnos un comentario.

El funcionamiento es sencillo, WordPress siempre se fija en si hay algún error, pero hace una llamada dentro de wp-content al archivo db-error.php que no existe, por eso hemos de crearlo.

Con nuestro editor de texto favorito (texto plano, tipo Bloc de notas, no Word) creamos el archivo db-error.php con el siguiente contenido:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php if ( function_exists( 'language_attributes' ) ) language_attributes(); ?>>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Database Error</title>
</head>
<body>
<h1>Error establishing a database connection</h1>

<?php
$email = "tu correo";
mail(
$email,
// Asunto
"Error en la base de datos",
// Mensaje
"Parece que tu blog hay problemas con la base de datos."
);
?>
</body>
</html>

Evidentemente debéis poner una direccion de mail en “tu correo”, y podéis modificar el cuerpo del e-mail y el asunto Una vez creado lo subimos a /wp-content y ya está, la próxima vez que falle nuestra Base de Datos seremos los primeros en saberlo.

Vía: Todo WordPress

Dentro del Panel de control de nuestro WordPress vamos a Plugins y lo activamos.

Ahora en Opciones veremos: MP3 Player Options. Allí dentro nos encontramos con todas las posibilidades de personalización y creación de players.

En primer lugar nos muestra la carpeta por defecto para guardar nuestros mp3, que se llama mp3 y se encuentra en: /wp-content/plugins/mp3-player-plugin-for-wordpress/mp3/

Allí podemos poner nuestros MP3 para la lista de reproducción. Si queremos mas de un player con contenidos distintos en cada uno habremos de crear carpetas cada una con un nombre identificativo de la siguiente manera: wp-content/plugins/mp3-player-plugin-for-wordpress/nombre_directorio/ y dentro de cada directorio pondremos los MP3 que deseamos en esa lista/player.

En esta imagen vemos que podemos personalizar las dimensiones del player según el modelo escogido que es uno de estos:

Podemos personalizar el color, pero tan solo varía el color de la barra de progreso y volumen.

Luego encontramos una serie de Opciones como Show numbers (Mostrar número de canciones) Shuffle (para dar orden aleatorio) Autoplay, Alineación, Transparencia,  Mostrar Botón de Pop-Up,…

Con estas opciones hemos definido nuestro player en el caso de que sea el único o el principal que, por ejemplo, podemos ubicar en el sidebar como widget. Para ello solo tenemos que ir a Apariencia->Widgets y colocarlo donde queramos arrastrándolo.

También podemos situar el player en el lugar que deseemos de nuestras páginas o posts poniéndo este código

Pero como ya hemos dicho, podemos crear todos los que deseemos e insertrlos donde convenga. Una vez hemos creado las carpetas con el contenido debemos crear el código para cada uno de los players. Las opciones y sus tags son:

El código que hemos de colocar donde queramos ha de ser similar a este:

[mp3_embed blog_plyrs="3" playlistfolder="lol" transparent="no" colors="#408080" show="no" mp3wids=”280” mp3highs=”215”]

mp3_embed blog_plyrs indica el tipo de player (1 para el Baby, 2 para el Medium y 3 para el grande)

playlistfolder indica la carpeta donde se encuentran los MP3 de ese player. En este caso la carpeta es lol y la ruta completa es /wp-content/plugins/mp3-player-plugin-for-wordpress/lol/ aunque como veis solo hay que poner el nombre de la carpeta.

transparent indica que no deseamos transparencia.

colors nos sirve para indicar en hexadecimal el color que deseamos pàra la barra de progreso y volumen. El código lo obtenemos fácilmente con el cuadro que hemnos comentado arriba. Ponemos el cursos sobre el color deseado y obtenemos el hexadecimal.

show nos señala en este caso que no debe mostrar los números de orden de los temas, ya que ya están escritos en el nombre del MP3 o simplemente porque mo lo deseamos.

mp3wids nos sirve para declarar un tamaño de ancho diferente al estandard para el tipo de player seleccionado.
mp3highs nos sirve para declarar un tamaño de alto diferente al estandard para el tipo de player seleccionado.

Si ponemos mas de un player en la misma págibna o post hemos de usar la etiqueta id para diferenciarlos

id=”1” id=”2”…

Ahora ya podemos poner el código donde deseemos.

Un par de detalles:

- No pongais acentos en los nombres de los MP3 ya que si no esas letras no os aparecerán.

- En el nombre del directorio donde guardaremos los MP3 no podemos poner signos como el guión (-).

El plugin se puede encontrar en el repositorio wordpress.org aquí.

Idioma

Inglés

Productor

Adam W Warner

Altavoces

Adam W Warner

Fecha

4 de noviembre 2009

Idioma

Francés

Productor

Maigret

Altavoces

Maigret

Fecha

3 de noviembre 2009

Si suelen diseñar themes WordPress con frecuencia, no tengo dudas que en algún momento desearan innovar e intentaran implementar nuevas funcionalidades a la hora de presentar sus artículos en portada. Create a jQuery Carousel with WordPress Posts, es un tutorial que me pareció muy interesante, en el aprenderán paso a paso como Integrar un carrusel basado en jQuery en wordpress, el cual contendrá tus últimas entradas publicadas. Se explicara como configurar una categoría en particular, como instalar jFlow (un script muy liviano para generar los slide), como publicar y como personalizar todo una vez finalizado. El resultado es realmente muy bueno.

Ver Demo – Enlace Create a jQuery Carousel with WordPress Posts

Si en algún momento han deseado añadir marcadores sociales a sus plataformas wordpress, pero personalizados por ustedes mismos, sin la utilización de plugin, créanme que nos es nada complicado, y a continuación podrán leer dos artículos que los ayudara a entender cómo hacerlo.

Plain text social bookmark links for WordPress, este artículo le da el código de texto necesario para muchos sitios sociales diferentes, como Digg, Facebook, Reddit, Delicious, y muchos más. Con los cuales podrán personalizar aun más sus sitios basados en WordPress. Si no sabian que URL utilizar, esto los sacara de toda duda generada.

Add social bookmarks to your wordpress theme, un breve tutorial que les explicara como añadir de forma manual botones bookmarking sociales (Delicious, Reddit, Digg, StumbleUpon, Twitter y Facebook) a sus themes wordpress. Todos estos sitios proporcionan una manera simple de crear estos botones, Por ejemplo, para agregar un artículo a Reddit, la dirección es: http://www.reddit.com/submit?url=THE-URL&title=THE-TITLE, como pueden ver, sólo tiene que rellenar la dirección URL y el título del artículos especifico. Pueden serles muy útiles estos tips, para tener muy mayor control, sin utilizar algunos plugin.  Leer tutorial: Add social bookmarks

Lo primero que haremos será elegir qué imagen quieren poner como nuevo gravatar, recuerden que esta imagen se mostrará unicamente para los usuarios que no tengan su cuenta.

Aquí les dejo algunos que pueden usar, habrá que ajustarles el tamaño dependiendo de cuál usen en su theme… si es de 50×50, 100×100, etc… esta imagen la guardamos de preferencia dentro de la carpeta images en nuestro theme, pero sino pueden guardarla donde uds. deseen.

Ok, ahora vamos a abrir el archivo functions.php que se encuentra dentro de nuestro theme, sino lo tienen pueden crear uno.

En este archivo agregamos las siguienes líneas

Listo ahora nos dirigimos a nuestro panel de administración y en la parte de discusión veremos nuestro nuevo avatar listo para usarse.

En otro tutorial veremos cómo hacer más grande el tamaño de nuestros avatars así como personalizar el listado de comentarios.

No le hagan mucho caso a mi versión zombie del pajarraco de Twitter, solo quería buscar una manera “personal” de ilustrar el post. Por otro lado, esta función ha sido creada por Peter Ivanov y resulta muy útil y sencillo poder implementarlo en nuestro WP..

En fin, el único valor que nos pide esta función es el nombre de usuario, si han visto mi perfil, el de Pablo que han publicado en este blog, se darán cuenta que en la parte de abajo se muestra el # de followers que tiene cada uno. Incluso para los colaboradores, en su perfil encontrarán el campo para poner sus tweets recientes y todo lo demás.

Ok, es muy sencillo lo que vamos a hacer es abrir el archivo functions.php de nuestro theme, recuerden que si no tienen uno pueden crearlo. En este archivo ponemos el siguiente código:

Ok, hasta ahí todo bien… ahora vamos a modificarlo un poco, en la línea 13 nos encontraremos con esto:

Si lo dejamos así puede funcionar sin problemas, pero nuestro fichero se guardará en “root” y no me parece muy amigable, entonces lo que haremos será guardar este fichero en una carpeta llamada cache dentro del directorio de nuestro theme.

Entonces creamos una carpeta llamada cache dentro de nuestro theme, recuerden que debe tener los permisos 777 y el código lo reemplazamos por el siguiente:

Donde mi-theme es el nombre de la carpeta de su theme.

Lo siguiente que haremos será mostrarlo en WordPress, mmm… abrimos el archivo sidebar.php y en el lugar que ustedes decidan ponemos lo siguiente:

Yo lo tengo de la siguiente manera:

Listo! Otra función más lista para agregar a nuestros themes, por cierto si quieren les dejo mi versión alternativa bizarra zombie