Tuesday, August 25, 2015

Embed A Facebook Feed Into A Website

So in a past blog, I wrote Tip 12: Embed A Twitter Feed Into A Website and was asked if there was a way to embed Facebook into a website as well.  Facebook provides you with all the tools you need to do this.

If there is any way to embed any of your social media feeds into your website or blog, I would recommend doing so.  This way you have constant changing information appearing on your site without having to hand enter it each time or even knowing how to code.  With that said, lets get started.

The 7 simple steps to add a facebook feed to your site. 

  • Go to Facebook Developer Plugin Page
    Click here https://developers.facebook.com/docs/plugins/page-plugin.


  • Copy/Paste or Type the Facebook Page Website Address 
    in the box that is labeled Facebook Page URL.


  • Pick the Settings You Desire for Your Plugin
    Add width, height, show friends faces, hide cover photo, and show page posts.  You will be able to see what the end result of your options will look like on the bottom of the page.  (Just a note, for the width and height I use percentages instead of pixels to make it more mobile responsive.)


  • Click the "Get Code" button
    The code you just created will pop up.


  • Copy the Code from Section 1
    This code should be placed at the top of the desired page.  Facebook developers recommend to place it directly after the <body> tag.  It is the Javascript SDK coding that is needed for the plugin to function.


  • Copy the Code from Section 2
    This code should be placed where ever on the page you wish the Facebook Plugin itself to appear.


  • Save your New Code to Your Site
    After adding your new code to your site where you want it, save it and upload it if necessary.

     

  • If you are looking for just adding the "Like" or "Share" buttons to your site, check back at a later date.

    If you like this post and want to see more, follow me on my website www.chadcompton.com
    Or if you prefer...


    No comments:

    Post a Comment

    Drop me a line.