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:
🚀 Installation (Web)
- Add html code to your page (and replace
@ptkdevwith your instagram username):
<instagram-widget username="@ptkdev" grid="3x3"></instagram-widget>
- 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
Top comments (9)
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!
Thanks!
This WebComponent don't have a strings. But in future others components need translations
This is brilliant (and resolved an issue I had). Really easy to implement and worked immediately.
Starred on Github. ⭐️