Navigation
Inside The Sphere
🏠
Home
🛠️
Smart Tools
📧
Newsletter Builder

Adding a Social Feed to Your Website

🎬 Instagram Social Feed Integration Tutorial - Watch the complete guide above

📱 Instagram Social Feed Integration Guide

Complete step-by-step instructions for adding an Instagram feed to your website using elfsight.com and integrating it into a KV core website.

🌐 About Elf Sight Integration

This guide uses the Instagram feed widget from elfsight.com. The presenter uses the Pro version to avoid app logos, but a free version is also available. The paid version costs around $12 per month and is useful for managing multiple websites.

1️⃣

Part 1: Setting up Your Social Feed on elfsight.com

  1. Navigate to elfsight.com:
    • Go to elfsight.com (link available in the video and on the presenter's blog)
    • The presenter uses the Instagram feed app and pays for Pro version to avoid logos
  2. Create a New Widget:
    • Once on elfsight.com, create a widget
    • Browse different feed options - the presenter prefers the top template
  3. Configure Your Social Account:
    • Add the social account (can be yours or another account like Remax)
    • Business accounts connect through Facebook (presenter noted issues with managed pages)
    • For public accounts, input username directly from the account's URL
    • You can also add feeds by searching hashtags
    • Click "add" - this process may take about a minute
🎨

Customize the Layout

  1. After adding the account, you will see all the posts
  2. Navigate to the "Layout" section (not "Post" or "Style")
  3. Adjust columns and rows: Use two columns for a simpler look (one is often not enough)
  4. Add spacing/gap: Add a gap of 10 to prevent posts from overlapping and create white space
  5. Once satisfied with the layout, click "publish"
  6. Close the window - the widget will initially be "Untitled"
2️⃣

Part 2: Integrating the Social Feed into Your Website

  1. Get the Widget Codes:
    • From your created widget (might be "Untitled" initially), click "install"
    • You will receive two different codes that need to be added to your website
  2. Add the Custom Header Code (Script):
    • Copy the top code (the script)
    • Go to your KV core website settings
    • Scroll down to "custom header code"
    • Paste the copied script into this section
    • Save the changes
  3. Add the Feed Code (Widget):
    • The bottom code is the feed code
    • Return to your website manager in KV core, go to "widgets"
    • Ensure you are on the correct scope (company or your specific website)
    • Add a new custom widget
    • Give it a name (e.g., "discover C IG feed")
    • Fill in all required spots within the custom widget
    • Paste the feed code (bottom code) into the HTML section
    • Save the widget (may take a moment to process)
3️⃣

Part 3: Arranging and Refining Your Feed

  1. Place the Feed Widget:
    • Decide where to place the feed on your website
    • The presenter added it near existing logo and "follow me" button
    • Refresh your website to see the changes
    • Note: The widget creator will likely be the only one to see it initially
  2. Adjust Spacing and Position (Optional):
    • If the feed appears too close to other elements, adjust position
    • Move other widgets (like "market report" bar) to create space
    • Edit the IG feed widget and add paragraph tags (<p>) for spacing
    • Refresh the site to see added space
    • Continue drag and drop widgets to rearrange layout as desired
  3. Final Review:
    • Review the new layout on your website
    • Arrange elements like featured area, branding, feed, contact box, and other sections
    • The presenter's final arrangement included branding, feed, contact area, and other sections

💡 Pro Tip

The elfsight.com app offers a free version (likely for one feed) and a paid version (around $12/month for more feeds). The paid version is particularly useful for managing multiple websites and removing app branding.