如何在 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推文中,其實是一樣的效果。

      刪除
  2. The larger the variety of individuals who donate, the larger the prize turns into. SmartFruitsSlot is a classic slot machine sport that provides players the bet365 chance to revisit one of many first video slot machine video games to have been launched. Slots of Vegas is a group of free slot machine video games and casino video games in your Windows Phone 7, eight or Windows 1.

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

張貼留言

繼續閱讀:

這個網誌中的熱門文章

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

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

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

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

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

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

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

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

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

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