►
From YouTube: Building a custom Instagram Feed experience with SPFx
Description
In this 12-minute developer-focused demo, Reshmee Auckloo shares a sample web part that showcases an Instagram feed. Tips on upgrading original web part from SPFx v1.11 to v 1.16. Web part requires a user token. See SPFx code for generating token and rendering Instagram feed. Various methods discussed to bring in Instagram feed. Created an Independent Publisher Connecter (flow template) for a scheduled feed into SharePoint list. Uses the Instagram Basic Display API (graph.Instagram.com).
This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on June 1, 2023.
Demo Presenter
• Reshmee Auckloo (Pension Protection Fund) | @ ReshmeeAuckloo
Supporting materials
• Sample - Instagram Feed | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-instagram
• Article - Instagram Feed in SPFx Web Part – Buse Kara | https://medium.com/arfitect/instagram-feed-in-spfx-web-part-61f76fe1ded4
• Article - INDEPENDENT PUBLISHER CONNECTOR STEP BY STEP - Tomasz Poszytek | https://poszytek.eu/en/microsoft-en/office-365-en/powerautomate-en/independent-publisher-connector-step-by-step/
• IP Connector Repo - Instagram Basic Display | https://github.com/microsoft/PowerPlatformConnectors/tree/dev/independent-publisher-connectors/InstagramBasicDisplay
• API - Instagram Basic Display API | https://developers.facebook.com/docs/instagram-basic-display-api/
Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 Platform Community - http://aka.ms/community/home
A
B
Using
spfx,
it's
a
little
bit
about
me,
so
my
name
is
currently
work
as
software
developer
in
other
company
called
passion,
production
fund
and
I've
been
contributing
to
the
community
for
a
couple
of
years,
and
these
are
some
of
the
awesome
badges
I've
received
and
oh
yeah.
This
is
my
Twitter
handle,
so
you
can
reach
out
anytime,
even
after
the
presentation
or
for
any
other
things.
B
B
So
what
I've
done
so
I've
upgraded
the
solution
from
svfx
111
to
spfx
116,
so
my
Approach
was
to
start
from
scratch.
Scaffolding,
a
new
solution
using
the
latest
spfx
1.16,
obviously
there's
a
new
version,
spfx
117,
but
yeah
that
was
done
like
three
months
ago
and
added
all
the
libraries
ensuring
the
latest
were
being
used
using
the
npm
install
and
copied
the
the
webpart
code
from
the
old
solution
to
the
new
solution
and
refactoring
all
the
code
to
ensure
compatibility
with
the
latest
Library
as
we're
using
react.
B
You
can
go
across
all
the
posts
that
you
want
and
then
you
over
over
each
other
posts.
You
have
a
caption
from
the
Instagram
which
get
displayed
and
then,
if
you
click
on
any
other
posts,
it's
going
to
open
it
onto
Instagram.
Okay,
let's
have
a
look
at
some
of
the
properties,
so
the
most
important
property
for
that
particular
Web
Bar
to
work
is
a
user
token
and
we
use
a
token.
B
You
need
to
have
both
an
Instagram
and
a
Facebook
account
to
be
able
to
generate
the
user
token.
So
the
GitHub
repository
where
the
web
part
is,
with
some
instructions
how
you
can
generate
the
user
token
and
the
rest
of
the
property,
like
the
name
account
name,
your
Instagram
account
icon.
If
you
want
to
show
the
icon,
yes
or
no
and
the
layout
one
third
right
is
just
to
change
aspect
ratio
of
the
image
here.
B
I've
got
a
second
web
part,
but
just
with
the
properties
being
filled
so
I
have
to
show
the
Instagram
icon
and
then
here
it's
kind
of
change,
the
aspect
ratio
of
image
to
a
bit
smaller
and
to
display
the
username
yeah
so
first
and
then,
if
you
click
on
one
particular
post,
so
it
will
just
opened
the
Instagram
post
directly
onto
Instagram,
where
you
can
engage
with
a
post.
If
you
need
to
say
now,
let's
go
back
to
the
demo
yeah
so
in
in
the
code.
B
The
most
important
bit
is
the
call
to
the
Instagram
and
point
here.
It's
calling
the
amplecraft.instagram.com
and
I'm
passing
the
user
token
of
set
of
the
webpart
property
and
and
then
based
on
this
status
of
a
call.
Sorry
I'm
just
calling
a
function
to
handle
success
and
want
to
enter
failure
and
behind
the
scene.
What
it
does
is
just
set
up
the
properties
for
any
particular
arrows
or
just
load
the
feeds
and
then
I
do
have.
B
If
I
have
a
status
code
is
not
200
or
404,
it
will
do
a
recursive
Loop
to
try
to
get
the
data
until
it's
successful.
But
maybe
it
could
be
improved
just
to
add
a
maximum
of
try
of
five
yeah.
So
that's
it
and
forget
data,
a
kind
of
function,
I
loaded,
one
of
the
company
dismounted,
but
in
that
case,
because
I'm
using
rear
hook,
I'm
kind
of
calling
it
under
the
use
effect
function.
B
B
But
solution
is
currently
using
the
Instagram
basic
display
API,
which
has
the
endpoint
craft.instagram.com.
Another
name
kind
of
implies.
It
just
allows
you
to
to
do
basic
functionality
like
retrieving
basic
profile.
Information
photos,
videos
from
the
user's
Instagram
account,
so
it's
not
very
feature
Rich
and
in
case
you
might
want
to
do
something
much
more
advanced
like
allowing
your
user
to
engage
within
your
app,
maybe
consider
something
like
the
what
we
call
the
Instagram
graph
API.
The
end
point
is
a
little
bit
different
craft.facebook.com.
B
But
for
my
scenario,
very
comments
was
quite
simple:
to
just
have
the
Instagram
feed
onto
a
SharePoint
page
with
no
Advanced
features,
but
the
number
one
limitation
which
is
it
has
a
limit
of
calls.
You
can
do
per
hour
per
user
per
up,
but
was
something
which
I
needed
to
find
a
solution
around
it,
because
if
you
have,
if,
if
you're
planning
to
deploy
the
application
for
500
users,
we
example
and
if
all
of
them
wants
to
use
it
up
at
the
same
time,
there's
a
high
chance.
B
But
it's
not
going
to
work
50
of
the
time.
So
what
I've
done
is
I've
used
a
central
power
ultimate
flow.
Now,
there's
a
template.
If
you
want
to
go
and
check
it
out,
it's
called
V
get
Instagram
feed
into
shareboard
lists,
see
Power
automate.
If
create
a
flow
and
look
for
it,
it
will
come
up
and
then
you
can
use
it
and
configure
it
to
point
to
the
correct
SharePoint
list
and
you
can
set
residual
even
if
you
set
it
five
every
five
minutes.
It's
not
going
to
reach
with
240
calls
per
hour.
B
240
calls
per
hour
limit
and
the
other
advantage
of
using
Power
to
made
for
a
yeah
I'm
using
a
template,
uses
the
independent
publisher
connector.
So
when
you
create
a
connection
to
the
connector,
you
can
specify
the
access
token,
and
in
that
way
it
kind
of
keeps
the
access
token
secure
as
well
and
in
the
end
I'm
just
using
some
view.
Formatting
view
formatting.
You
know
this
is
just
Json
mixed
with
HTML
ncss.
B
Do
you
kind
of
get
your
rendering
as
a
picture
I've
shown
this
site
on
the
right,
so
that
kind
of
was
very,
very
comments
which
we
and
user
ad
beat
70
of
using
the
view.
Formatting
was
it
doesn't
support
video
tag,
but
again,
but
it
was
not
that
major
and
then
the
other
one
we
couldn't
change.
V
enter
background
color
with
this
view
weapon
to
be
transparent
again,
but
I
was
kind
of
minor
because
the
background
was
wired.
B
From
from
third
party
domains,
so
you
might
have
to
update
the
htms
field
security
settings
to
allow
images
to
display
from
Instagram
CDN
but
again,
I.
Don't
know
whether
that's
going
to
be
an
issue,
but
otherwise
you
can
amend
so
that
you
can
download
the
image
into
a
column
of
Type
image
and
I
meant
to
be
view
formatting
accordingly.
B
Otherwise
yeah
the
alternative
could
have
been
like
using
Azure
function.
To
do
the
back
end
call
on
a
scheduled
basis
and
using
spfx
to
improve
the
design,
but
for
me,
yeah,
just
a
local
kind
of
solution,
kind
of
work
in
the
end
yeah.
So
this
is
a
list
of
references
if
you
want
to
look
more
into
the
Instagram
basic
display,
API
documentation,
as
well
as
Instagram
graph
API
documentation
and
see
which
one
work
and
I've
put
I
think
to
the
independent
publisher
connector.
B
If
you
want
to
have
a
look
and
I
would
say,
thank
you
like
to
Andre
large,
because
I've
used
one
of
these
sample
and
simplified
it
to
be
able
to
achieve
it,
create
like
structure
and
yeah
and
then
in
the
link
in
the
end,
is
a
blog
post
which
recently
got
published,
but
it
kind
of
go
through
this
test,
which
you
can
go
through
to
implement
using
a
low
code
solution
yeah.
So
that's
it
from
me.
B
A
You
that
was
fantastic
demo
and
again
there's
a
lot
of
hard
work
that
went
into
this
many
contributions
and
also
thank
you
for
recognizing
and
working
with
the
contributions
of
others.
So
that's
wonderful
and
again,
everyone
please
give
a
warm
hand
to
Rich
me.
It
was
her
first
presentation,
foreign.