Últimamente he recibido muchas solicitudes para compartir un tutorial sobre cómo creé el widget de barra lateral en mi blog personal. ¡Se ve bonito y lo más importante, funciona! Con algunos PHP y CSS simples, estoy seguro de que todos pueden implementar esto en sus blogs fácilmente. Hoy te mostraré cómo crear el mío ... con la esperanza de que puedas crear tu propia versión personalizada para tus propios proyectos.!
Paso 1 socializar!
Primero, esto requiere que tengas una página de Facebook, no solo un perfil regular ... así que si no tienes una, primero debes crear una. Seguiremos suponiendo que ya tienes uno!
Ok, preparemos tu página de Facebook y los códigos de suscripción de correo electrónico. No copie los códigos en el paso 1! Lee todo aquí primero. Copie solo el código completado en el Paso 2 ... primero vamos a revisar lo básico:
Lo que necesitarás de tu página de Facebook
Introduzcámonos directamente en un código que usaremos para el widget de la barra lateral para que pueda señalar algunos datos que necesitará. Este fragmento se utilizará para la parte de Facebook Social de nuestro widget:
Aquí está la parte difícil: cada vez que edites tu CSS, asegúrate de cambiar el número '? 1' (en la línea 4 del ejemplo anterior) a una diferente que se corresponda con la versión de caché de su CSS. Si no lo cambias, puede que no funcione. (esto es ciertamente una situación extraña. Tuve éxitos y errores al hacer que esto funcione).
?1
Para tu ID de página (es un número largo que representa la ID de su página de Facebook): inicie sesión en su Página de Facebook> Editar página y verás tu propia página de identificación en la barra de direcciones del navegador. Use esto para el ID de perfil en la línea 4 a menos que quiera anunciar mi página de Facebook en su sitio;).
En la barra de su navegador en la Editar página, Verás algo como esto:
También puedes cambiar las conexiones, el ancho y la altura para que se adapte bien a tu barra lateral. Ancho mínimo debe ser 250 (px), menos que eso y no podrás ajustar el botón y el texto dentro de los cuadros.
Detalles de suscripción por correo electrónico
Ahora necesitamos obtener los detalles de su suscripción de Feedburner. Una vez más, asumo que ya tiene esta configuración, por lo que solo debe iniciar sesión y obtener los siguientes detalles.
Quema tu alimento con Feedburner y reemplaza el ID de Feedburner en el código de abajo con el tuyo. El ID de Feedburner es el que está en la URL de tu grabador de noticias. Por ejemplo feeds.feedburner.com/Ariff. Sí, tuve algo de confusión buscando eso antes de esto..
Aquí está el código real que usaremos para la parte de suscripción del widget:
Paso 2 Juntándolo: El Código Completo
Puedes convertir esto en un complemento completo (o código corto) si lo deseas, pero hoy vamos a tomar un atajo para llegar a las cosas buenas y trabajar directamente en un widget de texto. No, esto no se recomienda para la producción real ... pero nos hará avanzar de inmediato.
Copie este código en una widget de texto en su barra lateral. Recuerde cambiar todos los atributos como se mencionó anteriormente e incluir sus propias credenciales de Twitter y Google+. Si ya tiene el botón de Google+ en su sitio, puede eliminar el código javascript de Google+ de abajo, ya que una sola instancia del script ya es suficiente para múltiples botones.
Recomendar en google
Seguirte
Paso 3 Código CSS
Copia los códigos CSS en tu hoja de estilo del tema. Tenga en cuenta que si la casilla de Facebook no funciona, los códigos de la casilla se deben colocar dentro de su hoja de estilo principal (style.css) y no en algún otro lugar para los códigos personalizados.
¡Y hemos terminado! Puedes consultar el código CSS donde pongo algunas marcas de lo que se puede cambiar. Todo lo mejor con esto. Ahora tienes algo Mashable-ish en tu sitio, con cierta personalización también.
Código fuente de la página de Facebook: Daddy Design
¡Ten en cuenta que esto es solo un punto de partida! Algunos de los desarrolladores de complementos avanzados que hay por ahí pueden tener mejores formas de hacer algunas de las cosas que se muestran en este tutorial, ¡así que siéntase libre de compartir sus propios comentarios e ideas en la sección de comentarios a continuación! Nos aseguraremos de actualizar el tutorial si alguien tiene grandes ideas.
Share
Accentsconagua
