在網頁上嵌入Telegram 頻道廣播訊息

/

本篇要解決的問題

本站最近在側邊欄的部份做了點小調整,發現把 Telegram 上的廣播訊息給嵌入後,訊息的閱讀數有明顯增加,也開始有人加入。

因此就決定分享這篇,希望台灣用 Telegram 的人可以再多一點,不要讓拿訊息來收費的 LINE 一枝獨秀了。

目前實際使用,只有 Telegram 的頻道訊息才可以被嵌入,嵌入方式有二種,都是有生成器可以使用,本篇會介紹這二種方式。


Post Widget

Telegram 的官網就有提供生成嵌入碼的工具:Post Widget

生成器的選項有三個:廣播訊息的 URL、寬度、是否秀出大頭照:

Post Widget 選項
Post Widget 選項

Link to post 就是廣播訊息的 URL,我們在我們訊息的地方,點右下角代表「分享」的箭頭 icon:

點分享按鈕
點分享按鈕

點了以後會出要分享給誰,在選單的右下角就會有「複製分享連結」的按鈕:

複製分享連結
複製分享連結

點擊一下就會自動複製,就可以貼到生成器上。

Width 就是寬度,選填,預設值是 100%。

Author Photo 就是指嵌入訊息時,大頭照的部份要不要出現?

Auto 就會看區塊寬度自動出現或隱藏。

這是廣告,點擊一下可以幫本站多個一點點的廣告收入,謝謝

Always show / Always hide 就是要固定出現 / 隱藏。

都選好後下面就可以看到嵌入碼及預覽:

嵌入碼及預覽
嵌入碼及預覽

本站是用 WordPress 架的,因此要嵌到頁面上,就是 copy 嵌入碼後,小工具選用「自訂 HTML」,接著把嵌入碼貼上,就完成了。


由分享的 URL 找嵌入碼

如果沒有把上面的 Post Widget 網址給記下來也沒關係,因為可以直接透過分享網址找到嵌入碼。

我們點選分享,複製好分享網址後,直接在瀏覽器上打開,如果跳出要不要開啟 Telegram,點擊「取消」:

點擊取消
點擊取消

在頁面下方就可以看見三個按鈕:

頁面下方的三個按鈕
頁面下方的三個按鈕

EMBED,點了就會出現嵌入碼:

點擊EMBED出現嵌入碼
點擊EMBED出現嵌入碼

我們一樣 copy 後貼到頁面小工具上就會嵌入成功。

VIEW IN CHANNEL,點了就會詢問要不要開啟 Telegram,按確定就會進到我們的頻道。

這是廣告,點擊一下可以幫本站多個一點點的廣告收入,謝謝

CONTEXT,這個特別,點了就會進到我們 Telegram 頻道所有的廣播訊息頁面:

點context會進到頻道的廣播訊息列表頁
點context會進到頻道的廣播訊息列表頁

還蠻好看的,乾脆拿來當官網好了 🤣。


關於 Telegram Widgets

這次看到 Post Widget 後才發現,Telegram Widgets 總共有四種功能,嵌入訊息只是其中一種,其他還有像 Telegram Login、Shere 等的,都覺得有趣,之後有機會再來研究啦~

Summary
在網頁上嵌入Telegram 頻道廣播訊息
Article Name
在網頁上嵌入Telegram 頻道廣播訊息
Description
本篇大綱:本篇要解決的問題。Post Widget。由分享的 URL 找嵌入碼。關於 Telegram Widgets。把 Telegram 上的廣播訊息給嵌入後,訊息的閱讀數有明顯增加,也開始有人加入。因此就決定分享這篇,希望台灣用 Telegram 的人可以再多一點。
Augustus
Let's Write
Let's Write
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg

隨選筆記文

Vue

拿 Trello 當資料庫 建一個店家清單 – 下篇:建立清單頁面

Firebase Google

Firebase Dynamic Links API 做一個自己的縮網址生成器

Front-End

SpeechSynthesisUtterance 讓瀏覽器說話

PWA

PWA學習筆記-1:cache、workbox基本使用

Front-End

TestCafe 學習筆記 – 2:常用設定及功能

API

Instagram Embedding 抓 iframe 高度及 3 種大小圖片

WordPress

Ubuntu 安裝 WordPress – 1:VirtualBox、Ubuntu 20.04

Apps Script Google

Google Apps Script 基本使用:跨網域 AJAX、接 Firebase

Analytics Google

GA 報表:電子商務 內部宣傳 報表

Front-End

用 JavaScript 將 JSON 轉為 CSV 檔下載

以下是留言,但關於留言的部份必需先讓你們知道:

本站的文章都是 Augustus 因為覺得有趣,才會實作並整理成筆記文而後進行發表。

如果留言是希望把 Demo 改成「你想要」的樣子,或是把功能改成「符合你需求」的樣子,

Sorry~ 除非那修改是 Augustus 也有興趣的,不然不會幫你們寫程式去面對工作或是交作業。

未來這類的留言不會再主動回覆。😎

另外,公開信箱是為了讓金流驗證用,

因為之前遇過幾次回信協助解決問題後,對方卻一聲謝謝也沒有,就這樣拿去幫工作交差。

因此決定不再回覆信件,有疑問就利用留言功能囉。

訂閱
通知
guest
0 Comments
Inline Feedbacks
看所有留言

Let's Write

前端工程師 Augustus 的學習筆記 — solving problems, in simple ways.