Embed Social Media on a Page with the HTML Widget

Prev Next

The HTML Widget can be used to embed feeds or items from various social media sites, such as Twitter, Facebook, or YouTube, on a page. Embedding these items on your page requires embed code from the sites themselves.

Who can use this feature?

System Administrator | Owner | Publisher | Author

Embed an X (formerly Twitter) Feed

  1. Copy your X profile URL A web browser address bar with an example web address for an X (formerly Twitter) account.

    Note:

    This will be https://x.com/yourhandle.

  2. Paste the URL for your X page at the X Publish page and press Enter on your keyboard The X (formerly Twitter) Publish page with a web address inserted to get embed code.

  3. Select Embedded TimelineThe Embedded Timeline and X Buttons display options on the X (formerly Twitter) Publish page.

  4. Click Copy CodeThe X (formerly Twitter) Publish page with embed code generated and the Copy Code button highlighted.

  5. Use the Custom HTML Widget to embed the feed to your page

Embed a YouTube Video

  1. Navigate to your video on YouTube

  2. Click the Share button underneath the video A CivicPlus YouTube video with the Share button highlighted.

  3. Select EmbedThe YouTube Share Dialog window with the Embed option highlighted.

  4. Copy the default embed code; make adjustments if needed The YouTube Embed Video screen with generated iframe code and the Copy button highlighted.

    • Start at: Choose to start the video at a time other than the very beginning

    • Show suggested videos when the video finishes: Choose to default to showing the viewer a list of suggested videos after they have seen the video

    • Show player controls: Choose to display the video controls, such as pause and volume

    • Show video title and player actions: Choose to display the title and other player actions

    • Enable privacy-enhanced mode: YouTube will not store information about visitors on your Website unless they play the video

  5. Use the Custom HTML Widget to embed the video on your page

Embed a Facebook Plugin

Important Note

Facebook will not allow the Facebook feed to show in an iframe unless the country and age restrictions on the Facebook page are set as "Visible to Everyone." If there are any restrictions set in these fields whatsoever, the Facebook feed will show up as blank. If your Facebook feed still appears blank, contact Facebook support.

  1. Visit the Facebook Page Plugin Generator

  2. Complete the fields to generate the plugin codeThe Facebook Plugin Generator screen with fields for hyperlink, width, height, and more.

    • Facebook Page URL: The link to the Facebook page that you want to connect to

    • Tabs: Section of the Facebook page that you want to feature

    • Width: Width that the widget will display, measured in pixels

    • Height: Height that the widget will display, measured in pixels

      Note:
      You can adjust the height and width through the Facebook Plugin Generator or through the code directly

    • small_header: Click to use a smaller-sized header

    • hide_cover: Click to prevent featuring the page's cover photo

    • adapt_container_width: Click to default to your site's widget width

    • show_facepile: Click to feature friend's faces

  3. Click the Get Code button: The Facebook Plugin Generator screen with the Get Code button highlighted.

  4. In the resulting pop-up window, select the iframe tab: The generated embed code from the Facebook Plugin Generator with the IFrame tab highlighted.

  5. Copy the provided code: The IFrame tab of generated embed code from the Facebook Plugin Generator with the embed code highlighted.

  6. Use the Custom HTML Widget to embed the plugin on your page