Cover image for Instagram Widget: My First WebComponent

Instagram Widget: My First WebComponent

ptkdev profile image Patryk Rzucidło Updated on ・2 min read

I am trying to create my own opensource collection of webcomponents. I started by creating an instagram widget: it shows the latest photos of your profile.

The idea is to create an ecosystem of web components to replace heavy wordpress plugins or to have (the same) components that also work on react, angular and vuejs.

Resources: [DEMO] [NPM] [GITHUB]

Webcomponents are the future for me. They allow you to replace wordpress plugins, iframe, invasive javascript libraries. Webcomponents are native components that we also have on react or angular but with better optimized by browsers.

💡 Features

  • [✔️] Easy to use
  • [✔️] MIT License
  • [✔️] Work with: Browserify / Webpack / ReactJS / Angular / Wordpress
  • [✔️] Translations: 🇬🇧 🇮🇹 🇵🇱 (Help me ❤️)

👔 Screenshot

Photos from @ptkdev instagram account:
WebComponent: InstagramWidget

🚀 Installation (Web)

  1. Add html code to your page (and replace @ptkdev with your instagram username):
<instagram-widget username="@ptkdev" grid="3x3"></instagram-widget>
  1. Require javascript in yourpage (before </body>):
<script src="https://cdn.jsdelivr.net/npm/@ptkdev/webcomponent-instagram-widget@latest/dist/lib/en/instagram-widget.min.js"></script>

🧰 Options / Attributes

Parameter Description Values Default value Available since
username Set your instagram username Your instagram username with or without @ @ptkdev v1.0.0
items-limit Set the max number of pictures number: from 0 to 12 9 v1.1.0
grid Set grid aspect ratio 1x1, 2x2, 3x3, etc... or responsive responsive v1.1.0
image-width Set width of images (NOTE: grid different than responsive overwrite this value) length units: 100%, 100px, 100pt 100% v1.1.0
image-height Set height of images length units: 100%, 100px, 100 100% v1.1.0
border-spacing Set spacing around images length units: 5%, 5px, 5pt 2px v2.1.0
border-corners Set border radius of corners: 0: square / 15: rounded / 100: circle number: from 0 to 100 5 v2.1.0
cache Enable/disable cache enabled / disabled enabled v2.1.0

💫 License

  • Code and Contributions have MIT License
  • Images and logos have CC BY-NC 4.0 License (Freepik Premium License)
  • Documentations and Translations have CC BY 4.0 License

❤️ Thanks! Leave a feedback!

Posted on by:


markdown guide

Thanks a lot man! I had an issue some time because Instagram had changed the way how third party tools could access its data. So the WP plugin my client was using to show the Instagram feed was not working anymore.

I had to work a lot to make it work again ... and now, i checked your Github repo and wth it was so easy to grab that instagram feed.

Really really cool implementation, loved it :)


Great bro! Have a nice day :)
Leave me a star 🌟 on github.

I released WordPress plugin of my webcomponents today.


That's a really cool table for the component API


I tried add more attributes can possible, user need all configurations.


You could also add support for shortcode so the end-users of the WP plugin instead of being limited on using a Widget they could just add the shortcode anywhere they want (even inside a widget) and the feed would show up. Shortcode do get parameters so that fits well the webcomponents parameters you have explained on the table.

Hi! I added WordPress plugin + users can paste shortcode where you want.


Looks promising and very useful! Good job!
If you would like help with a french translation, please contact me and let me know how I can help!


This WebComponent don't have a strings. But in future others components need translations