Adding an Instagram feed to your website is a great way to showcase your social media content, boost engagement, and keep your site looking fresh with dynamic updates. With OzSpeed’s Website Builder, you can easily embed your Instagram feed and customize its appearance to match your website’s style. Here’s how to set it up step by step.
Step 1: Access the Website Editor #
To start adding an Instagram feed, open the page editor in hPanel.
- Log in to hPanel at ozspeed.com.au.
- Go to Website Builder > Edit Site.
- Navigate to the page where you want to add the Instagram feed, such as the Homepage, Gallery, or Footer.
Tip: #
- Placing the Instagram feed on the homepage or in the footer can give it high visibility across your entire website.
Step 2: Add an Instagram Feed Element #
The Website Builder includes an Instagram Feed Block that you can easily drag and drop onto your page.
How to Add an Instagram Feed: #
- Click Add Element or + Add New Section in the editor toolbar.
- Select Instagram Feed from the list of elements.
- Drag the Instagram Feed Block to the desired location on your page.
- Click Insert to add it.
Tip: #
- Place the feed in a section with plenty of space for a better visual experience, such as below the main content or in a gallery section.
Step 3: Connect Your Instagram Account #
To display your Instagram feed, you need to connect your Instagram account.
How to Connect: #
- Click on the Instagram Feed Block to open the settings panel.
- Click Connect Instagram Account.
- Log in to your Instagram account when prompted.
- Authorize access to your Instagram feed by clicking Allow.
- Click Save.
Tip: #
- Ensure you’re logged into the correct Instagram account before connecting to avoid linking the wrong feed.
Step 4: Customize the Instagram Feed #
You can customize the appearance of the Instagram feed to match your website’s design.
Customization Options: #
- Click on the Instagram Feed Block to open the Design Settings.
- Choose the feed layout (grid, carousel, or masonry).
- Adjust the number of columns and rows to control how many posts are displayed.
- Customize the background color, border, and padding for a polished look.
- Click Save.
Tip: #
- Use a grid layout for a clean, organized look, or try a carousel layout for a dynamic, sliding display.
Step 5: Add a Call to Action (Optional) #
Encourage users to follow your Instagram profile by adding a Call to Action (CTA) button.
How to Add a CTA: #
- Click on the Instagram Feed Block to edit the settings.
- Enable the Show Follow Button option.
- Customize the button text (e.g., “Follow Us on Instagram”).
- Click Save.
Tip: #
- Use a contrasting color for the CTA button to make it stand out and attract clicks.
Step 6: Preview and Test the Instagram Feed #
Before publishing, preview the feed to ensure it looks good and functions properly.
How to Preview: #
- Click Preview in the top toolbar.
- Check the Instagram feed on both desktop and mobile views.
- Click on a few posts to verify that they link correctly to your Instagram profile.
Tip: #
- Use an incognito window or clear your browser cache to see the changes as a new visitor would.
Step 7: Publish the Changes #
Once you’re satisfied with the Instagram feed, publish your updates to make it live.
How to Publish: #
- Click Publish in the top right corner of the editor.
- Confirm the changes to go live.
Tip: #
- Announce the new Instagram feed on your social media or in your newsletter to encourage visitors to check it out.
Troubleshooting Tips #
- Feed Not Displaying Properly:
- Ensure your Instagram account is set to public. Private accounts cannot display their feed on a website.
- Check your internet connection and refresh the page.
- Posts Not Updating:
- Instagram’s API may have a delay in updating new posts. Give it a few minutes to sync.
- Disconnect and reconnect your Instagram account in the settings panel.
- Feed Layout Issues on Mobile:
- Use the responsive design settings to adjust the feed layout for mobile devices.
- Test the feed on different devices to ensure it displays correctly.
Additional Tips: #
- Showcase User-Generated Content: Display posts that feature your brand’s hashtag to engage with your audience and build social proof.
- Optimize for Speed: Limit the number of posts displayed to avoid slowing down your website’s loading time.
- Monitor Engagement: Use Instagram insights to track clicks and interactions from your website feed.
