DEV Community

loading...
Cover image for Instagram Widget: My First WebComponent

Instagram Widget: My First WebComponent

Patryk Rzucidło
🐞 Javascript Developer - I make awesome Open Source software, bot, app and tools.
Updated on ・2 min read

Hi!
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="https://cdn.jsdelivr.net/npm/@ptkdev/webcomponent-instagram-widget@latest/dist/lib/en/instagram-widget.min.js"></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!

Discussion (11)

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

Collapse
ptkdev profile image
Patryk Rzucidło Author • Edited

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

I released WordPress plugin of my webcomponents today.

Collapse
seanmclem profile image
Seanmclem • Edited

That's a really cool table for the component API

Collapse
ptkdev profile image
Patryk Rzucidło Author

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

Collapse
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 Author

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

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

Collapse
ptkdev profile image
Patryk Rzucidło Author

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

Collapse
alexpcooper profile image
Alex Cooper

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