HTML

Learn how to get started building an Instagram feed with HTML Attributes.

1. Getting Started

Building a social feed with HTML is straightforward and efficient. Our advanced attribute system powers your feeds, allowing you to seamlessly integrate attributes directly into your own structure.

Key Features:

• Attributes: Feeds are built by adding attributes directly to your HTML structure

• Attributes Table: You can view all available attributes in the attributes table.

• Flexability: All attributes are optional (eg. caption, avatar), only the feed wrapper and post wrapper are required.

1.1. Create Feed *

From your FeedSpring dashboard, select the "Connect New Feed" option and follow the steps to create a new feed. For more detailed getting started instructions, view our documentation page.

1.2. Installation *

Include the FeedSpring library in your HTML file:

<!-- FeedSpring Instagram Script -->
<script src="https://scripts.feedspring.com/instagram-attrs.js" async defer></script>

1.3. Basic Usage

FeedSpring works by adding custom attributes to your HTML elements. These attributes define how the feed and its content are structured and displayed. Here’s a detailed example:

    <div feedspring="YOUR-UNIQUE-ID">
        <!-- User Info -->
        <div feed-field="avatar"></div>
        <div feed-field="username"></div>
        <div feed-field="follower-count"></div>
        <div feed-field="bio"></div>

        <!-- Posts -->
        <div feedspring="post">
            <div feed-field="caption"></div>
            <div feed-field="img"></div>
            <div feed-field="like-count"></div>
            <div feed-field="comment-count"></div>
        </div>
        <!-- Repeat the above <div feedspring="post"> block for multiple posts -->
    </div>

In this example, the feedspring attribute is used to wrap the entire feed and individual posts, while feed-field attributes are used to specify the content to display within each post.

---

2. Setup

2.1. Feed Wrapper

The Feed Wrapper specifies where the feed will be rendered on the page and can be added to any element that will enclose the entire feed. We recommend adding a new <div> block to wrap your feed and applying the attribute directly to this element.

Add the attribute name="feedspring" andvalue="YOUR-UNIQUE-ID" to the <div> block

<div feedspring="YOUR-UNIQUE-ID">
    <!-- Post elements go here -->
</div>

Your unique feed ID is available on the feed setup page within the app and can be copied directly from there.

2.2. Post Wrapper

The Post Wrapper contains the main content of a post and is nested inside the Feed Wrapper. This is where you'll add any layout elements related to your posts, such as captions or timestamps. To create the Post Wrapper, add the following attribute to a <div> block that will enclose your post. You can duplicate this block for as many posts as you wish to display.

Simply add the attribute name="feedspring" andvalue="post"

<div feedspring="post">
    <!-- Fields for the post go here -->
</div>

---

3. Building

3.1. Available Attributes

The following attributes can be added to your layout to start displaying their respective data.

Field	Attribute Name	Attribute Value	Post Attribute*
Image	feed-field	img
Caption	feed-field	caption
Timestamp	feed-field	timestamp
Link	feed-field	link
Comment Count	feed-field	comment-count
Like Count	feed-field	like-count
Username	feed-field	username
Avatar	feed-field	avatar
Bio	feed-field	bio
Following Count	feed-field	following-count
Follower Count	feed-field	follower-count

Post Specific: Some attributes can only be added to structure inside the post wrapper, these attributes are labeled as 'Post Attribute' above. All other attributes can be placed anywhere inside your feed wrapper.

3.2. Build Feed

The follow paragraphs outline attributes that can be added to your structure

3.2.1 Instagram Image

To display the image, add the following attribute to a <img> element on your page. Since this attribute is related to a post, it should be placed within an element that has the Post Wrapper.

Simply add the attribute name="feed-field" andvalue="post"

3.2.2 Caption

To display the caption, add the following attribute to a <text> element on your page. Since this attribute is related to a post, it should be placed within an element that has the Post Wrapper.

Simply add the attribute name="feed-field" andvalue="caption"

3.2.3 Timestamp

To display the timestamp, add the following attribute to a <text> element on your page. Since this attribute is related to a post, it should be placed within an element that has the Post Wrapper.

Simply add the attribute name="feed-field" andvalue="timestamp"

Timestamp Format: We also provide options to format the timestamp to suit your own requirements. Please review our timestamp documentation to learn more about this.

3.2.4 Link

To link to the post, add the following attribute to a <link> element on your page. Since this attribute is related to a post, it should be placed within an element that has the Post Wrapper.

Simply add the attribute name="feed-field" andvalue="link"

3.2.5 Like Count

To display the like count, add the following attribute to a <text> element on your page. Since this attribute is related to a post, it should be placed within an element that has the Post Wrapper.

Simply add the attribute name="feed-field" andvalue="like-count"

3.2.6 Comment Count

To display the comment count, add the following attribute to a <text> element on your page. Since this attribute is related to a post, it should be placed within an element that has the Post Wrapper.

Simply add the attribute name="feed-field" andvalue="comment-count"

3.2.7 Username / Handle

To display the username, add the following attribute to a <text> element on your page.

Simply add the attribute name="feed-field" andvalue="handle"

3.2.8 Avatar

To display the avatar, add the following attribute to a <img> element on your page.

Simply add the attribute name="feed-field" andvalue="avatar"

3.2.9 Bio

To display the bio, add the require following to a <text> element on your page.

Simply add the attribute name="feed-field" andvalue="bio"

3.2.10 Following Count

To display the following count, add the following attribute to a <text> element on your page.

Simply add the attribute name="feed-field" andvalue="following-count"

3.2.11 Follower Count

To display the follower count, add the following attribute to a <text> element on your page.

Simply add the attribute name="feed-field" andvalue="follower-count"

4. Additional Settings

FeedSpring provides a range of advanced options to further customize your feeds and enhance their functionality. Explore the following sections to discover how to implement these features into your builds:

4.1 Feed Options

Learn about additional options you can add to your feeds, such as language tags and more.

4.2 Placeholder & Loading

Learn how to create a seamless loading experience for your feeds using placeholders.

4.3 Dynamic Attribute

Learn how to create a dynamic feed, using the layout of a single post.

4.4 Timestamp

Learn how to adjust timestamp format to suit exactly what you want for your feed.

4.5 Coded Solutions

View our collection of coded solutions built to help you solve problems with simple CSS/JS