@nocodeapi/embed-instagram-feed
Advanced tools
Comparing version 0.0.2 to 0.0.3
| { | ||
| "name": "@nocodeapi/embed-instagram-feed", | ||
| "version": "0.0.2", | ||
| "version": "0.0.3", | ||
| "description": "Webcomponent embed-instagram-feed following open-wc recommendations", | ||
@@ -5,0 +5,0 @@ "author": "nocodeapi", |
@@ -1,14 +0,28 @@ | ||
| # \<embed-instagram-feed> | ||
| # Embed Instagram Feed  | ||
| This plugin is developed by [NoCodeAPI](https://nocodeapi.com). | ||
|  | ||
| This plugin is brought to you by [NoCodeAPI](https://nocodeapi.com/) | ||
| Embed Instagram Feed is a free plugin that makes is easy for you to embed your Instagram feed (using NoCodeAPI) in your websites, wordpress blog, shopify sites & basically any html site. | ||
| Works on all devices out of the box, phones, tablets & desktops. | ||
| This is reliable and secure method to embed your instagram feed into your static webpages without any coding. | ||
| ### First step: | ||
| ## Preview | ||
| - Get your Instagram API endpoint via NoCodeAPI ↳ https://nocodeapi.com/instagram-api | ||
|  | ||
| - Add this script into your webpage `<head>` tag. | ||
| ## Features | ||
| ```javascript | ||
| - Responsive | ||
| - Lightweight | ||
| ## Usage/Examples | ||
| 1. Get your Instagram API endpoint via NoCodeAPI - [https://nocodeapi.com/instagram-api](https://nocodeapi.com/instagram-api) | ||
| 2. Add this script into your webpage. | ||
| ```html | ||
| <script | ||
@@ -20,3 +34,3 @@ type="module" | ||
| - Just place the `<embed-instagram-feed url="Your Instagram API from NoCodeAPI"></embed-instagram-feed>` into your webpage `<body>` where you want to display your Instagram feeds. | ||
| 3. - Just place the `<embed-instagram-feed url="Your Instagram API from NoCodeAPI"></embed-instagram-feed>` into your webpage `<body>` where you want to display your Instagram feed. | ||
@@ -43,2 +57,33 @@ ### Full code sample | ||
| ### Using npm package | ||
| ## FAQ | ||
| #### Does this work with Wordpress? | ||
| Yes, this plugin works with all websites | ||
| #### Is this plugin free? | ||
| Yes, it is completely free and open source. | ||
| #### Do I need to write code for this? | ||
| No, we have handled this end to end, so all you need to do is, paste this in you website and you are good to go. | ||
| #### How do I customise the style? | ||
| You would need to tweak and override the css classes in order to do this. | ||
| ## Support | ||
| For support, email hello@nocodeapi.com or join our [Telegram channel](https://t.me/NoCodeAPI). | ||
| ## Contributing | ||
| Contributions are always welcome! | ||
| Please feel free to raise a PR, so we can look into it. | ||
| ## Authors | ||
| - [@mddanishyusuf](https://www.twitter.com/mddanishyusuf) | ||
| - [@fayazara](https://www.twitter.com/fayazara) |
@@ -120,2 +120,8 @@ import { html, css, LitElement } from "lit-element"; | ||
| } | ||
| .nc-error { | ||
| text-align: center; | ||
| background-color: #fed7d7; | ||
| padding: 1rem 0.5rem; | ||
| border-radius: 0.25rem; | ||
| } | ||
| `; | ||
@@ -135,7 +141,7 @@ } | ||
| super(); | ||
| this.url = | ||
| "https://v1.nocodeapi.com/betauser/instagram/BSTxoAVotanjuIkh?limit=8"; | ||
| this.url = ""; | ||
| this.title = "Instagram Feed"; | ||
| this.subtitle = "Check out our latest feed from instagram"; | ||
| this.data = []; | ||
| this.apiError = null; | ||
| } | ||
@@ -154,2 +160,3 @@ | ||
| } catch (e) { | ||
| this.apiError = true; | ||
| console.error(e); | ||
@@ -160,3 +167,5 @@ } | ||
| render() { | ||
| return html` | ||
| let htmlTemplate = ""; | ||
| if (this.url && this.url.includes("nocodeapi.com")) { | ||
| htmlTemplate = html` | ||
| <section class="nc-section"> | ||
@@ -198,4 +207,14 @@ <div class="nc-container" v-if="url"> | ||
| </section> | ||
| `; | ||
| `; | ||
| } else { | ||
| htmlTemplate = html` | ||
| <section class="nc-section"> | ||
| <div class="nc-error"> | ||
| <p>Error: Looks like you havent passed the nocode api endpoint</p> | ||
| </div> | ||
| </section> | ||
| `; | ||
| } | ||
| return htmlTemplate; | ||
| } | ||
| } |
Sorry, the diff of this file is not supported yet
No alert changes
Improved metrics
- Total package byte prevSize
- increased by17.11%
13147
- Lines of code
- increased by7.98%
257
- Number of lines in readme file
- increased by104.65%
88
No dependency changes