Creare un widget su WordPress con il contenuto di un canale Telegram

Una guida per visualizzare il contenuto del nostro canale Telegram in un widget su WordPress.

Prima di partire facciamo una piccola premessa. Abbiamo avuto l’idea di aprire un canale sulla tecnologia che distribuisce le notizie durante tutto l’arco della giornata, senza tempestare l’utente con messaggi di massa, link duplicati o siti non italiani. Il canale si chiama Italia Tech News e ne ho parlato qui.

A questo punto è partita l’idea di aggiungere al blog un widget con gli ultimi contenuti del canale, e cercando online ho trovato solo soluzioni incompatibili con i temi di WordPress, o soluzioni a pagamento, quindi siamo arrivati a trovare una soluzione gratuita che necessita di giusto qualche ingrediente

• Un account IFTTT
• Una leggera conoscenza in sviluppo web PHP e MySQL
• Un hosting con PHP e database MySQL, ma se avete un blog con WordPress si presuppone l’abbiate già

Per chi volesse assicurarsi il corretto funzionamento prima di cimentarsi nell’impresa basta che apra il canale ed il mio blog e controllare che effettivamente, ad ogni ora, gli ultimi messaggi del canale coincidono con quelli visualizzati nel widget.

Partiamo dal secondo punto

Creare nel database una tabella, chiamandola come vogliamo, con due colonne

• id, di tipo NUMBER con un massimo di 11 caratteri
• dt, di tipo TIMESTAMP con default CURRENT_TIMESTAMP

il campo dt ci servirà per ripulire la tabella eliminando gli id più vecchi. Ma non è questo l’argomento dell’articolo.

Servirà creare in una posizione nel nostro host due file php, chiamandoli come vogliamo, ma per dare chiarezza alla guida lo chiameremo addstep.php

<?php
 
$text = $_GET['text'];
 
$id = str_replace("https://t.me/USERNAME_DEL_TUO_CANALE/", "", $text);

$link = mysqli_connect($host, $user, $password, $database);

if (!$link) {
   die($messaggiodierrore);
} else {
	$query = "INSERT INTO LA_TUA_TABELLA (id) VALUES ($id)";
	
	$result = mysqli_query($link, $query);
	
	mysqli_close($link);
}
 
?>

facendo attenzione a correggere il codice inserendo l’username del nostro canale pubblico e il nome della tabella prima creata nel database.

A questo punto creiamo un secondo file, che chiameremo widget.php, con questo contenuto

<br />
<style>
@media screen and (max-width: 235px) {
body { transform : scale(0.64); transform-origin: 0 0; }
}
@media screen and (min-width: 236px) and (max-width: 255px) {
body { transform : scale(0.7); transform-origin: 0 0; }
}
@media screen and (min-width: 256px) and (max-width: 278px) {
body { transform : scale(0.75); transform-origin: 0 0; }
}
@media screen and (min-width: 279px) and (max-width: 290px) {
body { transform : scale(0.8); transform-origin: 0 0; }
}
@media screen and (min-width: 291px) and (max-width: 310px) {
body { transform : scale(0.85); transform-origin: 0 0; }
}
@media screen and (min-width: 311px) and (max-width: 320px) {
body { transform : scale(0.9); transform-origin: 0 0; }
}
@media screen and (min-width: 321px) and (max-width: 329px) {
body { transform : scale(0.95); transform-origin: 0 0; }
}
@media screen and (min-width: 330px) {
body { transform : scale(1); transform-origin: 0 0; }
}
</style>

<div>
<?php

$link = mysqli_connect($host, $user, $password, $database);

if (!$link) {
    die($messaggiodierrore);
} else {
    $query = "SELECT distinct(id) id FROM LA_TUA_TABELLA order by id desc limit 0,2";

    $result = mysqli_query($link, $query);

    while ($row=mysqli_fetch_array($result,MYSQLI_ASSOC)) {

        $id = $row['id'];
        echo '<script async src="https://telegram.org/js/telegram-widget.js?5" data-telegram-post="USERNAME_DEL_TUO_CANALE/'.$id.'" data-width="100%"></script>';
        echo '<br /><br />';
    } 
    mysqli_close($link);
} 
?>
</div>

ricordandosi sempre di correggere il codice inserendo l’username del nostro canale pubblico e il nome della tabella prima creata nel database.

Se avete bisogno di delucidazioni sull’esecuzione di query MySQL da PHP potete affidarvi a quest’articolo.

Passiamo ad IFTTT

• Su Telegram, avviamo una conversazione con il bot @IFTTT e seguendo la procedura aggiungiamo il canale che vogliamo aggiungere al widget
• aggiungiamo il bot @IFTTT al canale con i permessi di amministratore
• Andiamo a creare una nuova Applet in IFTTT.com
  • Inseriamo in Than: Telegram > New post in your channel e selezioniamo il canale a cui abbiamo aggiunto il bot
  • In That: Webhook > Make a web request, inseriamo l’url del file addstep.php che abbiamo creato prima aggiungendo però alla fine ?text={{PostUrl}}

La parte di sviluppo è terminata.

Passiamo a WordPress

Aggiungiamo un widget di tipo HTML personalizzato con all’interno i seguente codice

<iframe align="center" src="https://posizione_del_tuo_file/widget.php" width="100%" height="800" scrolling="no" frameborder="0" $marginheight="0">
</iframe>

Facendo attenzione ad inserire l’url completo della posizione del file widget.php e, nel caso il widget vada a tagliare i “fumetti” dei messaggi di Telegram, allungarlo o accorciarlo all’occorrenza modificando il valore di height.

Finito.

Ad ogni messaggio inserito nel canale, sia da parte vostra, che da parte di un qualsiasi altro amministratore, questo verrà visualizzato anche sul vostro blog.

Come al solito, vi aspettiamo sul nostro canale ufficiale su Telegram, ma anche nel supergruppo InsideTelegramLab e nel canale InsiDevCode.

labelgestione canale telegram, guida telegram, guida telegram avanzata, post telegram su wordpress, widget telegram, widget telegram per wordpress