Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
@ptkdev/webcomponent-instagram-widget
Advanced tools
Changelog
v2.9.0 (March 04, 2021)
https://www.instagram.com/${this.options["username"]}/?__a=1
with ?__a
get parameter and this widget stopped work. Current workaround: we use google images proxyReadme
Last 9 Photos: Instagram Widget of your Instagram Profile for your blog. Show latest 9 pics from your instagram account.
⛔ DISCLAIMER: This is an unofficial instagram library and offers no warranty! All trademarks and logos belong to their respective owners.
This project is free, open source and I try to provide excellent free support. Why donate? I work on this project several hours in my spare time and try to keep it up to date and working. THANK YOU!
See Demo here. Photos from @ptkdev account:
@ptkdev
with your instagram username):<instagram-widget username="@ptkdev" grid="3x3"></instagram-widget>
</body>
):<script src="https://cdn.jsdelivr.net/npm/@ptkdev/webcomponent-instagram-widget@latest/dist/lib/en/instagram-widget.min.js"></script>
You can replace en
in jsdelivr cdn with it
or pl
and load different languages or replace @latest
with specific version, example @2.0.1
.
See folder examples
, run with npm run example
. Below is available a description of options
values.
npm install @ptkdev/webcomponent-instagram-widget --save
@ptkdev
with your instagram username):<instagram-widget username="@ptkdev" grid="3x3"></instagram-widget>
require("@ptkdev/webcomponent-instagram-widget");
or
import "@ptkdev/webcomponent-instagram-widget";
See folder examples
, run with npm run example
. Below is available a description of options
values.
Appearance
--> Widget
--> insert HTML Widget
and paste html code (and replace @ptkdev
with your instagram username):<instagram-widget username="@ptkdev" grid="3x3"></instagram-widget>
You can insert this html code in posts, widget, html box or theme. Where you want see instagram photos box.
npm install @ptkdev/webcomponent-instagram-widget@latest --save
:src/App.js
on header:import "@ptkdev/webcomponent-instagram-widget";
App.js
template (and replace @ptkdev
with your instagram username):<instagram-widget username="@ptkdev" grid="3x3"></instagram-widget>
Go to examples/reactjs
and run npm run start
in folder for more info. Below is available a description of options
values.
npm install @ptkdev/webcomponent-instagram-widget@latest --save
:app/app.modules.ts
on header:import "@ptkdev/webcomponent-instagram-widget";
@ptkdev
with your instagram username):<instagram-widget username="@ptkdev" grid="3x3"></instagram-widget>
Demo: https://webcomponents-60bc6.firebaseapp.com/instagram-widget
Go to examples/angular
and run yarn install
then yarn start
in folder for more info. Below is available a description of options
values.
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 |
force-square | Force square aspect ratio if you post photos with different size on your instagram | yes / no | yes | v2.4.0 |
shadows | Show shadows css | type1 , type2 , type3 , disabled | disabled | v2.6.0 |
mouse-hover | Show animation with mouse hover | type1 , disabled | disabled | v2.6.0 |
show-title | Show alt/title with hover of mouse | enabled / disabled | enabled | v2.6.0 |
cache | Enable/disable fetch() cache | enabled / disabled | enabled | v2.1.0 |
<instagram-widget
username="@ptkdev"
grid="3x3"
force-square="yes"
items-limit="9"
image-width="100%"
image-height="100%"
border-corners="5"
border-spacing="2px"
></instagram-widget>
You can overwrite default css with selector ::part
, example:
<style>
instagram-widget::part(photo) {
border: 2px solid red;
}
</style>
Part attribute is, generally, suffix of a class. Use chrome inspector for get the correct value of part=""
attributes. See MDN selector ::part docs.
.tpl
suffix from config.js.tpl
file in configs
folder and fill it properly.npm install
npm run dev
Run npm run docs
Support this project by becoming a sponsor. 🙏 Become a sponsor on patreon or become top3 sponsor on ko-fi. Your logo will show up here with a link to your website.
Thank you to all our backers! 🙏 Become a backer on patreon.
I ❤️ contributions! I will happily accept your pull request! Translations, grammatical corrections (GrammarNazi you are welcome! Yes my English is bad, sorry), etc... Do not be afraid, if the code is not perfect we will work together 👯 and remember to insert your name in .all-contributorsrc
and package.json
file.
Thanks goes to these wonderful people (emoji key):
Patryk Rzucidło 💻 🌍 📖 🐛 | Emanuele Fricano 💻 🐛 | Dominik Lubański 🐛 |
💰 In the future, if the donations allow it, I would like to share some of the success with those who helped me the most. For me open source is share of code, share development knowledges and share donations!
I love snake_case syntax sorry for this 😭 don't hate me.
FAQs
Last 9 Photos: Instagram Widget of your Instagram Profile for your blog. Show latest 9 pics from your instagram account. (Unofficial Instagram Widget)
The npm package @ptkdev/webcomponent-instagram-widget receives a total of 54 weekly downloads. As such, @ptkdev/webcomponent-instagram-widget popularity was classified as not popular.
We found that @ptkdev/webcomponent-instagram-widget demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.