Embedding an Instagram post or feed using Container Parameters

In This Topic

Instagram posts or feeds may be embedded in containers for display at the Spydus Discovery Platform. Follow the instructions below to add an Instagram container.

Embedding a single Instagram post

To embed a post, you will need the Embed Code provided by Instagram.

Navigate to the post to be embedded (e.g. https://instagram.com/p/a1b2c3etc/)
- Ensure the account is not set to private; if the account is private, posts may not be embedded
Click the ellipsis (...) at the top right of the post and click the Embed option
Click the Copy Embed Code button
- To include the post caption in the embed, ensure that the Include caption box is checked
In Spydus, navigate to Maintenance > OPAC & Enquiry > Container Parameters
Select the required View and Format
Create a New Tab, setting the Type to 'Rich text'
Create a New Container in the new tab, and click the 'View HTML' button
Paste (Ctrl+V) the copied code into the View HTML field, and click Update.
Click Save or Save & Close.

Embedding an Instagram feed

Please note: Instagram does not provide a single box plug-in to help display live content in Spydus. Currently, only content management platforms such as WordPress are able to embed live feeds from Instagram. However, even in such content management platforms, a plug-in (paid) might be required to draw such live feeds. In Spydus, to embed live feeds from Instagram, a subscription to a social media aggregator (see below) is required.

Social Media Aggregation Information

A social media aggregator is a platform for collecting and displaying content from the various social media channels to websites. It allows consumers to aggregate or gather content from multiple social media platforms, such as Facebook, Twitter, Instagram, YouTube, etc. The other function of a social media aggregator include providing live feeds, customisable feeds, content filtering, and analytics.

Once subscribed to a social media aggregator’s service, users have the option to embed a live Instagram feed as either a JavaScript, HTML code or iframe. This depends on what the social media aggregator provides. There are various social media aggregators available online. As such, the list below is not exhaustive:

#	Name	Supported Social Media Platforms	Free Version Available?	Paid Version Features
1	Aggreto	Facebook, Instagram, Twitter, YouTube, Pinterest, LinkedIn, Tumblr, RSS feeds	Yes	Live Instagram feed embed, customizable designs, moderation, analytics, etc.
2	Dialogfeed	Facebook, Instagram, Twitter, YouTube, LinkedIn, RSS feeds	Yes	Live Instagram feed embed, customizable designs, moderation, analytics, etc.
3	EmbedSocial	Facebook, Instagram, Twitter, YouTube, LinkedIn	Yes	Live Instagram feed embed, customizable designs, moderation, analytics, etc.
4	Juicer	Facebook, Instagram, Twitter, YouTube, Pinterest, Tumblr, LinkedIn, RSS Feeds	Yes	Live Instagram feed embed, customizable designs, moderation, analytics, etc.
5	SociableKIT	Facebook, Instagram, Twitter, YouTube, Pinterest, LinkedIn, Vimeo, Flickr, Tumblr, TikTok, RSS Feeds	Yes	Live Instagram feed embed, customizable designs, moderation, analytics, custom branding, hashtag campaigns, etc.
6	SnapWidget	Facebook, Instagram, Twitter	Yes	Live Instagram feed embed, customizable designs, moderation, etc.
7	SnipWidget	Facebook, Instagram, Twitter	Yes	Live Instagram feed embed, customizable designs, moderation, etc.
8	Tagembed	Facebook, Instagram, Twitter, YouTube, Pinterest	Yes	Live Instagram feed embed, customizable designs, moderation, analytics, etc.
9	Curator.io	Facebook, Instagram, Twitter	Only free trial available	Live Instagram feed embed, customizable designs, moderation, analytics, etc.
10	Flockler	Facebook, Instagram, Twitter, YouTube, Pinterest, LinkedIn, Flickr, Vimeo, Tumblr	Only free trial available	Live Instagram feed embed, customizable designs, moderation, analytics, etc.
11	TINT	Facebook, Instagram, Twitter, YouTube, Pinterest, LinkedIn, Tumblr, RSS feeds	Only free trial available	Live Instagram feed embed, customizable designs, moderation, analytics, etc.
12	Walls.io	Facebook, Instagram, Twitter, YouTube, Pinterest, LinkedIn, Flickr, Tumblr, RSS feeds	Only free trial available	Live Instagram feed embed, customizable designs, moderation, analytics, etc.

Embedding using the Instagram API

Similar to the above, a social media aggregator would be required to create a live Instagram feed via API and embedding it to Spydus.

Below is a sample code snippet extracted from a social media aggregator using Instagram’s API to create live feeds. Please note that if API is being used, it is necessary to replace 'your_instagram_username' with the Instagram username. The code below uses the Instagram Embed API (https://www.instagram.com/embed.js) to create a live Instagram feed based on the HTML container (<div id="instagramFeed"></div>)

Note: An active Instagram account is required to obtain the necessary API credentials from the Instagram Developer Portal to make use of the Instagram API.

Code snippet using JavaScript and Instagram API	Copy Code
<!DOCTYPE html> <html> <head> <title>Live Instagram Feed</title> </head> <body> <!-- HTML container where the Instagram feed will be displayed --> <div id="instagramFeed"></div> <!-- Include the Instagram API script --> <script src="https://www.instagram.com/embed.js"></script> <script> // Instagram API function to create a live feed function createInstagramFeed(username) { // Create an Instagram feed using the provided username instgrm.Embeds.process(); // Optional: Customize the feed appearance instgrm.Embeds.widgets.createTimeline({ // Customize the options as per your requirements profileUsername: username, maxWidth: 400, maxHeight: 600, container: document.getElementById('instagramFeed') }); } // Call the function to create the Instagram feed with the desired username createInstagramFeed('your_instagram_username'); </script> </body> </html>

Code snippet using JavaScript and Instagram API

Copy Code

<!DOCTYPE html>
<html>
<head>
  <title>Live Instagram Feed</title>
</head>
<body>
  <!-- HTML container where the Instagram feed will be displayed -->
  <div id="instagramFeed"></div>
  <!-- Include the Instagram API script -->
  <script src="https://www.instagram.com/embed.js"></script>
  <script>
    // Instagram API function to create a live feed
    function createInstagramFeed(username) {
      // Create an Instagram feed using the provided username
      instgrm.Embeds.process();
      // Optional: Customize the feed appearance
      instgrm.Embeds.widgets.createTimeline({
        // Customize the options as per your requirements
        profileUsername: username,
        maxWidth: 400,
        maxHeight: 600,
        container: document.getElementById('instagramFeed')
      });
    }
    // Call the function to create the Instagram feed with the desired username
    createInstagramFeed('your_instagram_username');
  </script>
</body>
</html>

Important considerations using Instagram API and embedding in Spydus

There is a limitation imposed by Instagram where API cannot access Instagram consumer accounts (i.e. non-Business or non-Creator Instagram accounts)
- For more information, review https://developers.facebook.com/docs/instagram-api/
A common issue to note with creating your own plugin is the requirement to update it as Instagram makes changes. With every change, the Instagram feed may become unavailable until the code is updated.