Embedding Facebook Badges and Plugins on Your Web Site

Facebook has come up with a number of ways (more coming I'm sure) to share your facebook content on external web sites. You can use the existing code to embed different facebook elements on your team or league web site.

Some of these badges and plugins require that you create a facebook page in your profile. This works out perfect for a team or league web site as your page can be used specifically for your team or league. Creating a page in facebook is beyond the scope of this help section, but once you have one created you can move on to the steps below to add a page badge or gadget to your web site.

Facebook Badges

The following page has facebook badges that you are able to select and embed on your web site: http://www.facebook.com/badges/

• Step 1: Select badge from facebook. From the above page, select the badge you'd like to place on your team or league web site. In the picture below, I selected the "Page Badge" and selected "Other" from "Choose where to add the badge". From the textbox below the Other button, select and copy all of the code from the textbox. Now switch over to your Rteamsite web site and login to the admin area.

• Step 2: Paste facebook code. In your team or league web site, edit the page where you want to add the facebook badge. Click on the HTML button at the bottom of the text editor to switch the text editor to HTML mode. Now paste the facebook code into the text editor. Switch back to "Normal" mode using the button at the bottom of the editor and you should now see the facebook badge showing up in the text editor. Publish or update the page and view your site to see your facebook badge.

Facebook Plugins

The following page has facebook plugins that you are able to select and embed on your web site: http://developers.facebook.com/plugins/

• Step 1: Select plugin from facebook. From the above page, select the plugin you'd like to place on your team or league web site. In the picture below, I selected the "Like Box" plugin. I was then presented with the following options (picture below). All of the options made sense as far as sizing the plugin, but it doesn't automatically fill in the "Facebook Page URL". I had to go to my page in facebook and select the ID from the url (picture below) and paste it into the id field. It will update immediately so you can verify that you have the correct page.

• Step 2: Get Code. Click on the "Get Code" button and copy the code from the iframe section of the dialog box.

• Step 3: Paste facebook code. In your team or league web site, edit the page where you want to add the facebook badge. Click on the HTML button at the bottom of the text editor to switch the text editor to HTML mode. Now paste the facebook code into the text editor. Switch back to "Normal" mode using the button at the bottom of the editor and you should now see the facebook plugin showing up in the text editor. Publish or update the page and view your site to see your facebook plugin. (example below)