We’ve looked at adding a Facebook Like button, and a Facebook Like Box. In this tutorial, we will show you how to add a Facebook “activity feed” to html page and WordPress sidebars. We will be using the iframe code in this tutorial.
You will need:
- A Facebook Account
- A Facebook Page (previously called a Fan Page)
- HTML Website or self hosted WordPress install
- Widget ready theme (WordPress only)
- HTML editor (only for HTML pages)
Note: If your site was created using html pages, you will need access to a page or html/text editor such as CoffeeCup HTML editor or Notepad ++ (Microsoft OS). If you are using WordPress, you will need a widget ready theme.
Step 1: Collecting Needed Info
When you begin to create your activity feed, you will need two pieces of information. You may want to copy and paste these items into a text file so you can have it all in one place when it comes time to add it into the form.
Domain URL – This is the full URL of your website.
Width – You’ll need to know the width of your sidebar in pixels. The activity feed plugin width will need to be smaller than the sidebar width. If you aren’t accustomed to working in the code or theme portion of your website, you may need to ask your webmaster or a tech savvy friend to help you find this information.
Height – The above applies here as well; however, there is more flexibility with the height.
Step 2: Go to FB Developer-Activity Feed
Here you will see the form that will create your activity feed iframe code.
Step 3: Create Your Activity Feed Code
The first five pieces of information you’ll need to fill in are the domain url, width, height, header, and color scheme.
In domain section, you will add the base URL of your website.
In the width section, you will add the width (in pixels) that your Activity feed should be. For example, our side bar is 310 pixels wide so, 300 pixels will give us a 5 pixel space to the left and right of the box.
In the height section, you will add the number of pixels that represent the Activity Feed’s height. Remember, the taller the box, the more content will be added in the box.
In the header section, you will check the box if you want a header with “Recent Activity” added at the top of your box.
In the color scheme section, you will choose either light or dark for the background color of the box.
The next three sections are where you’ll make your choices about the font, border, and recommendations.
In the font section, you will select the font style you want to show in the box. Most people choose the same font that appears on their websites. Here we chose Verdana.
In the border section, you will choose the border color you would like around the edge of the box. Here, we have added the color code #800000, which is a dark red. This border is only one pixel wide.
In the recommendations section, you will check the box if you want recommendations to show in your activity box.
Once you are finished making your selections, view the image to the right for a preview of your box. Then, click the Get Code button.
Copy and paste the iframe code into a text file for later use.
Step 4: Add Your Activity Feed Code To HTML Page’s Sidebar
Take a look at your html page’s sidebar area and decide where you’d like to place the box. We want to put the activity feed just after the list signup.
To add the box code, open the html page with the editor, find the area where you want to add the box, insert the iframe code. It should look something like this but with your own info filled in, of course. The iframe code is highlighted in the image below.
Save and upload the page. Preview or view in your browser. You may need to adjust some numbers or options in the iframe code to get the box to look right. We did. This is how the box should look in the page’s sidebar.
Step 5: Add Your Activity Feed Code To WordPress Sidebar
To add the code to your WordPress install, you will need to add the iframe code into a widget or in the theme. We will be adding it to a widget. Simply go to the admin widget area.
Drag a text/php widget into the sidebar area. Open it up and add the iframe code. Save and view your site’s sidebar.
It should look something like this when complete.
There you have it – Facebook Activity Feeds in HTML page sidebars and WordPress sidebars.
Questions? I’m here to help, so I look forward to your comments.