[email protected]
Twitter
LinkedIn
GitHub
  • Blog
  • GitHub
  • CV

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

Septembre 23, 2021L'extrémité avantSans commentairesjfadev

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);

Répertoire des plugins Worpress

Jfa Social Media Post

Dépôt

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, Des médias sociaux, Plugin Wordpress
jfadev
https://jordifernandes.com
Programmeur et Développeur Web depuis 2006. Diplômé en Informatique de Gestion à Marseille 15+ années d'expérience dans les technologies Web.

Twitter

Mes Tweets

Posts Rencents

  • Afficher une publication Instagram spécifique dans WordPress avec Jfa Social Media Post
  • Créez une image personnalisée et distribuez-la sur Azure VMSS à l'aide de GitHub Actions
  • Calculateur de processus PHP-FPM
  • Jfa PWA Toolkit
  • Liste des backlinks pour SEO
  • Liste complete de générateurs de backlinks pour le positionnement SEO
  • Modal Dialog pour Material Design Lite
  • Exécuter une commande Symfony2 partir cronjobs dans CPanel sur un hébergement mutualisé
  • Détection d'AdBlock avec jQuery ou JavaScript
  • Vidéo: Introduction à Apache Cordova en espagnol

Catégories

  • Back-End (5)
  • DevOps (1)
  • L'extrémité avant (12)
  • Actualités (8)
  • SEO (2)
  • Outils (6)
  • Astuces (10)
  • Non classé (3)

Découvrer

  • Los Mejores Top 10
  • Boutique Slow Fashion
Twitter
LinkedIn
GitHub

© 2013-2022 Jordi Fernandes Alves (@jfadev)