Instagram Widget: My First WebComponent
Tags: instagram, webcomponents, javascript, webdev
Published: 2020-05-01 11:45:32

---
title: Instagram Widget: My First WebComponent
published: true
description: Photos Box of your Instagram Profile for your blog or website, show your latest 9 photo of instagram
tags: instagram, webcomponents, javascript, webdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/ofnx0ufo1jvzxsr8m1b9.png
---

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](https://codepen.io/ptkdev/pen/WNQOYqy)] [[NPM](https://www.npmjs.com/package/@ptkdev/webcomponent-instagram-widget)] [[GITHUB](https://github.com/ptkdev-components/webcomponent-instagram-widget)]

> 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 ](https://raw.githubusercontent.com/ptkdev-components/webcomponent-instagram-widget/nightly/.github/assets/screenshot/webcomponent-instagram-widget-screen1.png?)](https://raw.githubusercontent.com/ptkdev-components/webcomponent-instagram-widget/nightly/.github/assets/screenshot/webcomponent-instagram-widget-screen1.png)


## 🚀 Installation (Web)
1. Add html code to your page (and replace `@ptkdev` with your instagram username):
```html
<instagram-widget username="@ptkdev" grid="3x3"></instagram-widget>
```
2. Require javascript in yourpage (before `</body>`):
```html
<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](https://it.freepik.com/) Premium License)
* Documentations and Translations have **CC BY 4.0 License**


# ❤️ Thanks! Leave a feedback!