Afficher une publication Instagram spécifique dans Wordpress avec Jfa Social Media Post

J'ai créé ce simple plugin WordPress (Jfa Social Media Post) qui vous permettra de récupérer une publication Instagram spécifique et de la consommer via l'API WP REST.

C'est très pratique si vous avez construit la façade de votre site WordPress avec un framework javascript moderne comme React ou Vue. Récupérez les données de la publication Instagram via l'API et injectez-les dans votre design.

Commencer

Dans votre menu WordPress allez surPlugins > Add New et recherche: Jfa Social Media Post l'installer et l'activer.

Entrer dans https://jetons-instantanés.com et créer leAPI URL de votre compte Instagram et collez-le dans config.

Puis dans Post displayed collez l'URL de la publication Instagram de votre compte que vous souhaitez afficher et cliquez sur le Save changes button. Vous pouvez changer l'URL de la publication quand vous le souhaitez.

Endpoint

Récupérez les données de publication via le point de terminaison API REST suivant:

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

Retour JSON

{
  "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"
}

Exemples de Front

Exemple front avec 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>

Exemple front avec Js moderne (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);