How can I embed an Instagram Profile on my Sites website?

Owned by Bryan Barnes
Last updated: Nov 14, 2022
3 min read

 

NOTE:  Once you add an Instagram Embed to your page, you will only be able to edit your page in "Text" mode, as switching to edit in "Visual" mode will break your embed.

 

Before you begin...

You will need: 

  1. Access to edit the Sites website you wish to edit

  2. Access to manage the instagram account you wish to embed

Example of Instagram Profile Embed:

View Live Webpage of embed example

Instructions:

Step 1: Copy Instagram Embed Code

  • Visit the webpage for your instagram profile page, in this example, our link is: https://www.instagram.com/umbcalumni/

  • At the top of the page, click the "gear" icon  (see screenshot example →)

  • Select "Embed" from the menu that popped up (see screenshot example →)

  • Click "Copy Embed Code" (see screenshot example →)

  • (Optional) Place this code in a text file for safe keeping

Example of Instagram Profile Page Gear Icon, and menu that pops up when you click it:

 

Example of Embed Code Copy:


Step 2: Add Instagram Script to the page you want to embed your Instagram Profile

  • Log into your Sites website

  • Visit the webpage that you wish to add your Instagram embed to and switch to Edit Mode

  • At the top of your edit page, click the "Screen Options" dropdown (see screenshot example →)

    • Ensure that "Custom Fields" is checked in the dropdown (see screenshot example →)


  • Scroll down on the edit page below your content until you see Custom Fields (see screenshot example →)

    • For the Name column, enter "external_script_tag"

    • For the Value column, enter "<script src="//www.instagram.com/embed.js"></script>"


    • Note: If you do not see the option for "external_script_tag," please click the "Add New Custom Field" to add that Name

Example of Screen Options, and Custom Fields:

 

Example of Custom Field for External Script Tag:

 

Step 3: Paste your Embed Code in text Mode

  • Switch to text mode on the edit page (see screenshot example →)

  • Find the area you wish the embed to show up and paste the embed code that you copied from Instagram (see screenshot example →)

  • Publish your changes, view your work and ensure it looks like you intended.

Example of switching to text mode in Sites Editor:

 

Example of pasting Instagram Embed Code:

 

Request Help | Correct or Suggest an Article