Eu criei este plugin simples para WordPress (Jfa Social Media Post) que permitirá que você recupere uma postagem específica do Instagram e consuma-a por meio do WP API REST.
Isso é muito prático se você construiu a frente do seu site WordPress com um framework javascript moderno como React ou Vue. Recupere os dados da postagem do Instagram via API e injete-os em seu design.
Começando
No menu do WordPress, vá paraPlugins > Add New e pesquisar: Jfa Social Media Post instale e ative-o.
Acessehttps://instant-tokens.com e crie oAPI URL da sua conta do Instagram e cole na configuração.
Então em Post displayed cole o URL da postagem do Instagram da sua conta que deseja mostrar e clique no botão Save changes button. Você pode alterar o URL da postagem sempre que quiser.
Endpoint
Recupere os dados da postagem por meio do seguinte endpoint da API REST:
GET /wp-json/api/v2/social_media_post/post/
Retorno 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"
}
Exemplos de Front
Exemplo frontal com 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>
Exemplo frontal com 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);