Skip to main content

Embed Social Media on a Project or Site

Learn how to embed social media, such as X or Facebook, on project pages and homepages.

Tess O'Brien avatar
Written by Tess O'Brien
Updated over 6 months ago

On your EngagementHQ site, you can enable social sharing on your projects and tools. This setting lets participants share your pages on their social platforms. You can also use the custom widget to embed social media on your project pages. For example, a long-running consultation may have its own Facebook page, or you could embed your organization's X feed.

You can embed social media on project pages using the custom widget or use the HTML widget for your homepage. Some social platforms allow you to retrieve iFrame code snippets, which you can then add to the Code View of your widget.

Here are two common examples:

Embed an X Timeline

You can embed a variety of content from X, but timelines are a popular choice. To do so:

  1. Go to https://publish.twitter.com/ and enter the URL of the timeline you want to embed.

  2. Choose from your display options and any further customizations, such as the height and width. We recommend setting a maximum height of 500 px otherwise your embed could become very long and impact your page design.

  3. Select Update and Copy Code to get your embed.

  4. Go to the Custom widget on your project page and select < > to open Code View.

  5. Paste the embed code in and select < > again to close Code View. You must close Code View before you can save.

  6. Save & Close the widget and Preview your project to ensure it’s displaying correctly.

Embed Facebook Page Plugins

There are also a range of Facebook Plugins, but the Page Plugin is the most common.

  1. Go to https://developers.facebook.com/docs/plugins/page-plugin/ and enter the relevant Facebook Page URL.

  2. Choose the Width, Height, and other settings. We recommend a width of 335 px if you’re embedding it into a Custom widget on your project page.

  3. Select Get Code, and copy the embed code from the iFrame tab.

  4. Go to the custom widget on your project page and select < > to open Code View.

  5. Paste the embed code in and select < > again to close Code View. You must close Code View before you can save.

  6. Save & Close the widget and Preview your project to ensure it’s displaying correctly.

What Else?

Did this answer your question?