如何用google協作平台建置個人主頁?

更新 發佈閱讀 11 分鐘

開頭要先特別感謝換日線Shirley 梁雪莉兩位大神的文章,讓長期困擾沒有個人頁面的我動起了念頭,尤其是身為驕傲免費仔的我,研究WordPress架設網站知道要付費後,這把火更是被澆熄許久。

目前網站主要規劃放置過往的文章為主,首先來看成品的部分:木村白哉的個人寫作空間

raw-image

比較遺憾的是,個人長期活躍的平台是在MEDIUM,SEO每天帶來穩定的流量,所以首發文章也都會先上傳至MEDIUM。

直到2021年4月開始因為MEDIUM政策改變,日流量從原先每日三、四百,至今已經趨近於零,近期逐漸將文章慢慢轉向VOCUS,因此個人頁面所提及的文章都是來自上述兩個平台。

所以在Matters上的第一篇原創文章,這篇算是第一篇吧!

取之於Matters、回饋於Matters。

今天各位讀者在VOCUS看到本文,主要是筆者覺得時候到了,可以將文章轉發至此的緣故。

關於google協作平台基礎上的操作,上述兩位大大皆有提到的建議,個人就不再贅言,這邊就直接附上參考連結:

  1. 用google協作平台做matters分類目錄
  2. 教你用google協作平台做網頁/給出版社的單書頁範例
  3. 我用 Google 協作平台成功設立了我的 個人主頁!!

前言說完了,站在巨人的肩膀上,換我給想要透過google協作平台製作個人網站的人一些個人在製作頁面上的建議。

補充如何在google協作平台上設置網頁造訪人次計數器、版權聲明的宣告方式以及Likeco拍手內嵌方式

網頁造訪人次計數器

我在頁尾放上一個部落格很常用到的造訪人數計數器功能:

raw-image

只要上網搜尋瀏覽人次、網頁計數器等關鍵字,就能查到許多免費的版本。個人目前使用的是日本提供的版本:無料アクセスカウンター,設定方式在右上角有「大家尊敬的台灣」,點下去後就會變成繁體中文版。

設定完初始值、顯示位數、背景顏色,再選完樣式後送出,就會產生一組程式碼,原封不動的複製下來後,回到個人頁面,在右方編輯欄的「插入」選項中選擇「內嵌」,將複製的程式碼貼上「嵌入程式碼」,點選「下一個」後就大功造成了!

raw-image

最後再根據排版改變大小與位置,就能幫自己紀錄開站至今(使用計數器後)的累計造訪人數。

版權宣告

身為一個寫作人,沒有人希望自己的文章被有心人士所盜用,所以我在頁尾的最下方附上版權宣告:

raw-image

為了確保格式正確,特地去找了中英兩個版本的格式。首先要先對版權宣告的基本構成有所了解:

版權聲明:©符號代表Copyright,Copyright可用©來代替,寫了©後,Copyright可有可無。常見的幾種寫法:

  1. Copyright ©
  2. ©
  3. ©opyright

年份:可以是一個發表的年份(2021),或是一個年份區間(2015–2021)。

作者:著作權擁有者的名稱或是縮寫,可以是公司(如果是公司網站,通常是掛公司的抬頭全名),也可以是作者筆名或暱稱。

完整的版權宣告寫法:

  1. ENGLISH:Copyright © [year] [owner]. All rights reserved.
  2. 中文:版權所有© [年] [擁有者]
  3. 中英混搭:Copyright © [年] [擁有者] 版權所有

精簡的版權宣告寫法:

  1. ENGLISH:© [year] [owner].
  2. 中文:© [年] [擁有者]

範例參考

Apple

  • Copyright © 2021 Apple Inc. All rights reserved.
  • Copyright © 2021 Apple Inc. 保留一切權利。

台積電

  • Copyright© 2010–2020 台灣積體電路製造股份有限公司 著作權所有
  • Copyright© Taiwan Semiconductor Manufacturing Company Limited 2010–2020, All Rights Reserved.

NIKE:© 2021 Nike, Inc. All Rights Reserved

Gogoro

  • Copyright © 2014–2021 Gogoro Inc. 著作權所有,並保留一切權利。
  • Copyright © 2014–2021 Gogoro Inc. All rights reserved.

Microsoft:© Microsoft 2021

基本上很彈性,有許多知名企業的官網頁尾都能參考。個人則是沒想太多,純粹因為頁尾很空,所以就先將中英兩版先都丟上去站版位,也順便把圖片的來源也一併說明(網頁圖片皆來自本人拍攝)。

確認好自己想呈現的版權宣告格式後,為了避免每年手動修改年份,因此我內嵌了一段程式碼,每過一年就會幫我自動更新到最新的年份。

英文格式:

Copyright ©
<script language="JavaScript" type="text/javascript">
now = new Date
theYear = now.getYear()
if (theYear < 1900)
theYear = theYear + 1900
document.write(theYear)
</script> Patrick Wong. All rights reserved.

開頭的 Copyright ©可以修改成自己喜歡的方式,尾巴的Patrick Wong. All rights reserved.也可以根據個人頁面以及呈現方式做修改。不單單是英文,也能用中文呈現:

版權所有 ©
<script language="JavaScript" type="text/javascript">
now = new Date
theYear = now.getYear()
if (theYear < 1900)
theYear = theYear + 1900
document.write(theYear)
</script> 木村白哉

大家就根據自己的喜好修改後,同樣在「插入」的「內嵌」選項中,將複製的程式碼貼上「嵌入程式碼」,並修改成自己想樣的文字內容,點選「下一個」後就大功造成了!

內嵌like.co拍手連結

個人一開始是直接仿造MEDIUM文章的方式,將網址連結使用「插入」的「內嵌」選項中,將複製的連結貼在「使用網址上傳」:

raw-image

雖然個人在發布後,用個人帳號看是沒有問題,但是只要在非帳號模式下觀看(無痕模式),就會顯示 「like.co拒絕連線」。

raw-image

才發現google協作平台沒有像MEDIUM這麼人性化,將網址丟入文章就能使用。最後沒辦法,與大神換日線請教,正確的方式要在右方編輯欄的「插入」選項中選擇「內嵌」,將以下程式碼「修改成自己的格式」後貼在「嵌入程式碼」,最後點選「下一個」就可以成功顯示。

<iframe data-v-b66e9a5a=”” frameborder=”0" height=”230" src=”https://button.like.co/in/embed/你們的ID /button?referrer=單篇網頁的網址” width=”100%”></iframe>

像是我自己最後的「嵌入程式碼」設定如下(要記得改成自己的網址!):

<iframe data-v-b66e9a5a="" frameborder="0" height="200" src="https://button.like.co/in/embed/patrick_wong/button?referrer=https://sites.google.com/view/patrick-wong/" width="100%"></iframe>

拿「嵌入程式碼」與「使用網址上傳」比較一下:

raw-image

會發現「使用網址上傳」的內嵌方式會多出一個「返回」的橫條,最後在非本人帳號或是非帳號模式下進入頁面,就會跑出剛剛無法顯示拍手、或是「like.co拒絕連線」的情況發生。

所以有考慮在google協作平台上內嵌like.co拍手功能的朋友,關於like.co拍手功能該如何「正確」嵌入才能正確顯現在網頁上,上述方法一定要學起來!

最新資訊與可收合文字的運用

在我自己的個人頁面中,有一個最新資訊的欄位,內容頁面是利用「可收合的文字」做重大資訊更新的使用。利用日期跟大標當作主題,對資訊有興趣的人在去做點選標題內文即可,這樣可以大幅節省頁面篇幅,也減少瀏覽者對資訊轟炸導致的疲乏。

raw-image

另一個好處是,之後舊訊息太多要整理時,只要在最新資訊的拉一個年份與月份的子頁面(2021年7月),將舊資訊的整個文字方塊剪下後貼到該子分頁即可,方便歸類自己網頁的營運軌跡。

結語

關於透過google協作平台自建個人網站的補充,大概就說到這,希望藉由這篇文章拋磚引玉式,吸引其他厲害的設計者分享自己如何美化個人頁面的方式與手法。

對於個人網頁內的文章連結,沒有任何一個來自Matters,實在是愧對馬格市的各位先進。雖說如此,若喜歡敝人文章,歡迎大家直接造訪MEDIUM方格子VOCUS以及Matters

最後,對於個人主頁木村白哉的個人寫作空間內容有任何指教,也歡迎大家不吝提出(路過可以順便拍個手,當作是「到此一遊」的足跡證明XD)。


參考資料

  1. 用google協作平台做matters分類目錄
  2. 教你用google協作平台做網頁/給出版社的單書頁範例
  3. 我用 Google 協作平台成功設立了我的 個人主頁!!
  4. 版尾的版權宣告(Copyright©)該如何寫才正確
  5. 網頁設計中的版權宣告(Copyright©)應該怎麼寫?
  6. 「教學」在 HTML 網頁讓 Copyright 永遠顯示目前年份
留言
avatar-img
留言分享你的想法!
avatar-img
Patrick.Wong的沙龍
259會員
525內容數
一位在因緣際會之下,動了想去紐西蘭的念頭,卻陰錯陽差跑到澳洲打工度假的背包客。 脫離台灣世俗的期待,踏上打工度假的不歸路,第二人生正式在澳洲啟航。 如果人生很短,那青春就是短暫一瞬間,屬於你的第二人生,下一站在哪呢?還沒開始的理由,又是什麼呢? 歡迎來到我的澳洲故事館,分享我在澳洲的旅程故事。
Patrick.Wong的沙龍的其他內容
2025/04/26
準備買房所做的房市分析:截至2024年底,全台房貸金額平均數919萬、中位數792萬,核貸成數抓7成上下,平均鑑價估值1400萬、平均授信額度剛突破一千萬大關。
Thumbnail
2025/04/26
準備買房所做的房市分析:截至2024年底,全台房貸金額平均數919萬、中位數792萬,核貸成數抓7成上下,平均鑑價估值1400萬、平均授信額度剛突破一千萬大關。
Thumbnail
2025/04/20
時光飛逝,自己已經不是當年那個沒包袱的少年,三十而立的買房焦慮期,到了該落地生根的時候,買房的驅動力與經濟壓力忽然壓到肩膀上,開啟研究台灣房市篇章:2024年新增33萬房奴,台灣背房貸人數220萬來到近年新高。
Thumbnail
2025/04/20
時光飛逝,自己已經不是當年那個沒包袱的少年,三十而立的買房焦慮期,到了該落地生根的時候,買房的驅動力與經濟壓力忽然壓到肩膀上,開啟研究台灣房市篇章:2024年新增33萬房奴,台灣背房貸人數220萬來到近年新高。
Thumbnail
2025/04/13
不論是替代役、還是紐澳打工,總能從職場工作上獲得一些觀點與啟發。在三陽當PM也不例外,本文分享我在工作崗位上所收穫的一點心得: 禮貌與客氣 縮小自身情緒,專注眼前任務 第一印象不重要,找到自己的風格才重要 人非聖賢,孰能無過 經營人脈-特別的日子不用多,記得生日就好 電腦效能決定做事效率
Thumbnail
2025/04/13
不論是替代役、還是紐澳打工,總能從職場工作上獲得一些觀點與啟發。在三陽當PM也不例外,本文分享我在工作崗位上所收穫的一點心得: 禮貌與客氣 縮小自身情緒,專注眼前任務 第一印象不重要,找到自己的風格才重要 人非聖賢,孰能無過 經營人脈-特別的日子不用多,記得生日就好 電腦效能決定做事效率
Thumbnail
看更多
你可能也想看
Thumbnail
週末午後,是我難得可以覓得的安靜時光,兩個孩子的午睡時段,換得一個能令人安心的專屬空間,一切吵雜拋於腦後,珍惜這個專注眼前的獨處時間。 準備好“繪製”的小物件”—選了一顆小番茄,回到書桌前,打開色鉛筆盒、攤好畫紙,展開午後畫畫的小旅程(也為自己的獨享時光沖一杯熱美式咖啡)
Thumbnail
週末午後,是我難得可以覓得的安靜時光,兩個孩子的午睡時段,換得一個能令人安心的專屬空間,一切吵雜拋於腦後,珍惜這個專注眼前的獨處時間。 準備好“繪製”的小物件”—選了一顆小番茄,回到書桌前,打開色鉛筆盒、攤好畫紙,展開午後畫畫的小旅程(也為自己的獨享時光沖一杯熱美式咖啡)
Thumbnail
嗨!大家好,我是順勢流・SHUNFOX,算是喜歡打扮成自己獨特的樣子、偶爾重保養, 也喜歡購買一些實用好物的人! 蝦皮雙12狂歡生日慶購物節就快到了,想趁這個機會回購好物一番, 順便跟大家分享我買過、想買哪些物品~不藏私,好東西值得跟大家共享❤️ 🌊順の雙12必買清單公開! 🌹
Thumbnail
嗨!大家好,我是順勢流・SHUNFOX,算是喜歡打扮成自己獨特的樣子、偶爾重保養, 也喜歡購買一些實用好物的人! 蝦皮雙12狂歡生日慶購物節就快到了,想趁這個機會回購好物一番, 順便跟大家分享我買過、想買哪些物品~不藏私,好東西值得跟大家共享❤️ 🌊順の雙12必買清單公開! 🌹
Thumbnail
我記得部落客(或網紅、KOL、KOC )開始要對商業授權,包含但不限於轉載、投放廣告、再利用等等要額外收費,是從一個媽媽部落客的經紀人開始的。當然我覺得這樣並沒有不合理,我也很認同創作者的創作內容應該可以得到更多報酬。
Thumbnail
我記得部落客(或網紅、KOL、KOC )開始要對商業授權,包含但不限於轉載、投放廣告、再利用等等要額外收費,是從一個媽媽部落客的經紀人開始的。當然我覺得這樣並沒有不合理,我也很認同創作者的創作內容應該可以得到更多報酬。
Thumbnail
一切都從思考作品集要怎麼準備開始,所謂的 one 是起頭難(?),在動手寫 code 之前,總覺得自己做不到,一直在自己煩惱,直到前輩們說:開始做看看吧,一頁式網站也好,不開始做永遠不知道自己哪些知識需要補強。 於是決定先幫我的繆思女神做一個網站,讓她可以介紹自己的工作,再放社群連結
Thumbnail
一切都從思考作品集要怎麼準備開始,所謂的 one 是起頭難(?),在動手寫 code 之前,總覺得自己做不到,一直在自己煩惱,直到前輩們說:開始做看看吧,一頁式網站也好,不開始做永遠不知道自己哪些知識需要補強。 於是決定先幫我的繆思女神做一個網站,讓她可以介紹自己的工作,再放社群連結
Thumbnail
我其實去年就有想弄好個人網站的想法,所以前後找了很多網站希望能夠作為一個發表作品跟心情的場所。可惜很多找到的網站不是只能發圖就是只能發文,或是操作不易,對我來說都不是很好用。現在才來到方格子這裡,這裡的發文主頁清新簡潔也能顯示圖片,操作也簡單,也能夠只更新圖片或是文字,對我來說是比較好用的網站。
Thumbnail
我其實去年就有想弄好個人網站的想法,所以前後找了很多網站希望能夠作為一個發表作品跟心情的場所。可惜很多找到的網站不是只能發圖就是只能發文,或是操作不易,對我來說都不是很好用。現在才來到方格子這裡,這裡的發文主頁清新簡潔也能顯示圖片,操作也簡單,也能夠只更新圖片或是文字,對我來說是比較好用的網站。
Thumbnail
從2021年加入方格子,算算也已經兩年多了,上星期終於收到人生第一筆讀者訂閱,今天來和大家分享如何尋找靈感,培養創作力,並持續走上斜槓之路!
Thumbnail
從2021年加入方格子,算算也已經兩年多了,上星期終於收到人生第一筆讀者訂閱,今天來和大家分享如何尋找靈感,培養創作力,並持續走上斜槓之路!
Thumbnail
建置平台 前一陣子,有人問我是否要找尋合適的平台或自主建置平台,讓自己的文章能夠有更大的能見度。我覺得這是個很好的想法,所以也考慮要自己建立平台。但細想了一下,我覺得建置網站沒有必要,因為我現在的幾個平台就已經足夠我使用,也達到我想要分享內心世界的想法的目的。反而是,我應該思考如何用好平台,讓平台
Thumbnail
建置平台 前一陣子,有人問我是否要找尋合適的平台或自主建置平台,讓自己的文章能夠有更大的能見度。我覺得這是個很好的想法,所以也考慮要自己建立平台。但細想了一下,我覺得建置網站沒有必要,因為我現在的幾個平台就已經足夠我使用,也達到我想要分享內心世界的想法的目的。反而是,我應該思考如何用好平台,讓平台
Thumbnail
寫出更好的文章 最近平台改版,許多人討論如何寫出更好的文章。大家紛紛分析自己的數據後台,並提出來分享和討論。在這裡,我也想藉此機會,從文化創意的角度來談談創作者的數據思維應該是什麼。 創作者的最終目的是要養活自己 首先,創作者的最終目的是要養活自己。要養活自己,就必須讓自己的文章賣得出去,吸引
Thumbnail
寫出更好的文章 最近平台改版,許多人討論如何寫出更好的文章。大家紛紛分析自己的數據後台,並提出來分享和討論。在這裡,我也想藉此機會,從文化創意的角度來談談創作者的數據思維應該是什麼。 創作者的最終目的是要養活自己 首先,創作者的最終目的是要養活自己。要養活自己,就必須讓自己的文章賣得出去,吸引
Thumbnail
Google搜尋頁 一年一度的新開始,今年要做什麼好?先從外面看自己。打開Google搜尋頁,輸入「普普文創」,看到了幾個數字跟網站。第一個讓我驚訝的數字是高達4620萬的搜尋結果。這麼多人會打這些文字進去找「普普文創」這四個關鍵字?第二個觀察現象是,前面四個搜尋結果都是我在各平台經營的網站,分別
Thumbnail
Google搜尋頁 一年一度的新開始,今年要做什麼好?先從外面看自己。打開Google搜尋頁,輸入「普普文創」,看到了幾個數字跟網站。第一個讓我驚訝的數字是高達4620萬的搜尋結果。這麼多人會打這些文字進去找「普普文創」這四個關鍵字?第二個觀察現象是,前面四個搜尋結果都是我在各平台經營的網站,分別
Thumbnail
「不要害羞於分享或投稿你的文字,你比想像中的更有價值。」 ✦✦✦ 這篇文章主要是分享我曾經在那些地方曝光自己的文章,也給想要做這件事情的你參考! 最初開始寫部落格至今應該已經有十幾年了,最早是記錄自己心情的個人部落格、後來是分享文具購物心得、近幾年則是加入了書的閱讀心得。 從架設個人網站後就想,也許
Thumbnail
「不要害羞於分享或投稿你的文字,你比想像中的更有價值。」 ✦✦✦ 這篇文章主要是分享我曾經在那些地方曝光自己的文章,也給想要做這件事情的你參考! 最初開始寫部落格至今應該已經有十幾年了,最早是記錄自己心情的個人部落格、後來是分享文具購物心得、近幾年則是加入了書的閱讀心得。 從架設個人網站後就想,也許
Thumbnail
感謝換日線、梁雪莉Shirley兩位關於如何透過google協作平台自建個人網站的文章,讓長期困擾沒有個人頁面的我動起了念頭。 本篇文章補充分享網頁造訪人次計數器的設置、版權聲明的宣告方式以及Likeco拍手嵌入,希望藉由這篇文章拋磚引玉式,吸引其他厲害的設計者分享自己如何美化個人頁面的方式與手法。
Thumbnail
感謝換日線、梁雪莉Shirley兩位關於如何透過google協作平台自建個人網站的文章,讓長期困擾沒有個人頁面的我動起了念頭。 本篇文章補充分享網頁造訪人次計數器的設置、版權聲明的宣告方式以及Likeco拍手嵌入,希望藉由這篇文章拋磚引玉式,吸引其他厲害的設計者分享自己如何美化個人頁面的方式與手法。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News