He creado este sencillo complemento de WordPress. (Jfa Social Media Post) que le permitirá recuperar una publicación de Instagram específica y consumirla a través de WP API REST.
Esto es muy práctico si ha construido la parte frontal de su sitio de WordPress con un marco javascript moderno como React o Vue. Recupere los datos de la publicación de Instagram a través de API e inyéctelos en su diseño.
Empezando
En su menú de WordPress vaya aPlugins > Add New y buscar: Jfa Social Media Post instalarlo y activarlo.
Ingresa a https://instant-tokens.com y crea elAPI URL de su cuenta de Instagram y péguelo en config.
Entonces en Post displayed pegue la URL de la publicación de Instagram de su cuenta que desea mostrar y haga clic en el Save changes button. Puedes cambiar la URL de la publicación cuando quieras.
Endpoint
Recupere los datos de la publicación a través del siguiente punto final de la API REST:
GET /wp-json/api/v2/social_media_post/post/
Devolución de 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"
}
Ejemplos de Front
Ejemplo frontal con 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>
Ejemplo frontal con Js moderno (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);