Get started building your own beautiful Dribbble Feed.
Learn how to get started with this guide below.
In this guide we will outline how you can get started building your own feed for Dribbble. These guides are focused for Webflow users, but the principles can be applied to any development platform or approach that will support HTML attributes.
In general, you should understand the following simple concept - FeedSpring connects the structural <HTML> elements of your site with the live data from your favourite services. We do this through the use of attributes. This means that you can build any design with any layout you want, then add attributes to elements in order to render the live content.
To get started, select add a new feed from your dashboard and select the Dribbble Feed.
From here, you can authorize your account and get started connecting it with FeedSpring. FeedSpring uses your platform's authentication & official APIs to ensure the most secure, fast and effective service for your feeds.
With FeedSpring, you can choose from two implementation types - Attributes or Widget. Our attributes method is currently available, however the widget builder will be coming soon. Remember to keep an eye out for the in application prompts and tips for further help along the way.
Add the FeedSpring script to the <head> tag of your project.
If you are using Webflow, you can add this to your page settings, or globally through your project settings.
<script src="https://scripts.feedspring.co/dribbble-attrs.js" async defer></script>
We will now begin to build the foundation of your feed by adding two core elements - the Feed & Post Wrappers.
The Feed Wrapper Attribute helps us identify where your feed is located on the page. This attribute should be attached to something that will wrap all your feed content. In most cases this might be a section (div) or the container <div>. You can also add a new div-block and use this to wrap the feed.
Simply add the attribute Name: feedspring and your unique attribute value Value: dribbble_xxx
You will find these values from your build page in app.
Want a visual example? Check out this read-only demo.
Now we can add the Post Wrapper Attribute. Think of this as an individual item from one of your feeds - for example, an Instagram post, a Google review, a Youtube video. Inside this feed item is where we will have most of our content like images, captions, reviews etc.
Simply add the attribute Name: feedspring and your attribute value Value: post
Want a visual example? Check out this read-only demo.
In this section we will now add additional attributes to our elements to start rendering content. You can check the table for a full list of available attributes and learn more about each of them down below.
This table outlines all the attributes you can add to build your feed. For example, to display the project image from a Dribbble post, you will add the attribute Name: feed-field and the attribute value as Value: img
To show the image for your Dribbble feed, add the attribute to a <img> on your page.
Add the attribute Name: feed-field and add the attribute value Value: img
To show the post title, add the attributes to a <text-block> on your page.
Add the attribute Name: feed-field and add the attribute value Value: title
To link to your post, add the following attribute to a <link> on your page.
Add the attribute Name: feed-field and add the attribute value Value: link
To show the timestamp, add the following attribute to a <text-block> on your page. By default, your timestamp will be displayed like this - October 09, 2023.
Add the attribute Name: feed-field and add the attribute value Value: timestamp
Bonus tip: You can add a custom timestamp, by using the formats here. You can also use our pre-set format, which renders in the following format - 12 days ago. To add this pre-set, simply add an additional attribute Name: feed-timestamp and add the attribute value Value: from-now Add this attribute as well as the original attribute listed above.
To display the post tags, add the following attribute to a <text-block> on your page.
Add the attribute Name: feed-field and add the attribute value Value: tag
To display the profile avatar, add the following attribute to an <img> on your page. It is recommended that this attribute is added to the Feed Wrapper rather than the Post Wrapper.
Add the attribute Name: feed-field and add the attribute value Value: avatar
To display the profile name, add the following attribute to a <text-block> on your page. It is recommended that this attribute is added to the Feed Wrapper rather than the Post Wrapper.
Add the attribute Name: feed-field and add the attribute value Value: name
To display the profile bio, add the following attribute to a <text-block> on your page. It is recommended that this attribute is added to the Feed Wrapper rather than the Post Wrapper.
Add the attribute Name: feed-field and add the attribute value Value: bio
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
To link directly to the Dribbble profile, add the following attribute to a <link> on your page. It is recommended that this attribute is added to the Feed Wrapper rather than the Post Wrapper.
Add the attribute Name: feed-field and add the attribute value Value: profile-link
To display the follower count, add the following attribute to a <text-block> on your page. It is recommended that this attribute is added to the Feed Wrapper rather than the Post Wrapper.
Add the attribute Name: feed-field and add the attribute value Value: follower-count
To display the profile location, add the following attribute to a <text-block> on your page. It is recommended that this attribute is added to the Feed Wrapper rather than the Post Wrapper.
Add the attribute Name: feed-field and add the attribute value Value: location
Once you have completed the core build, you can continue on to add Additional Settings to your feed - including naming your feed, choosing the number of images you want to display and adding whitelist domains.
You can can test your feed by publishing your website and reviewing the live link. If something doesn't look right and you need to troubleshoot errors, right click on your page and click 'Inspect', then navigate to the console tab at the top. Here we will display any errors we found with your setup. If you need assistance, reach out to our friendly team for help.
Powerful feeds ⚡️ for your Webflow sites.
