Start a conversation

How Do I Add a Facebook Page Plugin?

Facebook offers a Page Plugin feature that allows you to add a Facebook feed to any webpage. This is a good way to keep page visitors and Club members informed of group developments and social media interactions while allowing them to remain on your organization's webpage.

Note: The Facebook Page Plugin requires you to have a Facebook Page. This is not the same as a personal Facebook Profile. Refer to the Facebook Help Center for more information on the creation of a Facebook Page. The link will open in a new window. Note also that ClubRunner is not responsible for any problems you may experience when linking to a third party service. Additionally, we cannot provide technical support for Facebook issues. 

 

1. To place the Facebook Page Plugin on your club site, you must first acquire a plugin embed code from Facebook. You can find instructions for this process here. Your link will open in a new window. On that page you will find instructions for generating and customizing the code as desired. Once you have generated the code, there are two options, JavaScript or IFrame. Please click on IFrame and copy the code.

Note: The Facebook Page Plugin cannot be displayed in fields narrower than 280 pixels. This means it may not display correctly in narrow sidebar columns in our web design templates. Be sure to Preview any changes you make to your homepage before Publishing. 


2. In order to make use of the code and display your Facebook Page within your ClubRunner site you will need to create a custom page widget. First, log in to your club site and access the member area. Once you are on the member page click on the Website tab. 


3. Next, click on the Website Content link. 

 

4. You are now on the Website Libraries page. At the left side of the screen, under the Home Page Content heading, click on Home Page Custom Widgets

 

5. You are brought to a list of your previously created custom widgets, if any. You will now create a new custom widget on which to place your Facebook Page Plugin code. Click on the orange Add button to the top right of the list of widgets.

 

6. This brings you to the Add New Custom Widget page. Enter a name for the widget in the Title field.

 

7. Now, click on the Source Code button in the tool bars above the content editing field. This allows you to paste HTML directly into the field and have it display correctly. 

 

8. Paste the embed code from Facebook into the editing field.

 

9. In order for the code to display correctly on your page, you must now add two pieces of HTML code to the code you obtained from Facebook. Add <div> to the front of the code you pasted, and </div> to the end of the code. 

Note: Your code should look something like the following example. Remember the "https://www.face.com/facebook" URL in the code is only an example. Your embed code will contain a different URL.

<div> <div class="fb-page" data-href="https://www.facebook.com/facebook" data-width="380" data-hide-cover="false" data-show-facepile="false" data-show-posts="true"></div> </div>

 

10. When you're done, click on Save and Publish.

 

10. Your Facebook Page Plugin widget is now available for placement on your webpage. For more information on the use of widgets in building homepage content refer to our Website Widgets support articles. This link will open in a new window.

Choose files or drag and drop files
  1. Shawn P.

  2. Posted
  3. Updated