[email protected]
Twitter
LinkedIn
GitHub
  • Services
  • Blog
  • Repositories
  • GitHub
  • Resume
  • Contact
Product was added to your cart

Cart

Display a specific Instagram post in WordPress with Jfa Social Media Post

September 23, 2021Front-EndNo Commentsjfadev

I have created this simple WordPress plugin (Jfa Social Media Post) that will allow you to retrieve a specific Instagram post and consume it through the WP API REST.

This is very practical if you have built the front of your WordPress site with a modern javascript framework like React or Vue. Retrieve the data from the Instagram post via API and inject it into your design.

Getting Started

In your WordPress menu go to Plugins > Add New and search: Jfa Social Media Post install and active it.

Enter https://instant-tokens.com and create the API URL of your Instagram account and paste it in config.

Then in Post displayed paste the URL of the Instagram post of your account that you want to show and click the Save changes button. You can change the URL of the post whenever you want.

Endpoint

Retrieve the post data via the following REST API endpoint:

GET /wp-json/api/v2/social_media_post/post/

JSON Return
{
  "permalink": "https://www.instagram.com/p/XXXXXXXXXXXX/",
  "caption": "Caption text",
  "media_url": "https://scontent-ams4-1.cdninstagram.com/v/XXX/XXX.jpg?_nc_cat=X&ccb=1-5&_nc_sid=XX&_nc_ohc=XXX&_nc_ht=scontent-ams4-1.cdninstagram.com&edm=XXX",
  "url_token": "https://ig.instant-tokens.com/users/XXXXXX/instagram/XXXX/token.js?userSecret=XXXX",
  "username": "XXXXXXXX",
  "timestamp": "2020-12-14T20:12:36+0000"
}

Front examples

Front example with JQuery

<h3>Preview:</h3>
<img class="instagram_post_media_url" src="">
<p>
  <b>Permalink: </b><a class="instagram_post_permalink" href="" target="_blank"></a><br>
  <b>Username: </b><a class="instagram_post_username" href="" target="_blank"></a><br>
  <b>Date: </b><span class="instagram_post_timestamp"></span><br>
  <b>Caption: </b><span class="instagram_post_caption"></span>
</p>

<script>
  jQuery(document).ready(function() {
    jQuery.get('/wp-json/api/v2/social_media_post/post/', function(data) {
      jQuery('.instagram_post_media_url').attr('src', data.media_url);
      jQuery('.instagram_post_permalink').attr('href', data.permalink);
      jQuery('.instagram_post_permalink').html(data.permalink);
      jQuery('.instagram_post_username').attr('href', 'https://www.instagram.com' + data.username);
      jQuery('.instagram_post_username').html('@' + data.username);
      jQuery('.instagram_post_timestamp').html(data.timestamp);
      jQuery('.instagram_post_caption').html(data.caption);
    });
  });
</script>

Front example with modern Js (vue, react, angular…)

const response = await fetch('/wp-json/api/v2/social_media_post/post/');
const instagramPost = await response.json();
console.log('media_url', instagramPost.media_url);
console.log('permalink', instagramPost.permalink);
console.log('username', instagramPost.username);
console.log('timestamp', instagramPost.timestamp);
console.log('caption', instagramPost.caption);

Worpress plugins directory

Jfa Social Media Post

Repository

This WordPress plugin allows you to retrieve a specific Instagram post and consume it via the REST API.
https://github.com/jfadev/jfa-social-media-post
0 forks.
3 stars.
0 open issues.

Recent commits:
  • Update README.mb, jfadev
  • Update README.md, GitHub
  • Fiz readme.txt, jfadev
  • Update README.md, jfadev
  • Icons and banners for plugin directory, jfadev

: Instagram, Social media, Wordpress plugin

Services

  • Excel2chatGPT $10.00 $5.00
  • Fix bugs in your Wordpress Site $40.00 / hr
  • Fix bugs in your PHP Symfony App $50.00 / hr
  • Tasks Automation using Node.js $50.00 / hr
  • REST API Development with Symfony $50.00 / hr

Blog

  • Excel to ChatGPT (Excel2chatGPT)
  • Web Scraping and Automation Resources
  • Upgrade from Ubuntu server 20.10..21.10 to 22.04 LTS
  • Display a specific Instagram post in WordPress with Jfa Social Media Post
  • Build a custom image and distribute them to Azure VMSS using GitHub Actions

Discover

  • Los Mejores Top 10
  • Upcycling Fashion BCN
Twitter
LinkedIn
GitHub

© 2013-2023 Jordi Fernandes Alves (@jfadev)