Integrar redes sociales a sitio web Parte 1

Hola amigos! Pues ultimamente he estado pensando y pensando que queria hacer mi blog, asi que empezaréa con algo super sencillo pero que sin embargo cuando no se tiene el conocimiento de lo que se busca pues las cosas se ponen un poco dificil, asi que hoy lo que haremos es la integracion de nuestras redes sociales(redes sociales, twitter, youtube, etc) en nuestro sitio web, asi que comencemos!

Aqui una muestra de como se verá:

Antes de seguir debo recordarles que estos plugins solo sirven si tu facebook es FANPAGE!

Integrando Facebook 

Lo primero que debemos hacer (Tomando yo en cuenta que ya tienes tu sitio web diseñado y lo unico que quieres es "meter" facebook) es ir a la siguiente direccion:  https://developers.facebook.com/docs/plugins/

dentro de ella encontrarás varios plugins (opciones, widgets, como quieras llamarle) muy interesantes que probablemente querras implementar mas adelante en tu sitio. Entre algunas de ellas están:

• Like Button Que te permite mostrarle a tus amigos las paginas o contenidos de algo que te ha gustado en la web
• Share Button Este plugin permite compartir algo de la web en tu timeline de facebook con tus amigos
• Embed Post Te ayuda a "postear" post publicos de facebook. Esta opcion es estática es decir: si la pones en tu web ahi estara tooooodo el tiempo, será como una foto tuya en la pared de tu casa. Algo que es aburrido en los sitios web. La idea de los sitios web es mantener a los usuarios "entretenidos" con tu contenido si les muestras lo mismo probablemente no volveran una segunda vez a tu sitio... pero es tu decision si implementas este plugin
• Comments Esta opcion es mas dirigida a tus usuarios y poner obtener un "feedback" (retroalimentacion de tu sitio. Puedes colocar este plugin justo debajo de algun articulo que pongas en tu sitio web de esa forma tus usuarios podrán comentar ese articulo y asi mismo aparecera en ambas partes (tu fanpage y tu sitio web) awesome no? Funciona tal como este blog el cual al final de este articulo hay un textbox que te permitira decir cuanto te gusto este articulo. Lo cual harás! espero yo ¬¬'  jaja 
• Like Box Y bueno hay muchos mas pero nos concentraremos en este: el cual permite mostrar en tu sitio web SOLAMENTE los POSt que tu hagas en tu FANPAGE. No mostrará los posteos de tus seguidores, pues eso no nos interesa!

Como Implementarlo?

Lo que vamos hacer ahora es: en la pagina que les dí anteriormente de los plugins deben irse a la opcion que dice: LIKE BOX y les mostrará la pantalla con sus opciones siguientes:

Si se fijan facebook nos dá una muestra de como se verá su LIKE BOX dentro del cual hay varias opciones de configuracion

1. Facebook Page URL aqui introducirán la URL completa de su facepage en mi caso para mi fanpage es el siguiente: https://www.facebook.com/iglesiaadventista.santatecla, el suyo cambiara de acuerdo al nombre de su fanpage (obviamente dá!) 
2. Width: Te permite configurar el ancho del widget por defecto facebook te lo da a 300px o algo asi.. si le quieres aumentar debes ir "tantiando" (probando pues ¬¬' ) con otras dimensiones eso dependerá del ancho disponible en tu website
3. Height Funciona tal y como el anterior nada mas que es para la altura del widget
4. Color Scheme Facebook te da dos colores de muestra: oscuro (dark) y el normal (clarito) queda a tus opciones
5. SHOW POST Lo pongo de otro color porque quiero que notes que este es el que mas nos interesa ahora pues este permitira mostrar TOOOOODOS tus post en este widget por lo tanto debes (como dicen los amigos mexicanos: palomearlo) checkiarlo pues! 
6. Show Border Solo permite mostrar o quitar el borde no es la gran cosa!

Les muestro como hago el mio y si siguieron mis intrucciones al pie de la letra como se los dije les ira bien! vean el mio sin checkiar los post :

Ahora con el checke "palomeado":

Asi solo se muestran los post realizados en esa fanpage.

Insertar Plugin en SitioWeb

Si fueron observadores ya se habrán dado cuenta que al final de la muestra hay un botoncito que dice: GETCODE pues lo que harán ustedes es simplemente darle click a ese botoncito y copiar el codigo que genera:

Y al fin lo unico que deben hacer es colocar estos dos porciones de codigo en el lugar de su html que han preparado para su widget! y listo deberia verse asi:

Espero te haya servido amigo o amiga. SI te gusto comentalo, compartelo y recuerda visitar mi canal en Mi canal de Youtube.

Saludos desde El Salvador!! mi tierra querida!