[unboxing][hrads]

熱門標籤

☆重要訊息:Blogger 官方近期推出的「RWD 自適應範本主題」沒有『行動服務』的設定選項,如果您是觀察「技研可樂」裡的文章做自己網站的設計,使用「自適應範本主題」的使用者可以直接依「技研可樂」文章裡的『電腦版』方式做設定即可完成佈置,不需要開啟『行動服務』。☆

  Blogger 自訂網址應用 CloudFlare HTTPS 系列文章:「CloudFlare

  Blogger HTTPS 相關文章列表:「HTTPS

  Blogger AdSense 廣告放置與相關自適應廣告佈屬文章列表:「AdSense

  Blogger 常用頁面判斷式用法一列表:「Blogger 常用頁面判斷式用法一覽表

如何在 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 標記設定



分享

共有 4 則留言

留言迴響
XiaoYang Alexander
管理員
6/06/2016 8:56 PM ×

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

回覆
avatar
coke tech
管理員
6/06/2016 9:45 PM ×

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

回覆
avatar
coke tech
管理員
6/12/2016 4:34 PM ×

使用 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 在這方面著墨較深,也許有其他的解決辦法。這裡使用的設定方式,實在太麻煩了。

回覆
avatar
XiaoYang Alexander
管理員
6/12/2016 5:50 PM ×

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

回覆
avatar

加入代碼加入代碼

若您在閱覽文章時,於文章頁面找不到相關的應用主題,歡迎移駕到『站內留言』一起研究討論,謝謝!

使用超連結:<a href="https://www.techcoke.com/">技研可樂</a> =『技研可樂

加入圖片 ( https ):支援 HTTPS 網址型式的 .jpg .png 格式圖檔,直接貼入 HTTPS 圖片網址即可在留言時顯示!

支援非嵌入 Youtube 視頻:https://www.youtube.com/watch?v=hdfSISI24Xk (* 瀏覽器網址列中的 Youtube 網址 )

&&amp;'&#039;"&quot;<&lt;>&gt;
技研可樂 © 2013 - 2017

Contact Form

Name

Email *

Message *