Comment intégrer son fil Mastodon à WordPress ?

Pour lier plus étroitement ce site à mon compte Mastodon je voulais intégrer le fil de mon compte sur une page, mais sans extension (ou plugin) pour alourdir le site. Pourquoi ce lien ? Comment intégrer son fil Mastodon à WordPress ? Petit mode d’emploi transposable.

---

• Mais pourquoi intégrer son fil Mastodon sur son site WordPress ?
  • Permettre aux lectrices et lecteurs de ce site de découvrir le fil Mastodon
  • Inciter à s'inscrire dans une instance Mastodon
• J'ai crée un page
• Comment faire quand on a un compte Mastodon et qu'on veut partager son fil sur son site ?
  • • 1 Récupérer son id numérique
    • 2 Intégrer le code
      • Code à copier / coller
    • Dans votre page

Mais pourquoi intégrer son fil Mastodon sur son site WordPress ?

Je suis présent sur un seul réseau social. Sans publicité, libre, sans algorithme pour faire le buzz, Mastodon permet de tisser des liens, de trouver une information souvent différente, de découvrir pour moi aussi bien des adeptes du libre que de la poésie…

Mon compte est : @VincentBreton@piaille.fr

Chacune, chacun peut choisir l’instance qui répondra le mieux à ses préférences, on peut même « déménager » facilement… D’une instance à l’autre, il existe des passerelles qui permettent de suivre des comptes en dehors de son instance. Contrairement à de vieilles rumeurs, Mastodon n’a rien de difficile à comprendre et les interactions y sont à la fois généralement bienveillantes et réelles.

Quand je publie un article ici, lieu de mon activité numérique principale, j’en informe en général les lectrices et lecteurs de Mastodon. Je ne le fais pas de façon automatique mais avec un petit message « explicatif » ou une forme de « clin d’œil ». Je n’utilise pas d’extension (ou plugin). Je le fais « en direct » sur mon compte.

Il m’arrive également d’écrire de brèves « humeurs » : un message le matin, partager une photo ou un point de vue…

Alors quels sont mes objectifs ?

Permettre aux lectrices et lecteurs de ce site de découvrir le fil Mastodon

• pas besoin de compte pour lire les posts
• en général les dernières nouveautés sont annoncées

Inciter à s’inscrire dans une instance Mastodon

• ça peut donner l’envie d’essayer
• il est possible alors d’interagir directement (avec mes messages ou d’autres).

J’ai crée un page

• https://vincentbreton.fr/retrouvons-nous-sur-mastodon/
• on y retrouve les dix derniers messages publiés sur Mastodon.

Comment faire quand on a un compte Mastodon et qu’on veut partager son fil sur son site ?

1 Récupérer son id numérique

https://piaille.fr/api/v1/accounts/lookup?acct=VincentBreton

Elle n’est pas secrète pour un compte Mastodon et en tapant ce lien dans le navigateur on peut la retrouver : remplacez mon instance et mon nom de compte par les vôtres.

2 Intégrer le code

Préalable : je ne voulais pas d’extension ou plugin. C’est souvent lourd, il faut gérer les mises à jour etc. Je voulais aussi quelque chose de léger.

J’ai installé il y a longtemps WP Code une extension qui permet d’intégrer facilement des morceaux de code php, html etc. sans entrer dans le thème. J’ai déjà raconté comment peu à peu j’ai remplacé des extensions par des morceaux de code.

Code à copier / coller

/**
 * Intégration du fil Mastodon de Vincent Breton
 * Pour WPCode - Type: PHP Snippet
 */

// Fonction pour récupérer les posts Mastodon avec cache
function vb_get_mastodon_posts($limit = 10) {
    // ID du compte @VincentBreton@piaille.fr
    $account_id = '110972899561318470';
    $transient_key = 'mastodon_feed_vb';
    
    // Vérifier le cache (30 minutes)
    $cached_posts = get_transient($transient_key);
    if (false !== $cached_posts) {
        return $cached_posts;
    }
    
    // Récupérer les posts depuis l'API
    $api_url = sprintf(
        'https://piaille.fr/api/v1/accounts/%s/statuses?limit=%d&exclude_replies=true&exclude_reblogs=true',
        $account_id,
        $limit
    );
    
    $response = wp_remote_get($api_url, array(
        'timeout' => 15,
        'sslverify' => true,
        'headers' => array(
            'Accept' => 'application/json'
        )
    ));
    
    if (is_wp_error($response)) {
        error_log('Mastodon API Error: ' . $response->get_error_message());
        return false;
    }
    
    $body = wp_remote_retrieve_body($response);
    $posts = json_decode($body, true);
    
    // Mettre en cache pour 30 minutes
    if (!empty($posts) && is_array($posts)) {
        set_transient($transient_key, $posts, 1800);
    }
    
    return $posts;
}

// Shortcode pour afficher le fil
function vb_mastodon_feed_shortcode($atts) {
    $atts = shortcode_atts(array(
        'limit' => 10
    ), $atts);
    
    $posts = vb_get_mastodon_posts(intval($atts['limit']));
    
    if (!$posts || !is_array($posts)) {
        return '<div class="mastodon-feed-error"><p>Impossible de charger le fil Mastodon pour le moment.</p></div>';
    }
    
    ob_start();
    ?>
    <div class="mastodon-feed">
        <?php foreach ($posts as $post): ?>
            <article class="mastodon-post">
                <div class="post-header">
                    <time datetime="<?php echo esc_attr($post['created_at']); ?>">
                        <?php 
                        // Conversion correcte UTC vers fuseau WordPress
                        $date = new DateTime($post['created_at']);
                        $date->setTimezone(new DateTimeZone(wp_timezone_string()));
                        echo $date->format('j F Y à G\hi');
                        ?>
                    </time>
                </div>
                
                <div class="post-content">
                    <?php echo wp_kses_post($post['content']); ?>
                </div>
                
                <?php if (!empty($post['media_attachments'])): ?>
                    <div class="post-media">
                        <?php foreach ($post['media_attachments'] as $media): ?>
                            <?php if ($media['type'] === 'image'): ?>
                                <img 
                                    src="<?php echo esc_url($media['url']); ?>" 
                                    alt="<?php echo esc_attr($media['description'] ?? ''); ?>"
                                    loading="lazy"
                                >
                            <?php endif; ?>
                        <?php endforeach; ?>
                    </div>
                <?php endif; ?>
                
                <div class="post-footer">
                    <a href="<?php echo esc_url($post['url']); ?>" 
                       target="_blank" 
                       rel="noopener noreferrer">
                        Voir sur Mastodon →
                    </a>
                </div>
            </article>
        <?php endforeach; ?>
    </div>
    <?php
    return ob_get_clean();
}
add_shortcode('mastodon_feed', 'vb_mastodon_feed_shortcode');

// Ajouter les styles (via wp_head)
function vb_mastodon_feed_styles() {
    // Ne charger que si le shortcode est présent sur la page
    if (!is_singular() && !is_page()) {
        return;
    }
    ?>
    <style>
    .mastodon-feed {
        display: grid;
        gap: 2rem;
        max-width: 800px;
        margin: 0 auto;
    }
    
    .mastodon-post {
        background: #f8f9fa;
        border-left: 4px solid #d63031;
        padding: 1.5rem;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }
    
    .post-header time {
        color: #111111;
        font-size: 0.9rem;
        font-weight: 500;
    }
    
    .post-content {
        margin: 1rem 0;
        line-height: 1.6;
    }
    
    .post-content p {
        margin-bottom: 0.8rem;
    }
    
    .post-content p:last-child {
        margin-bottom: 0;
    }
    
    .post-content a {
        color: #6364ff;
        text-decoration: underline;
    }
    
    .post-media {
        margin: 1rem 0;
        display: grid;
        gap: 0.5rem;
    }
    
    .post-media img {
        max-width: 100%;
        height: auto;
        border-radius: 4px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    
    .post-footer {
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid #dee2e6;
    }
    
    .post-footer a {
        color: #d63031;
        text-decoration: none;
        font-size: 0.9rem;
        font-weight: 500;
    }
    
    .post-footer a:hover {
        text-decoration: underline;
    }
    
    .mastodon-feed-error {
        padding: 1rem;
        background: #fff3cd;
        border: 1px solid #ffc107;
        border-radius: 4px;
        color: #856404;
    }
    
    @media (max-width: 768px) {
        .mastodon-post {
            padding: 1rem;
        }
    }
    </style>
    <?php
}
add_action('wp_head', 'vb_mastodon_feed_styles');

modifié le 14/11 car le paramétrage de l’heure n’était pas bon (décalage d’une heure)

Pour obtenir ce code je me suis fait aider d’une IA (il faut vérifier ce que ça donne).
Vous pouvez récupérer ce code mais il faut intégrer vos propres données (j’ai mis en gras ce qu’il faut changer). Si la mise en page ne vous plaît pas vous pouvez la modifier. Le cas échéant en rédigeant votre prompt, y compris à partir de ce code, vous pouvez demander à l’IA d’adapter ce code pour votre compte. Ne me tirez pas dessus, c’est un des rares usages qui me facilite la vie et m’a permis d’apprendre un peu…

Dans votre page

• vous pouvez créer une page dédiée comme moi
• ou vous pouvez décider d’intégrer le code dédié là où bon vous semble
• vous intégrez le « code court » là où vous voulez, et c’est tout !

[mastodon_feed]

Si vous en avez marre, il suffit de désactiver le code dans WP Code .

à noter : la page se régénère toutes les trente minutes (pas au moment où venez de publier un post sur Mastodon ). Vous pouvez modifier la durée…

L’intégration reste légère et n’affecte pas les performances (mais si on veut faire léger, il faut penser à avoir des images légères).