如何在 Twitter 分享按鈕加入使用者 ID 名稱連結
網站中安裝 Twitter 分享按鈕時,除了將文章標題、描述、分享圖片資訊調整正確之外,額外的,我們也可以讓文章分享到 Twitter 時,增加自己的 Twitter 使用者作者 id 名稱連結。讓 Twitter 訪客,經由連結的來訪,而加增自己的 Twitter 帳號曝光率。
經由「Twitter 官方按鈕」代碼的添置頁面,能夠便利的幫我們加入@使用者 ( username )、@推薦 ( username ) 、#標籤 ( hashtag );將取得的代碼,放置於網站中即可運作。
以下,就以 Twitter 推文按鈕,添加使用者 ID 名稱連結,做為操作示例!好的,接下來開始動工吧!
Dev Twitter for Websites:「https://dev.twitter.com/web/overview」
接著畫面會彈出設置選項,如果在自己網頁中的網址與標題,想讓 Twitter 自動抓取,在左側的「按鈕選項」中,「分享網址」與「推文文字」使用預設值即可。
「顯示計數 ( 打勾 )」的話,右側「預覽和程式碼」下方的按鈕樣式即會同步變更。基本上,在「按鈕選項」有做過變動,右側的「預覽和程式碼」也會同步變動。
於「按鈕選項」中的「經由 @ ____」,加入自己的 Twitter 使用者 id;「語言」的部份選擇「繁體中文」,即可在「預覽和程式碼」下方取得按鈕的「a 連結和 script 代碼」。
接著,將取得的代碼文本放在網站中想出現的位置上。以後,訪客經由網站的 Twitter 按鈕,做推文分享的動作時,在 Twitter 網站中的推文分享文章中,就都會顯示自己的使用者 ID 名稱連結了。
下圖則是訪客在按下 Twitter 推文按鈕時,實際看到的畫面。
Blogger 文章分享 Twitter Card Meta 標記設定
經由「Twitter 官方按鈕」代碼的添置頁面,能夠便利的幫我們加入@使用者 ( username )、@推薦 ( username ) 、#標籤 ( hashtag );將取得的代碼,放置於網站中即可運作。
以下,就以 Twitter 推文按鈕,添加使用者 ID 名稱連結,做為操作示例!好的,接下來開始動工吧!
相關連結
Twitter 按鈕:「https://about.twitter.com/zh-hant/resources/buttons」Dev Twitter for Websites:「https://dev.twitter.com/web/overview」
操作教學
首先,前往「Twitter 按鈕」頁面,點擊發出推文上方的「分享連結」。接著畫面會彈出設置選項,如果在自己網頁中的網址與標題,想讓 Twitter 自動抓取,在左側的「按鈕選項」中,「分享網址」與「推文文字」使用預設值即可。
「顯示計數 ( 打勾 )」的話,右側「預覽和程式碼」下方的按鈕樣式即會同步變更。基本上,在「按鈕選項」有做過變動,右側的「預覽和程式碼」也會同步變動。
於「按鈕選項」中的「經由 @ ____」,加入自己的 Twitter 使用者 id;「語言」的部份選擇「繁體中文」,即可在「預覽和程式碼」下方取得按鈕的「a 連結和 script 代碼」。
接著,將取得的代碼文本放在網站中想出現的位置上。以後,訪客經由網站的 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 按鈕參數、按鈕大小,或是嵌入式推文、視頻、推文時間軸;也可經由「Twitter Developers Websites」開發人員頁面,獲得需要的資訊。相關文章
[教學] Twitter 手機簡訊、APP 兩步驟驗證設定Blogger 文章分享 Twitter Card Meta 標記設定
《BLOGGER 文章分享 TWITTER CARD META 標記設定》 這篇文章的設定我已經完成,可是本篇的程式碼 你說“想出現的位置上” 要怎麼放? 我現在還是官方默認的分享按鈕,我想讓個程式碼能和官方的分享程式碼合併在一起。 官方的分享是6個小圖標,其中有一個是Twitter,我不知道該怎麼合併了,你能不能找時間研究下? 分享點心得?
回覆刪除嗨! XiaoYang Alexander ~
刪除不急的話,得等星期日才有空閒時間能測試;研究結果再從這留言給你 ~
使用 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 在這方面著墨較深,也許有其他的解決辦法。這裡使用的設定方式,實在太麻煩了。
謝謝,回覆!
刪除就是希望在原生按鈕的基礎上,看能不能簡單的就實現這個功能。 沒想到涉及整個範本的深層架構了。
之前也看過你的分享按鈕,雖然不是原生的,但樣式也很不錯。 要達到你的這個效果,必須要把整個默認的範本架構重建,明白確實麻煩。
分享按鈕的這一步設置。 只是為了更方便與Twitter的連接。
範本設置成功《BLOGGER 文章分享 TWITTER CARD META 標記設定》後, 自己複製網頁地址到Twitter推文中,其實是一樣的效果。