How to embed your instagram feed on your website

How to Embed Your Instagram Feed On Your Website

Ensure your Instagram account is set to public:

Private accounts cannot be embedded on external websites, so make sure your Instagram account is set to public.

Generate an Instagram Access Token:

You’ll need an access token to authenticate your website with Instagram’s API. Here’s how you can generate one:

Visit the Instagram Developer website at https://www.instagram.com/developer/.

Click on “Manage Clients” and then “Register a New Client.”

Fill in the required information for your application (e.g., name, website, redirect URI).

Once registered, go to the “Manage” tab of your application and click on “Security” under “Client Settings.”

In the “Valid Redirect URIs” section, enter the URL of your website where you want to embed the Instagram feed.

Save your changes and note down the Client ID and Client Secret.

Open a new tab in your browser and enter the following URL, replacing CLIENT_ID with your actual Client ID: https://api.instagram.com/oauth/authorize/?client_id=CLIENT_ID&redirect_uri=REDIRECT_URI&response_type=token.

You will be redirected to a page where you need to authorize your application to access your Instagram account.

After authorization, you will be redirected to the specified REDIRECT_URI, and the access token will be present in the URL.

Choose an Instagram feed plugin or widget:

There are various third-party plugins and widgets available that can help you embed your Instagram feed on your website. Some popular options include Juicer, SnapWidget, Instagram Feed, and Smash Balloon. Choose the one that suits your requirements and follow their instructions for installation and setup.

Configure the plugin/widget with your access token:

Once you have installed the chosen plugin/widget, you will usually be prompted to provide your Instagram access token. Paste the token you obtained in step 2 into the appropriate field or section provided by the plugin/widget.

Customize the appearance (optional):

Depending on the plugin/widget you’re using, you may have options to customize the appearance of the embedded Instagram feed. You can typically adjust settings such as the number of posts displayed, layout, size, colors, and other visual aspects.

Generate and copy the embed code:

After customizing the appearance, the plugin/widget should provide you with the necessary embed code. This code is usually in HTML format. Copy the code snippet.

Paste the embed code into your website:

Open the HTML file or content management system (CMS) of your website editor where you want to embed the Instagram feed. Find the appropriate section or page where you want the feed to appear and paste the embed code into the HTML editor or CMS’s designated area.

Save and publish your website:

Once you have pasted the embed code, save the changes to your website and publish it. Preview the page to ensure that the Instagram feed is displaying correctly.

How to embed your Instagram feed for free

To embed your Instagram feed on your website for free, you can use Instagram’s built-in embed feature. Here’s how you can do it:

Open a web browser and go to www.instagram.com.
Log in to your Instagram account.

Navigate to the Instagram feed you want to embed. This can be your own profile, a specific user’s profile, or a hashtag feed.

Once you’re on the desired feed, look for the three-dot menu icon located above the top-right corner of the posts. Click on it.

In the dropdown menu that appears, click on “Embed.”

A dialog box will appear with the embed code for the Instagram feed. You can customize the embed options by clicking on the “Customize” button.

Select the desired embed options, such as the maximum width, hide caption, or include the author. The preview on the right side will update accordingly.

Once you’re satisfied with the customization, click on the “Copy Embed Code” button located below the preview.

The embed code is now copied to your clipboard.

Open the HTML file or content management system (CMS) of your website editor where you want to embed the Instagram feed. Find the appropriate section or page where you want the feed to appear.

Paste the embed code into the HTML editor or CMS’s designated area.

Save and publish your website. Preview the page to ensure that the Instagram feed is displaying correctly.

By following these steps, you can embed your Instagram feed on your website using Instagram’s native embed feature without incurring any additional costs.

Sign up for a social media aggregator with a free plan

One such social media aggregator with a free plan is “Juicer.” Juicer allows you to aggregate and display content from various social media platforms, including Instagram, Twitter, Facebook, YouTube, and more, in a unified feed on your website.

To sign up for Juicer’s free plan, follow these steps:

Go to the Juicer website at https://www.juicer.io/.

Click on the “Get Started” or “Sign Up” button.

You’ll be directed to the pricing page. Scroll down or look for the “Free Plan” option.

Click on the “Start Free” or “Sign Up Free” button associated with the free plan.

Fill in the required information, such as your name, email address, and password.

Once you’ve provided the necessary details, follow the prompts to set up your account.

After signing up, you’ll be able to access your Juicer dashboard.

In your Juicer dashboard, you can connect your social media accounts, including Instagram, and customize your feed’s appearance and settings.

Follow Juicer’s instructions to generate the embed code for your Instagram feed or any other social media feeds you want to display on your website.

Copy the generated embed code and paste it into the HTML editor or CMS of your website where you want the feed to appear.

Save and publish your website to see the embedded social media feed.

Please note that service offerings, including free plans, can change over time, so it’s always a good idea to verify the latest information on Juicer’s website before signing up.

Step 1. Create a new feed and choose whether or not posts should be automatically approved

Identify the Social Media Aggregator:

Choose a social media aggregator tool that allows you to create feeds and customize the approval process. Some popular options include Juicer, Taggbox, Flockler, and Curator.io.

Sign up and Log in:

Visit the website of the chosen social media aggregator and sign up for an account. Provide the necessary details and follow the registration process. Once completed, log in to your account.

Create a New Feed:

In your social media aggregator’s dashboard or control panel, look for an option to create a new feed. This option might be labeled differently based on the platform you choose.

Select the Social Media Platform:

Choose the social media platform from which you want to aggregate content. For example, you may select Instagram.

Configure Feed Settings:

Customize the feed settings according to your preferences. This typically involves specifying hashtags, usernames, profiles, or other criteria to filter the content you want to display in your feed.

Enable Post Approval:

Look for the option to enable post approval or moderation for the feed. This feature allows you to review and manually approve or decline the posts before they are displayed in your feed. If you want to automatically approve posts without manual moderation, make sure to disable or leave this option unchecked.

Customize Display Options:

Explore the customization options provided by the social media aggregator to adjust the appearance and layout of your feed. You may have options to choose the number of posts displayed, design templates, colors, fonts, and more.

Generate the Embed Code:

Once you have configured the feed settings and appearance, the social media aggregator will generate an embed code for you. This code needs to be copied.

Embed the Feed on Your Website:

Open the HTML file or content management system (CMS) of your website editor where you want to embed the feed. Locate the appropriate section or page and paste the embed code into the HTML editor or designated area.

Save and Publish:

Save the changes you made to your website and publish it. Preview the page to ensure that the embedded feed is displaying correctly.

Remember to refer to the specific instructions and features provided by the chosen social media aggregator to create a new feed and configure the approval settings as per your requirements.

Step 2: Connect your Instagram account and choose the type of posts

To connect your Instagram account and choose the type of posts, you would typically use the settings or options available within the platform or app itself. Here’s a general outline of how you can connect your Instagram account and configure the type of posts:

Open the Instagram app or visit the Instagram website on your computer.
Log in to your Instagram account using your credentials.

Once logged in, navigate to your profile by tapping on the profile icon at the bottom right corner of the app or clicking on your profile picture on the website.

Look for the settings or options menu, typically represented by three horizontal lines or dots. It is usually located at the top right corner of the app or in the top navigation bar on the website.

In the settings or options menu, search for an option related to “Account Settings,” “Privacy,” or “Post Settings.”

Within the account settings, privacy, or post settings section, you should find options to configure the type of posts you want to share. This can include options such as photo posts, video posts, story posts, or carousel posts.

Review the available settings and select the desired type(s) of posts you want to enable or disable for your account.

Save the changes if required and exit the settings or options menu.

Please note that Instagram’s interface and options may change over time as they update their platform. It’s always a good idea to refer to Instagram’s official documentation or help center for the most up-to-date instructions on configuring post settings and account preferences.

Step 3: Curate your feed (approve and remove posts)

Open the Instagram app or visit the Instagram website on your computer.

Log in to your Instagram account using your credentials.

Once logged in, navigate to your profile by tapping on the profile icon at the bottom right corner of the app or clicking on your profile picture on the website.

Look for the settings or options menu, typically represented by three horizontal lines or dots. It is usually located at the top right corner of the app or in the top navigation bar on the website.

In the settings or options menu, search for an option related to “Post Settings,” “Privacy,” or “Feed Settings.”

Within the post settings, privacy, or feed settings section, you may find options to curate your feed, such as the ability to approve or remove posts before they appear in your feed.

Enable the option for manual approval if available. This will allow you to review and approve posts before they are displayed in your feed.

Save the changes if required and exit the settings or options menu.

To curate your feed, whenever you receive a new post notification or see a post in your feed, you can take the following steps:

Open the post by tapping on it or clicking on it.

Review the content of the post, including the image, caption, and any associated tags or mentions.

If you want to approve the post, you can like it or leave a comment to show your approval.

If you want to remove the post from your feed, you may have options to hide the post, unfollow the user, or report the post as inappropriate.

Please note that the availability of specific curation features may vary depending on your account type (personal or business) and Instagram’s updates. It’s always recommended to refer to Instagram’s official documentation or help center for the most up-to-date information on curating your Instagram feed.

Step 4: Design your feed

Define your visual theme:

Determine the overall look and feel you want for your feed. Consider factors such as color scheme, style (minimalist, bright and bold, vintage, etc.), and the emotions you want to evoke. This will create consistency across your posts.

Use a consistent filter or editing style:

Apply the same filter or editing style to your photos to maintain a cohesive aesthetic. Experiment with different filters or editing tools until you find the one that aligns with your visual theme.

Plan your content:

Consider the types of content you want to share, such as photos, videos, quotes, or graphics. Determine the ratio and order in which you want to post these content types to create a balanced and varied feed.

Create a content calendar:

Establish a posting schedule and plan your content in advance. This ensures a consistent flow of posts and helps you maintain an organized feed. Consider using social media planning tools or apps to schedule and visualize your posts.

Arrange posts strategically:

Pay attention to the order in which you publish your posts. Arrange them to create a visually pleasing layout. You can plan for alternating colors, patterns, or themes to create a visually interesting grid view.

Incorporate negative space:

Negative space refers to empty or blank areas around your posts. By incorporating negative space strategically, you can enhance the visual impact of your content and give your feed a clean and balanced look.

Pay attention to composition:

Consider the composition of each post. Utilize principles such as the rule of thirds, leading lines, symmetry, or focal points to create visually appealing and engaging images.

Preview your feed:

Use Instagram planning tools or apps that allow you to preview your feed before posting. This enables you to visualize how your posts will look together and make adjustments if needed.

Seek inspiration:

Look for inspiration from other Instagram accounts or from popular trends in your niche. Identify accounts with visually appealing feeds and observe how they design and organize their content.

Iterate and refine:

Designing your feed is an ongoing process. Continuously evaluate the visual impact of your posts, experiment with new ideas, and refine your approach based on audience feedback and engagement.

Remember, the design of your feed is a reflection of your brand or personal style. Experiment, have fun, and evolve your feed over time to create a visually captivating Instagram presence.

Step 6: Copy the HTML code into your site

Open your website editor or content management system (CMS). This could be WordPress, Wix, Squarespace, or any other platform you use to manage your website.

Navigate to the page where you want to embed the Instagram feed. This could be your homepage, a dedicated gallery page, or any other section of your website.

Access the HTML editor for the page. This is usually a section where you can directly input HTML code or embed elements.

In a separate tab or window, go back to the source where you obtained the HTML code for the Instagram feed. This could be from Instagram’s embed feature or a third-party tool you’re using to generate the code.

Select and copy the entire HTML code for the Instagram feed. You can typically do this by right-clicking on the code and selecting “Copy,” or by using the keyboard shortcut Ctrl+C (or Command+C on Mac).

Return to your website editor or CMS and locate the HTML editor section for the page you’re working on.

Paste the copied HTML code into the HTML editor. You can do this by right-clicking and selecting “Paste,” or using the keyboard shortcut Ctrl+V (or Command+V on Mac).

After pasting the HTML code, make sure to save or update the page in your website editor or CMS.

Preview the page or visit your website to see the embedded Instagram feed. Check if it appears and functions correctly. If needed, make further adjustments to the layout or settings within your website editor.

Publish your website to make the changes live and visible to your website visitors.

It’s important to note that the specific steps may vary depending on your website editor or CMS. If you encounter any difficulties or have questions, consult the documentation or support resources provided by your website platform for more specific instructions on how to embed HTML code.

Step 7. Check out how the feed looks in your website and make any adjustments

To check how the embedded Instagram feed looks on your website and make any adjustments, you will need to access your website editor or content management system (CMS) yourself. Here’s what you can do:

Log in to your website editor or CMS.

Navigate to the page where you have embedded the Instagram feed.

Preview the page within your website editor or CMS to see how the feed appears.

If the feed doesn’t look as expected or if there are any issues, review the HTML code you copied and pasted into your website.

Double-check if the entire HTML code was copied correctly, without any missing or extra characters.

Make sure there are no conflicting elements or scripts on the page that could interfere with the display of the feed.

If you’re using a third-party tool to generate the embed code, review the settings or customization options provided by that tool. Adjust the options as needed to modify the appearance or behavior of the embedded feed.

If necessary, modify the layout or formatting of the page within your website editor or CMS to better accommodate the embedded feed. This may involve adjusting the size of the container, margins, or other styling elements.

Save your changes within your website editor or CMS.

Preview the page again to see the updated appearance of the embedded Instagram feed.

Repeat the process of making adjustments, saving, and previewing until you are satisfied with the way the feed looks on your website.

Remember, the appearance of the embedded feed can also be influenced by the design and styling of your website template or theme. Consider customizing your website’s overall design to create a cohesive and visually appealing look that complements the Instagram feed.

If you need further assistance with specific adjustments or troubleshooting, it’s recommended to consult the documentation or support resources provided by your website editor or CMS.

Step 8. Continue to moderate the Instagram content on your website

Log in to your social media aggregator’s dashboard or access the moderation tools provided by Instagram.

Look for a section or feature that allows you to manage or moderate the content displayed in your embedded Instagram feed.

Review the content that has been pulled into your feed from your Instagram account or selected hashtags. This could include photos, videos, captions, and comments.

Depending on the moderation options available, you may have the ability to approve or reject individual posts, hide or delete posts, or block certain users.

Evaluate each post based on your moderation guidelines or preferences. Approve or reject posts accordingly.

If there are posts that violate your guidelines or contain inappropriate content, use the available moderation features to hide, delete, or block those posts.

Continuously monitor the content in your Instagram feed to ensure that it aligns with your desired standards and maintains a positive user experience.

If your chosen social media aggregator provides moderation settings, configure the options according to your requirements. This could include automatic filters, keyword blocking, or comment moderation.

Regularly check your social media aggregator’s moderation queue or dashboard to review new content and take appropriate actions.

Stay updated with any changes or updates to the moderation tools provided by your social media aggregator or Instagram. Adjust your moderation strategy as needed to ensure effective content curation.

It’s important to note that the moderation features and capabilities may vary depending on the social media aggregator you’re using or the options provided by Instagram itself. Refer to the specific documentation and resources provided by your chosen platform for more detailed instructions on content moderation.

What types of Instagram feeds can you embed?

User Feed:

This type of feed displays posts from a specific Instagram user’s account. You can embed the feed of your own Instagram account or showcase the content from another user whose posts are relevant to your website’s theme or purpose.

Hashtag Feed:

Hashtag feeds aggregate posts from Instagram that contain a specific hashtag. You can embed a feed that pulls in posts with a particular hashtag, allowing you to curate content related to a specific topic or campaign.

Location Feed:

Location feeds gather posts from Instagram that are tagged with a specific location or geotag. You can embed a feed to showcase user-generated content from a particular location, such as a city, landmark, or venue.

Carousel Feed:

Carousel feeds display Instagram posts in a slideshow-like format. You can embed a feed that shows multiple images or videos in a single post, allowing visitors to swipe through the carousel within your website.

Tagged Feed:

Tagged feeds showcase posts where a specific Instagram account has been tagged. You can embed a feed that collects posts where your Instagram account is mentioned or tagged, enabling you to curate and display user-generated content that involves your brand or account.

Mixed Feed:

A mixed feed combines various types of feeds into a single display. You can embed a feed that includes posts from multiple Instagram accounts, hashtags, locations, or tagged content, offering a diverse and comprehensive collection of Instagram content.

The specific types of Instagram feeds you can embed may depend on the features and options provided by the social media aggregator or tool you use to embed the feed on your website. Different tools may offer different functionalities and limitations.

When embedding an Instagram feed, make sure to comply with Instagram’s terms of service and any usage guidelines specified by the platform or tool you are using.

Top 5 FREE tools for embedding your Instagram feed

Here are five popular and free tools for embedding your Instagram feed on your website:

1.SnapWidget:

SnapWidget allows you to easily embed your Instagram feed, whether it’s a user feed, hashtag feed, or a combination of both. It provides customization options and responsive layouts. The free plan offers basic features with limited customization options.

2.LightWidget:

LightWidget offers a simple and straightforward way to embed your Instagram feed. You can choose between a user feed or hashtag feed and customize the appearance to match your website. The free plan allows you to display a single feed with limited customization.

3.Instagram Official Embedding:

Instagram itself provides an official way to embed Instagram content on your website. You can obtain an embed code directly from Instagram for individual posts or embed your entire profile. It offers basic customization options and is easy to implement. Note that this method requires basic HTML knowledge to customize the code further.

4.Juicer:

Juicer allows you to aggregate and display content from multiple social media platforms, including Instagram. The free plan permits the embedding of one social media feed and offers basic customization options. It also supports hashtag feeds and provides moderation features.

5.POWr.io:

POWr.io offers a range of customizable plugins, including one for embedding Instagram feeds. It allows you to showcase your Instagram photos on your website with various layout options. The free plan provides basic functionality with limited customization options.

While these tools offer free plans, keep in mind that they may have limitations in terms of customization, the number of feeds you can embed, or the frequency of updates. If you require more advanced features or additional feeds, they may offer premium plans at a cost.

Before choosing a tool, consider your specific requirements, such as the type of feed you want to embed, customization options, moderation features, and any limitations imposed by the free plan.


Posted

in

by

Tags: