An Interest In:
Web News this Week
- April 25, 2024
- April 24, 2024
- April 23, 2024
- April 22, 2024
- April 21, 2024
- April 20, 2024
- April 19, 2024
Some of Our Sources
- Engadget
- Just Creative
- Pearsonified
- Spoon Graphics
- Creative Curio
- Fuel Your Creativity
- Fudge Graphics
- CSS Globe
- 24 Ways
- Willems Lab
Help Webnuz
Referal links:
May 1, 2020 11:45 am GMT
Original Link: https://dev.to/ptkdev/instagram-widget-my-first-webcomponent-51ja
Instagram Widget: My First WebComponent
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" />- 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!
Original Link: https://dev.to/ptkdev/instagram-widget-my-first-webcomponent-51ja
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To