Skip to main content

Search

We are excited to announce the launch of updated product names, logos, and headers within our user interfaces as part of the CivicPlus® Solution Rebranding initiative. These changes mark the first step toward creating a cohesive and seamless user experience across all solutions in our portfolio. As part of this transition, users may notice minor design updates. While the functionality you rely on remains unchanged, we are in the process of updating screenshots and other resources on our Help Centers to reflect the new branding. We appreciate your patience and understanding as we work to complete these updates.

Insert a Facebook Plugin

  • Updated:

Who can use this feature?
System Administrators | Owners | Publishers

 

Article Navigation

 

Not finding what you are looking for? View some additional resources.

 

New UI Instructions

 

  1. Sign in to your website solution
  2. Ensure that you are using the New UI (click the Try New UI button if you are not) and navigate to your page:
    The button in the top right corner labeled Try New UI.
  3. Click to expand the Widgets tab:
    The button labeled Widgets in the vertical menu on the left side of the page.
  4. Drag and drop the Custom HTML widget onto the part of the page where you want the Facebook Plugin to appear:
    The box labeled Custom Html dragged and dropped onto the page.
  5. Create a new browser tab and go to the Facebook Page Plugin Generator page
  6. Complete the fields with their requested information:
    The Facebook plugin text entry fields and toggle checkboxes.
    • Facebook Page URL: The link to the Facebook page that you want to connect
    • Tabs: Section of the Facebook page that you want to feature
    • Width: How wide the widget will be
    • Height: How tall the widget will be
      Note: You can adjust the height and width through the Facebook Plugin Generator or through the code directly.
    • Use Small Header: Click to use a smaller-sized header
    • Hide Cover Photo: Click to prevent featuring the page's cover photo
    • Adapt to plugin container height: Click to default to your site's widget height
    • Show Friend's Faces: Click to feature friend's faces
  7. Once the fields and options are complete, click the Get Code button:
    The button underneath the Facebook plugin fields labeled Get Code.
  8. In the resulting dialog window, click the IFrame tab:
    The tab labeled IFrame at the top of the modal.
  9. Copy the code:
    The generated iframe code in the modal.
  10. Return to your site tab and paste the code into the Custom HTML widget:
    The iframe code pasted into the Custom HTML Widget.
  11. Click the Done button:
    The button labeled Done with a floppy disc icon in the bottom left corner of the widget.
  12. The Facebook plugin will appear:
    The Facebook plugin on the Evolve site page.
  13. Finally, click the Save Changes button to save the page:
    The floppy disc icon in the top-right of the page, to the right of the button labeled Old UI.

 

Go to Article Navigation

 

Old UI Instructions

  1. Sign in to your website solution
  2. Ensure that the Live Edit state is toggled to ON (simply click the button to change the state) and navigate to your page:
    The pencil icon labeled Live Edit to the far right of the logo.
  3. Click the View all widgets button on the Content tab:
    The button labeled View all widgets, beneath the Search bar in the Content tab.
  4. Drag and drop the Custom HTML widget onto the part of the page where you want the Facebook Plugin to appear:
    The box labeled Custom Html dragged and dropped onto the page.
  5. Create a new browser tab and go to the Facebook Page Plugin Generator page
  6. Complete the fields with their requested information:
    The Facebook plugin text entry fields and toggle checkboxes.
    • Facebook Page URL: The link to the Facebook page that you want to connect
    • Tabs: Section of the Facebook page that you want to feature
    • Width: How wide the widget will be
    • Height: How tall the widget will be
      Note: You can adjust the height and width through the Facebook Plugin Generator or through the code directly.
    • Use Small Header: Click to use a smaller-sized header
    • Hide Cover Photo: Click to prevent featuring the page's cover photo
    • Adapt to plugin container height: Click to default to your site's widget height
    • Show Friend's Faces: Click to feature friend's faces
  7. Once the fields and options are complete, click the Get Code button:
    The button labeled Get Code beneath the Facebook plugin text entry fields and toggle checkboxes.
  8. In the resulting dialog window, click the IFrame tab:
    The tab labeled IFrame at the top of the modal.
  9. Copy the code:
    The iframe code in the text field in the IFrame tab.
  10. Return to your site tab and paste the code into the Custom HTML widget:
    The iframe code pasted in the Custom HTML widget.
  11. Click the Done button:
    The button labeled Done with a floppy disc icon in the bottom right corner of the widget.
  12. The Facebook plugin will appear:
    The Facebook plugin appearing on the site page.
  13. Select a saving option:
    The buttons labeled Save, Save and Publish, and Save as Copy.
    • Save: Will save your work without publishing
    • Save and Publish: Will save and publish (Draft Pages only)
    • Save as Copy: Will save as a unique draft/version
    • Cancel: Will cancel the changes made

 

Go to Article Navigation

Comments

Let us know what was helpful or not helpful about the article.

0 comments

Please sign in to leave a comment.