We are continuing the series of videos that we’ve created to showcase the EmbedSocial integration with Webflow.
In this video, I will show you how to use the option Collections in Webflow, and embed Facebook albums on your website, dynamically.
For example, you can create an event Collection and for every event page display the responding album by just entering the Album ID. This means that you can create a Collection and later when you add a new item to your collection you will just need to enter the Album id, instead of embedding the full EmbedSocial code.
Here is how to embed Facebook Albums into WebFlow collection pages in a short recap of the steps in the video:
Once you have created your events templates, in the events settings, you would need to create new collection field:
“add new field” then choose
Plain text
Name the label: EmbedAlbum ID
Press “Save collection”
This is the 1st step if you want to create a dynamic embed. Webflow is great for this because with the dynamic embed working in behind you will be able to have different albums for different events.
The 2nd step would be to embed the unique Album IDs into the newly created collection field that we created in the first step. In this example, we are going to use 2 different IDs to showcase in Webflow event pages 2 different albums.
The case here is that depending on your goals, you will probably want to show different activities on different pages thus in this tutorial we are taking into consideration that fact. Now as you can see from the video, at the very bottom of the event pages, there is a new input field that we created earlier in step 1. It is the EmbedAlbum ID field where you need to enter the unique Album ID that you can get it from our embeddable codes. Just copy the embeddable code and paste it into the new field we created – EmbedAlbum ID, but make sure you include the unique Album ID only, as shown in the video. Now go ahead and do the same step but for the other unique Album ID, associated with the other event page as shown in the video. Make sure you press save everytime you do this, the “save event” button is located in the right upper corner.
The 3rd step would be to navigate to the Pages section.
Select the Events templates
Add the dynamic embed from the list of components into the events template
Copy/paste the embeddable code provided by EmbedAlbum into the dynamic embed
Make sure to substitute the unique Album ID with the Add Field – EmbedAlbum ID as shown in the video
Press save & close
The 4th step is the final one. Publish all the changes and modifications we have made. After you do this as shown in the video you will be able to see all of your beautiful albums/pictures/galleries in action by Webflow dynamic embed & EmbedAlbum integration. You can do different customizations on the design, layout, text, color and much more via your EmbedAlbum account, all the changes will be reflected in Webflow.
Please note: You can do the same for any product provided by the EmbedSocial platform. Follow the same steps, you can embed entire Facebook or Instagram galleries and feeds of Google and Yelp reviews in your Webflow website. You can embed pictures from Google location as well, in short everything you can do with EmbedSocial products is integrated and possible via Webflow.
Go ahead create your stunning website via Webflow and use EmbedSocial products to integrate your social media activity with your Webflow website.
Hope you will find this tutorial helpful.
If you have any questions or need additional assistance please feel free to reach out and chat with us or send us an email at support@embedsocial.com
We're happy to help.