如何在 Twitter 分享按鈕加入使用者 ID 名稱連結

網站中安裝 Twitter 分享按鈕時,除了將文章標題、描述、分享圖片資訊調整正確之外,額外的,我們也可以讓文章分享到 Twitter 時,增加自己的 Twitter 使用者作者 id 名稱連結。讓 Twitter 訪客,經由連結的來訪,而加增自己的 Twitter 帳號曝光率。

經由「Twitter 官方按鈕」代碼的添置頁面,能夠便利的幫我們加入@使用者 ( username )、@推薦 ( username ) 、#標籤 ( hashtag );將取得的代碼,放置於網站中即可運作。

如何在 Twitter 分享按鈕加入使用者 ID 名稱連結_001


以下,就以 Twitter 推文按鈕,添加使用者 ID 名稱連結,做為操作示例!好的,接下來開始動工吧!




相關連結

Twitter 按鈕:「https://about.twitter.com/zh-hant/resources/buttons

Dev Twitter for Websites:「https://dev.twitter.com/web/overview




操作教學

首先,前往「Twitter 按鈕」頁面,點擊發出推文上方的「分享連結」。

如何在 Twitter 分享按鈕加入使用者 ID 名稱連結_101



接著畫面會彈出設置選項,如果在自己網頁中的網址與標題,想讓 Twitter 自動抓取,在左側的「按鈕選項」中,「分享網址」與「推文文字」使用預設值即可。

「顯示計數 ( 打勾 )」的話,右側「預覽和程式碼」下方的按鈕樣式即會同步變更。基本上,在「按鈕選項」有做過變動,右側的「預覽和程式碼」也會同步變動。

於「按鈕選項」中的「經由 @ ____」,加入自己的 Twitter 使用者 id;「語言」的部份選擇「繁體中文」,即可在「預覽和程式碼」下方取得按鈕的「a 連結和 script 代碼」。

如何在 Twitter 分享按鈕加入使用者 ID 名稱連結_102



接著,將取得的代碼文本放在網站中想出現的位置上。以後,訪客經由網站的 Twitter 按鈕,做推文分享的動作時,在 Twitter 網站中的推文分享文章中,就都會顯示自己的使用者 ID 名稱連結了。


<a href="https://twitter.com/share" class="twitter-share-button" data-via="techcoke" data-lang="zh-tw">推文</a>

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>


下圖則是訪客在按下 Twitter 推文按鈕時,實際看到的畫面。

如何在 Twitter 分享按鈕加入使用者 ID 名稱連結_103



小結

如果,有需求變更 Twitter 按鈕參數、按鈕大小,或是嵌入式推文、視頻、推文時間軸;也可經由「Twitter Developers Websites」開發人員頁面,獲得需要的資訊。



相關文章

[教學] Twitter 手機簡訊、APP 兩步驟驗證設定

Blogger 文章分享 Twitter Card Meta 標記設定


留言

  1. 《BLOGGER 文章分享 TWITTER CARD META 標記設定》 這篇文章的設定我已經完成,可是本篇的程式碼 你說“想出現的位置上” 要怎麼放? 我現在還是官方默認的分享按鈕,我想讓個程式碼能和官方的分享程式碼合併在一起。 官方的分享是6個小圖標,其中有一個是Twitter,我不知道該怎麼合併了,你能不能找時間研究下? 分享點心得?

    回覆刪除
    回覆
    1. 嗨! XiaoYang Alexander ~
      不急的話,得等星期日才有空閒時間能測試;研究結果再從這留言給你 ~

      刪除
    2. 使用 Blogger 官方的分享按鈕做更改難度過高,沒常在做範本修改,不建議更動原始架構。

      如果要更改官方的按鈕來符合自己的按鈕需求,自己在做法上會使用以下步驟完成:
      1.先將整個 Blogger 底層架構拆掉 (系統預設的底層 javascript 會無法使用,只剩下「留言版」與電腦版範本的基本 CSS 外觀。)。

      2.由於底層 javascript 瓦解,所以連帶的在後台「版面配置」中的小工具有些會無法使用(例如:聯絡表單);另外,行動範本中的 CSS 外觀與分享按鈕,也與底層 javascript 有依存關系,都需要另外處理。

      3.將「Blogger 底層原始外連 js(無論各種版型的範本,底層外連 js 都一樣的)」做分享按鈕部份的更改,在更改完成後再將底層外連 js 上傳到速度穩定的外連空間,來給自己的網站使用。

      處理起來相當麻煩,尤其是行動範本中的 css 與底層外連 js 都須重新安排,還有「版面配置」中的聯絡表單小工具,都要特別處理過(目前:小工具中除了聯絡表單,可能還有其他不常用到的小工具也會失效)。

      目前技研可樂就是使用以上設置方式,行動範本中的 css 與底層外連 js、聯絡表單都重新處理過,外連 js 與部份 CSS 則是放在亞馬遜伺服器。不過分享按鈕的部份不是使用 Blogger 原生按鈕;分享按鈕的部份,自己是使用國外網友的 css 配色方式來做設置,只有在按鈕按下時才引動 javascript,加快網頁的載入速度。



      建議 XiaoYang Alexander,可以使用各 G+、FB、Twitter 官方社群的分享按鈕程式,來做網站分享按鈕的部屬;或是以 CSS 色塊、圖片搭配 javascript 引動分享的動作。

      若需使用 Blogger 的官方按鈕來做修改,可以請教 WFU。WFU 在這方面著墨較深,也許有其他的解決辦法。這裡使用的設定方式,實在太麻煩了。

      刪除
    3. 謝謝,回覆!
      就是希望在原生按鈕的基礎上,看能不能簡單的就實現這個功能。 沒想到涉及整個範本的深層架構了。
      之前也看過你的分享按鈕,雖然不是原生的,但樣式也很不錯。 要達到你的這個效果,必須要把整個默認的範本架構重建,明白確實麻煩。
      分享按鈕的這一步設置。 只是為了更方便與Twitter的連接。
      範本設置成功《BLOGGER 文章分享 TWITTER CARD META 標記設定》後, 自己複製網頁地址到Twitter推文中,其實是一樣的效果。

      刪除
◎ 留言板中提問「代碼」問題,可至『留言代碼轉換器』轉換代碼。

張貼留言

繼續閱讀:

這個網誌中的熱門文章

[教學] LINE 電腦版行動條碼登入設定

[外掛] Chrome 擴充:ColorPick Eyedropper 網頁色碼擷取器

[教學] 使用 PuTTYgen 產生 SSH 連線 RSA、DSA 公鑰與私鑰

Line 分享按鈕:文章分享語法相容網頁版、行動裝置、APP

[教學] Twitter 手機簡訊、APP 兩步驟驗證設定

[教學] Google Compute Engine ( GCE ) 使用 PuTTY SSH 登入實例

[外掛] Chrome 擴充:Window Resizer 瀏覽器視窗大小調整比例

[教學] Blogger 自訂網址綁定自有域名

[密技] Windows OneDrive Dropbox 移至 SD 卡,讓 SSD 使用壽命更長久

[教學] Facebook APP ID 申請,建立應用程式取得 APP 密鑰