線上查詢 FB G+ Twitter 社群分享按鈕數據 + 立即檢視 FB G+ 留言板內容

前陣子因為網站改用「 RWD 範本 」,同時在精簡 JS 外掛的前提下,移除了 FB 讚、+1 按鈕,而且 FB 及 G+ 留言板也都不使用了。 現在偶爾想要知道某篇文章的社群分享按鈕累積數據,或是那篇的 FB、G+ 讀者留言內容,就會比較麻煩一些。 於是就做了本篇的線上...
繼續閱讀全文FB「讚」按鈕與 Google「+1」按鈕最簡單安全的安裝方式﹍可解決對齊問題

在「 Facebook 讚按鈕﹍四種安裝方式剖析 」有讀者於留言 #2 表示 "不曉得刪除了哪個小工具的語法,所有文章都不會再顯示臉書專頁的讚按鈕了"。 如果對程式碼不熟悉的話,FB 官方提供的「 HTML5 語法 」,的確有可能安裝失敗、或發生彼此打架的...
繼續閱讀全文安裝常用社群分享按鈕 (圓形)﹍圖示字型 Font Awesome 應用

上一篇「 圖示字型 Font Awesome 進階使用方式整理 」,說明了如何利用重疊圖示,來組合出一個 FB 分享按鈕。 只做出一個不過癮,本篇要示範如何利用 Font Awesome 圖示字型,繼續做出所有常見的社群分享按鈕,例如 G+、Line、微博、噗浪、推特、郵件等...
繼續閱讀全文圖示字型 Font Awesome 進階使用方式教學﹍製作社群分享按鈕

「 Font Awesome 」是一套把 "向量圖示" 做成字型的套件。過去為了減少網站小圖示的使用(加快網頁讀取速度),採用「 UNICODE 特殊符號 」這個方案。 而最近處理一些案子需要製作各式的 "社群分享按鈕",發現 ...
繼續閱讀全文Blogger 自製社群分享按鈕(扁平化設計) + 動畫效果

之前曾介紹過如何「 改造 Blogger 官方分享按鈕 」,除了增加常用的熱門社群分享按鈕,也讓官方分享按鈕展現不同的風格。 在行動裝置普及之後,「 扁平化設計 」開始流行,網頁開始使用簡單的顏色、線條來設計,減少陰影、立體、複雜的圖案,最直接的好處就是「減少圖片的使用後,能...
繼續閱讀全文[教學] 改造 Blogger 官方分享按鈕﹍新增熱門社交分享按鈕
![[教學] 改造 Blogger 官方分享按鈕﹍新增熱門社交分享按鈕](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoKgpN7kylVMyLsku76N6YSWLNlRIykHHDcvF4ZPQipAMhrQXz53TRsMsFSNu3Qe5OAXCqLgVxENCXLZQhMA4IUD8IuZ-mV_UTYvGLd9JWQKEKqXHcaia1DD1sDaXNq5E-V7-CHDlFE4fg/s1600/blogger-share-buttons-modify.jpg)
在網站擺放各式熱門的分享按鈕,可方便讀者主動幫我們宣傳,有助於散播文章到不同的平台。這件事已經有不少第三方服務可替我們代勞,例如「 Shareaholic 超完整社群網站分享按鈕 」,讓我們不必單獨安裝個別分享按鈕,省下不少麻煩。 本站沒使用這類服務的原因,主要考量為減少 j...
繼續閱讀全文[教學] 安裝 Line 分享按鈕﹍網頁版及行動裝置都相容的語法
![[教學] 安裝 Line 分享按鈕﹍網頁版及行動裝置都相容的語法](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7tZGri4MxQSlcw0lYmmlH5nkhS9z2UWaPTpgB45XReHyq2ZEmUBTUVeF71shXcj98KQtcCriBwsRmaTfCXLcRf04Zt5RwDJQT2rnCsnOmsyHiovg0nT1JTdhdRn9-slxxnuhtRuKoUQe3/s1600/line-share-button.jpg)
2017.1.20 公告: 由於 Line 出了網頁版的程式,本篇的程式碼已經改為網頁版及行動裝置都相容的語法。可忽略原始的文章說明內容,直接跳到「二、所有網站通用的語法」安裝程式碼即可。 雖然 Line 很久以前就釋出可以安裝在部落格網站的分享按鈕,不過之前幫忙朋友安裝時...
繼續閱讀全文[教學]Facebook 讚按鈕﹍四種安裝方式深入剖析
![[教學]Facebook 讚按鈕﹍四種安裝方式深入剖析](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-Wzm1ETC02vwQvJS4xmPZ5Aq59eipz_NOucfO79lYYnIqWrBhZK5s3MJsgsW-C9iqK9sgC8Di3UuC7sAMuvrLvC85x3oad6CjFe7Mn38-Wg6GHS2uotrpSXIdDwKzMYbINmLf1zonAgxw/s1600/fb-like-button-4-installation.jpg)
Facebook 與 Google 這樣的網路龍頭有著共同特色,不斷嘗試、修正錯誤,功能持續更新,因此產品的說明文件很難多年保持不變。讚按鈕(like button)經過多年的演化,已經跟當初不太一樣。雖只是約 38x20 像素的區塊,他的安裝方式、設定選項與應用方式,其實多得超...
繼續閱讀全文Blogger自訂讀者反應、「讚」、「+1」按鈕(二)

一、前言 隨著「讚」按鈕的普及,瀏覽網頁的時候在各種位置都可能看到「讚」,一些內嵌功能讓每則留言都有讚,以某種角度而言,「讚」按鈕太多會造成部分讀者不好的觀感。 當然,「讚」按鈕更偏向是社交工具而非單純讀者反應的工具,如果屬於只想好好閱讀文章的讀者,或許在文章結束的地方有...
繼續閱讀全文Blogger自訂讀者反應、「讚」、「+1」按鈕(一)

一、前言 在 Blogger 中,要如何知道讀者對單一文章的評價、感覺?除了 Blogger 預設的「反應」(Reactions)、「星號評等」功能之外,另外就是安裝有互動效果的「讚」、「+1」按鈕。 以上這四種工具,由於功力不足無法修改「星號評等」在單一文章的自訂樣式,...
繼續閱讀全文