I am trying to render Instagram posts in my builder section component which I am using in my pages.
I saw that the thumbnails are plain images. However my requirement is to show the comments, reels, likes and posts icons as shown in the image I added here.
can you tell me how can I achieve this and also the positioning of these icons?
It appears that the builder Instagram widget is not retrieving data such as likes count and comments count. As a result, using the builder API call for Instagram won’t provide that information. I suggest trying to directly access the Instagram graphql API and retrieve the data using the Instagram access token.
e.g.,
fetch(`https://graph.instagram.com/me/media?fields=id,caption,media_url,thumbnail_url,permalink,media_type,like_count,comments_count&access_token=YOUR_ACCESS_TOKEN`)
.then(response => response.json())
.then(data => {
// Process the data
console.log(data);
})
.catch(error => console.error('Error fetching Instagram data:', error));
I had a similar issue and found that using the standard embed code from Instagram didn’t always load comments or likes consistently. For the icons, I ended up using custom SVGs styled with CSS to match Instagram’s look. Also noticed engagement looked way better after I boosted my account a bit through https://famoid.com/buy-instagram-followers/—it helped the posts appear more active when embedded.