DEV Community

Cover image for Instagram Widget: My First WebComponent
Patryk Rzucidło
Patryk Rzucidło

Posted on • Updated on

Instagram Widget: My First WebComponent

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>
Enter fullscreen mode Exit fullscreen mode
  1. Require javascript in yourpage (before </body>):
<script src=""></script>
Enter fullscreen mode Exit fullscreen mode

🧰 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!

Top comments (11)

arberbr profile image
Arber Braja

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 :)

ptkdev profile image
Patryk Rzucidło • Edited

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

I released WordPress plugin of my webcomponents today.

seanmclem profile image
Seanmclem • Edited

That's a really cool table for the component API

ptkdev profile image
Patryk Rzucidło

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

arberbr profile image
Arber Braja

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.

Thread Thread
ptkdev profile image
Patryk Rzucidło

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

christophecraig profile image
Christophe Craig

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!

ptkdev profile image
Patryk Rzucidło

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

alexpcooper profile image
Alex Cooper

This is brilliant (and resolved an issue I had). Really easy to implement and worked immediately.
Starred on Github. ⭐️