Facebook timeline custom card

A great way to leverage content from Facebook from your corporate Facebook timeline, or any other feed you want to add.

What it does

This customization can embed any Facebook timeline into your ThoughtFarmer intranet. You can use Facebook's own configuration page to create the exact look and feel of the timeline.

Complexity

Requires some copy and paste of embed code provided by Facebook. See Configuration below.

Configuration

There is no custom development required to add a Facebook timeline on your ThoughtFarmer intranet. This can be accomplished with the correct embed code supplied by Facebook.

How to create a Facebook Timeline custom card

Use these instructions to create a reusable custom card you can add to multiple pages. For a one-time embed see the next heading "How to Embed a Facebook timeline".

1. Visit the Facebook Developers Plugin page which we will use to generate the code that will be embedded into a ThoughtFarmer card.
2. Enter the URL of your company's Facebook page and select the options for how it will appear (use small header, show cover photo, etc). You will have an option to set the width and length of the card, we recommend 260px width and 800 length (an example is displayed below in the sidebar).
3. Click Get Code, which will display a pop-up box showing JavaScript SDK code and iFrame Code that can be copied.
4. Click to the iFrame tab and copy the iframe code.
5. On your ThoughtFarmer instance, navigate to the Admin Panel. Under User interface, click Custom cards.
6. On the right-hand side, click +Create page template card.
7. Paste the IFrame code into the Markup (HTML) page.
8. In the code you will be able to adjust the width and the length of the card. If you will be displaying the card in a sidebar, we recommend setting the width to 260px and height to 800px.
9. Enter a name for your card.
10. Click Save.
11. Navigate back to the Custom cards page (under User Interface in the Admin panel). Click the toggle to active your card.
12. Navigate to the page that you would like to embed the card on, and click Edit page.
13. Click Set up Cards under Content type & template on the right-hand side of the page.
14. Click Modify template and add a card in the area you would like it to display.
15. Click Done and Save the page.

How to embed a Facebook timeline on a page

You can also embed a Facebook timeline into any page in the body, or within a Rich Text Card added to any page in any position.

1. Visit the Facebook Developers Plugin page which we will use to generate the code that will be embedded into a ThoughtFarmer card.
2. Enter the URL of your company's Facebook page and select the options for how it will appear (use small header, show cover photo, etc). You will have an option to set the width and length of the card, we recommend 260px width and 800 length.
3. Click Get Code, which will display a pop-up box showing Javascript SDK code and iFrame Code that can be copied.
4. Click to the iFrame tab and copy the iframe code.
5. Go to any ThoughtFarmer page and edit it, or create a new one.
6. Click Set up cards and then Modify template.
7. Add a Rich Text card to any location and configure the card.
8. In the body copy of the RTE card go to the area you wish to embed the code and click the Source tool.
9. Paste the code, click the Source button again, and click Done.
10. Click Done on the update cards window and Save the page.

The above steps are the same for a rich text editor in the body copy as well.