dcm.InstagramWidget
The
<dcm.InstagramWidget>
tag provides the ability to link up to a client's Instagram page using Meta's API protocol.
Usage Notes
The widget uses information from the tenant
config.xml
file to function properly
There should be a
Catalog
entry with the
Id
of
Social-Instagram-Both
with the following
Settings
values:
-
Url: This is the URL for the client's Instagram account.
-
BasicToken: This is generated by a Meta for Developer application. Once a client Instagram is linked to the app, a token can be generated for this particular account. This should be kept secure to prevent access to the client's feed.
-
Cache: The number of Instagram posts the widget will pull from the feed. Default setting is 25.
-
UserId: This will need to be obtained from the client's Instagram profile. As of 2024-04-15, it can be located in Settings -> Website permissions -> App and Websites -> under dc Code IG Feeds, click View and edit -> under the Learn more header, User ID should be listed at the end.
The widget could be combined with
Template
tags for conditional styling and display
<Catalog Id="Social-Instagram-Both">
<Settings Url="https://www.instagram.com/testclient/"
BasicToken="XXXXX"
Cache="10"
UserId="XXXXXX"
/>
</Catalog>
Example
<dcm.InstagramWidget id="homeInstaFeedWidget">
<Template>
<div class="igCard">
<dcs.If Target="$Entry.media_type" Equal="VIDEO">
<dc.Out>
<dc.Link data-id="" To="" class="dcm-widget-instagram-entry">
<img src="" alt="" class="pure-img-inline" />
</dc.Link>
</dc.Out>
</dcs.If>
<dcs.ElseIf IsEmpty="false" Target="$Entry.media_url">
<dc.Out>
<dc.Link data-id="" To="" class="dcm-widget-instagram-entry">
<img src="" alt="" class="pure-img-inline" />
</dc.Link>
</dc.Out>
</dcs.ElseIf>
<dcs.ElseIf IsEmpty="false" Target="$Entry.thumbnail_url">
<dc.Out>
<dc.Link data-id="" To="" class="dcm-widget-instagram-entry">
<img src="" alt="" class="pure-img-inline" />
</dc.Link>
</dc.Out>
</dcs.ElseIf>
</div>
</Template>
</dcm.InstagramWidget>
See Also
- TODO