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

閱讀時間約 10 分鐘
開頭要先特別感謝換日線Shirley 梁雪莉兩位大神的文章,讓長期困擾沒有個人頁面的我動起了念頭,尤其是身為驕傲免費仔的我,研究WordPress架設網站知道要付費後,這把火更是被澆熄許久。
目前網站主要規劃放置過往的文章為主,首先來看成品的部分:木村白哉的個人寫作空間
個人主頁首頁
比較遺憾的是,個人長期活躍的平台是在MEDIUM,SEO每天帶來穩定的流量,所以首發文章也都會先上傳至MEDIUM。
直到2021年4月開始因為MEDIUM政策改變,日流量從原先每日三、四百,至今已經趨近於零,近期逐漸將文章慢慢轉向VOCUS,因此個人頁面所提及的文章都是來自上述兩個平台。
所以在Matters上的第一篇原創文章,這篇算是第一篇吧!
取之於Matters、回饋於Matters。
今天各位讀者在VOCUS看到本文,主要是筆者覺得時候到了,可以將文章轉發至此的緣故。
關於google協作平台基礎上的操作,上述兩位大大皆有提到的建議,個人就不再贅言,這邊就直接附上參考連結:
  1. 用google協作平台做matters分類目錄
  2. 教你用google協作平台做網頁/給出版社的單書頁範例
  3. 我用 Google 協作平台成功設立了我的 個人主頁!!
前言說完了,站在巨人的肩膀上,換我給想要透過google協作平台製作個人網站的人一些個人在製作頁面上的建議。
補充如何在google協作平台上設置網頁造訪人次計數器、版權聲明的宣告方式以及Likeco拍手內嵌方式

網頁造訪人次計數器

我在頁尾放上一個部落格很常用到的造訪人數計數器功能:
造訪人數計數器(網站計數器)
只要上網搜尋瀏覽人次、網頁計數器等關鍵字,就能查到許多免費的版本。個人目前使用的是日本提供的版本:無料アクセスカウンター,設定方式在右上角有「大家尊敬的台灣」,點下去後就會變成繁體中文版。
設定完初始值、顯示位數、背景顏色,再選完樣式後送出,就會產生一組程式碼,原封不動的複製下來後,回到個人頁面,在右方編輯欄的「插入」選項中選擇「內嵌」,將複製的程式碼貼上「嵌入程式碼」,點選「下一個」後就大功造成了!
google協作平台,嵌入網頁內容設定
最後再根據排版改變大小與位置,就能幫自己紀錄開站至今(使用計數器後)的累計造訪人數。

版權宣告

身為一個寫作人,沒有人希望自己的文章被有心人士所盜用,所以我在頁尾的最下方附上版權宣告:
頁尾最下方呈現的版權宣告
為了確保格式正確,特地去找了中英兩個版本的格式。首先要先對版權宣告的基本構成有所了解:
版權聲明:©符號代表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. 中文:© [年] [擁有者]

範例參考

  • 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
  • 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文章的方式,將網址連結使用「插入」的「內嵌」選項中,將複製的連結貼在「使用網址上傳」:
「插入」的「內嵌」選項中,將複製的連結貼在「使用網址上傳」,最後會如右圖所示
雖然個人在發布後,用個人帳號看是沒有問題,但是只要在非帳號模式下觀看(無痕模式),就會顯示 「like.co拒絕連線」。
非帳號模式下看,原先正常的拍手會無法正常顯示
才發現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>
拿「嵌入程式碼」與「使用網址上傳」比較一下:
右上為「嵌入程式碼」,右下為「使用網址上傳」
會發現「使用網址上傳」的內嵌方式會多出一個「返回」的橫條,最後在非本人帳號或是非帳號模式下進入頁面,就會跑出剛剛無法顯示拍手、或是「like.co拒絕連線」的情況發生。
所以有考慮在google協作平台上內嵌like.co拍手功能的朋友,關於like.co拍手功能該如何「正確」嵌入才能正確顯現在網頁上,上述方法一定要學起來!

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

在我自己的個人頁面中,有一個最新資訊的欄位,內容頁面是利用「可收合的文字」做重大資訊更新的使用。利用日期跟大標當作主題,對資訊有興趣的人在去做點選標題內文即可,這樣可以大幅節省頁面篇幅,也減少瀏覽者對資訊轟炸導致的疲乏。
利用收合文字的功能簡化頁面
另一個好處是,之後舊訊息太多要整理時,只要在最新資訊的拉一個年份與月份的子頁面(2021年7月),將舊資訊的整個文字方塊剪下後貼到該子分頁即可,方便歸類自己網頁的營運軌跡。

結語

關於透過google協作平台自建個人網站的補充,大概就說到這,希望藉由這篇文章拋磚引玉式,吸引其他厲害的設計者分享自己如何美化個人頁面的方式與手法。
對於個人網頁內的文章連結,沒有任何一個來自Matters,實在是愧對馬格市的各位先進。雖說如此,若喜歡敝人文章,歡迎大家直接造訪MEDIUM方格子VOCUS以及Matters
最後,對於個人主頁木村白哉的個人寫作空間內容有任何指教,也歡迎大家不吝提出(路過可以順便拍個手,當作是「到此一遊」的足跡證明XD)。

參考資料

  1. 用google協作平台做matters分類目錄
  2. 教你用google協作平台做網頁/給出版社的單書頁範例
  3. 我用 Google 協作平台成功設立了我的 個人主頁!!
  4. 版尾的版權宣告(Copyright©)該如何寫才正確
  5. 網頁設計中的版權宣告(Copyright©)應該怎麼寫?
  6. 「教學」在 HTML 網頁讓 Copyright 永遠顯示目前年份
237會員
455Content count
一位在因緣際會之下,動了想去紐西蘭的念頭,卻陰錯陽差跑到澳洲打工度假的背包客。 脫離台灣世俗的期待,踏上打工度假的不歸路,第二人生正式在澳洲啟航。 如果人生很短,那青春就是短暫一瞬間,屬於你的第二人生,下一站在哪呢?還沒開始的理由,又是什麼呢? 歡迎來到我的澳洲故事館,分享我在澳洲的旅程故事。
留言0
查看全部
發表第一個留言支持創作者!
Patrick.Wong的沙龍 的其他內容
身為一個長期訂閱經理人與數位時代的讀者,對於這幾個月來巨思文化集團在電子報上的做法,我想說:我看不到以往「經理人」與「數位科技」的 「Sense」有用心在像我這種透過Email訂閱電子報的觀眾上。 門面有失專業,文章內容與定位不符,恭喜你們得到了許多蹭時事流量的觀眾,失去的只是像我這種少數人種。
回想大四那年,對企管有了濃厚的興趣,就在思考是要就讀MBA,還是當兵然後出社會。當時糾結於:多花兩年所得到的成效,到底值不值得我投入?長期角度而言,我不知道,就當作追求興趣吧!短期角度而言,我知道自己讀研究所的目的,就是讓自己對企管的學習一次到位。剩下的,就是我有沒有下定決心,用兩年的時間全力以赴。
還記得兩年前的今天,2019年9月16日下午,得到雷老師心肌梗塞離世的消息。蜂擁而至的追念映入眼簾,噩耗宛如病毒感染般在臉書、賴群中蔓延。我想老師一定滴酒不沾持續很長一段時間,否則怎麼會揮一揮衣袖,卻不帶走一瓶威士忌?想不到,離校前的最後一堂課,在歡笑中跟老師道別,竟也成了與老師的最後一面。
虛實整合之後,接下來跟數據有關的專業,就是屬於虛擬世界中的製造業者-數據業該做的事。數據在兩者間流通,這些數據就像原物料一樣,藉由互聯網這條高速公路,將數據送到各個系統中,把數據加工處理成有用的資訊,最終讓需求者進行商業運用、產業優化,或是進行更高階的數據演算應用。
在職涯的發展上,必須要思考自身的專業技能是「依附」在什麼樣的資產上?是必須在重資產、輕資產還是無形資產上才能一展長才呢? 在已累積的資歷下,專業能力依附於重資產上,要轉換跑道時,由於重資產無法輕易取得或變動,自身價值也被綁定在特定的產業或企業中,一但跳脫環境,擁有的專業能力可能就變得一文不值。
雖然我還不知道要走什麼產業,從未來創業的角度去思考職涯發展,資源整合是創業最需要的核心技能。 因此在職涯中,要盡可能把資源整合變成自己的專業,立志要當一個資源整合者,而能達成這個目標的職位也就是雙PM-產品經理以及專案經理。 現在的職涯目標,就先朝這兩個職位目標邁進。
身為一個長期訂閱經理人與數位時代的讀者,對於這幾個月來巨思文化集團在電子報上的做法,我想說:我看不到以往「經理人」與「數位科技」的 「Sense」有用心在像我這種透過Email訂閱電子報的觀眾上。 門面有失專業,文章內容與定位不符,恭喜你們得到了許多蹭時事流量的觀眾,失去的只是像我這種少數人種。
回想大四那年,對企管有了濃厚的興趣,就在思考是要就讀MBA,還是當兵然後出社會。當時糾結於:多花兩年所得到的成效,到底值不值得我投入?長期角度而言,我不知道,就當作追求興趣吧!短期角度而言,我知道自己讀研究所的目的,就是讓自己對企管的學習一次到位。剩下的,就是我有沒有下定決心,用兩年的時間全力以赴。
還記得兩年前的今天,2019年9月16日下午,得到雷老師心肌梗塞離世的消息。蜂擁而至的追念映入眼簾,噩耗宛如病毒感染般在臉書、賴群中蔓延。我想老師一定滴酒不沾持續很長一段時間,否則怎麼會揮一揮衣袖,卻不帶走一瓶威士忌?想不到,離校前的最後一堂課,在歡笑中跟老師道別,竟也成了與老師的最後一面。
虛實整合之後,接下來跟數據有關的專業,就是屬於虛擬世界中的製造業者-數據業該做的事。數據在兩者間流通,這些數據就像原物料一樣,藉由互聯網這條高速公路,將數據送到各個系統中,把數據加工處理成有用的資訊,最終讓需求者進行商業運用、產業優化,或是進行更高階的數據演算應用。
在職涯的發展上,必須要思考自身的專業技能是「依附」在什麼樣的資產上?是必須在重資產、輕資產還是無形資產上才能一展長才呢? 在已累積的資歷下,專業能力依附於重資產上,要轉換跑道時,由於重資產無法輕易取得或變動,自身價值也被綁定在特定的產業或企業中,一但跳脫環境,擁有的專業能力可能就變得一文不值。
雖然我還不知道要走什麼產業,從未來創業的角度去思考職涯發展,資源整合是創業最需要的核心技能。 因此在職涯中,要盡可能把資源整合變成自己的專業,立志要當一個資源整合者,而能達成這個目標的職位也就是雙PM-產品經理以及專案經理。 現在的職涯目標,就先朝這兩個職位目標邁進。
你可能也想看
Thumbnail
1.加權指數與櫃買指數 週五的加權指數在非農就業數據開出來後,雖稍微低於預期,但指數仍向上噴出,在美股開盤後於21500形成一個爆量假突破後急轉直下,就一路收至最低。 台股方面走勢需觀察週一在斷頭潮出現後,週二或週三開始有無買單進場支撐,在沒有明確的反轉訊號形成前,小夥伴盡量不要貿然抄底,或是追空
Thumbnail
重點摘要: 1.9 月降息 2 碼、進一步暗示年內還有 50 bp 降息 2.SEP 上修失業率預期,但快速的降息速率將有助失業率觸頂 3.未來幾個月經濟數據將繼續轉弱,經濟復甦的時點或是 1Q25 季底附近
Thumbnail
近期的「貼文發佈流程 & 版型大更新」功能大家使用了嗎? 新版式整體視覺上「更加凸顯圖片」,為了搭配這次的更新,我們推出首次貼文策展 ❤️ 使用貼文功能並完成這次的指定任務,還有機會獲得富士即可拍,讓你的美好回憶都可以用即可拍珍藏!
Thumbnail
我人生的第一個個人主頁「Shirley Leung 的創作空間」 終 於 出 爐 了 !
Thumbnail
       近期皓哥3C都有遇到客戶跟皓哥反應Android手機或平板發生GOOGLE屢次停止運作的訊息不斷跳出,尤其今天中午特別嚴重,很多客人的安卓手機或平板都發生災情,紛紛電話詢問皓哥該如何處理. 目前皓哥判斷這可能是安卓系統最新的更新又出現問題,目前還是要等待GOOGLE發布最新的版本,
Thumbnail
由於重新架了一個新網站,流量全掉,SEO 什麼的全部重來😞 既然如此,我就一邊重弄一編寫教學文吧!(握拳) 今天我會介紹一個最基本的工具:Google Search Console。 這是一個 Google 提供的免費網站 SEO 工具,讓使用者可以提交自己的網站給 Google 搜尋引擎做檢索,
Thumbnail
上次小K向大家介紹了Google Ads是甚麼,亦了解了我們可以如何透過投放廣告來提升我們的曝光率,這次小K便想教大家一個既可以節省成本,又可以宣傳自己的方法,在Google Ads裡面投放廣告的時候,我們首先需要申請一個Google Ads的帳號,如果你本來已經有Google帳號的話,那麼你就可以
Thumbnail
「自媒體」不單單只能透過「影片」、「聲音」、「文字」去分享,也有另一種是將自己形塑成一個「訊息傳播站」,你把你想要推薦的,一一展現給網路的使用者,從影視到聲音,從娛樂到閱讀,從日常到深度的思考⋯⋯像個真正的媒體,多元地傳播好內容給其他的人。
Thumbnail
發現google協作平台提供新的、簡單的網頁製作功能,便拿手邊正在進行的案子元素來做一個單書頁,也隨手拿來做成教學。(感謝麥田出版提供圖文資料)如果有興趣的人想研究,這功能幾乎也能做成一個陽春但還算功能齊全的「網站」或者個人的基本文字連載之類的,這就容後再談了。
Thumbnail
電子商務平台若要經營的好,首重數據解析。所謂數據解析,並不是一群行銷人員聚在一起猜猜看、想想看,說的頭頭是道,好似有理有據的分析;真正有用的分析,應該是第一線實戰得來的經驗數據。如果電子商務平台提供 GA 功能,所有第一線實戰經驗數據,將大大增加整個平台商家的營收。---電子商務平台策略聯盟
Thumbnail
1.加權指數與櫃買指數 週五的加權指數在非農就業數據開出來後,雖稍微低於預期,但指數仍向上噴出,在美股開盤後於21500形成一個爆量假突破後急轉直下,就一路收至最低。 台股方面走勢需觀察週一在斷頭潮出現後,週二或週三開始有無買單進場支撐,在沒有明確的反轉訊號形成前,小夥伴盡量不要貿然抄底,或是追空
Thumbnail
重點摘要: 1.9 月降息 2 碼、進一步暗示年內還有 50 bp 降息 2.SEP 上修失業率預期,但快速的降息速率將有助失業率觸頂 3.未來幾個月經濟數據將繼續轉弱,經濟復甦的時點或是 1Q25 季底附近
Thumbnail
近期的「貼文發佈流程 & 版型大更新」功能大家使用了嗎? 新版式整體視覺上「更加凸顯圖片」,為了搭配這次的更新,我們推出首次貼文策展 ❤️ 使用貼文功能並完成這次的指定任務,還有機會獲得富士即可拍,讓你的美好回憶都可以用即可拍珍藏!
Thumbnail
我人生的第一個個人主頁「Shirley Leung 的創作空間」 終 於 出 爐 了 !
Thumbnail
       近期皓哥3C都有遇到客戶跟皓哥反應Android手機或平板發生GOOGLE屢次停止運作的訊息不斷跳出,尤其今天中午特別嚴重,很多客人的安卓手機或平板都發生災情,紛紛電話詢問皓哥該如何處理. 目前皓哥判斷這可能是安卓系統最新的更新又出現問題,目前還是要等待GOOGLE發布最新的版本,
Thumbnail
由於重新架了一個新網站,流量全掉,SEO 什麼的全部重來😞 既然如此,我就一邊重弄一編寫教學文吧!(握拳) 今天我會介紹一個最基本的工具:Google Search Console。 這是一個 Google 提供的免費網站 SEO 工具,讓使用者可以提交自己的網站給 Google 搜尋引擎做檢索,
Thumbnail
上次小K向大家介紹了Google Ads是甚麼,亦了解了我們可以如何透過投放廣告來提升我們的曝光率,這次小K便想教大家一個既可以節省成本,又可以宣傳自己的方法,在Google Ads裡面投放廣告的時候,我們首先需要申請一個Google Ads的帳號,如果你本來已經有Google帳號的話,那麼你就可以
Thumbnail
「自媒體」不單單只能透過「影片」、「聲音」、「文字」去分享,也有另一種是將自己形塑成一個「訊息傳播站」,你把你想要推薦的,一一展現給網路的使用者,從影視到聲音,從娛樂到閱讀,從日常到深度的思考⋯⋯像個真正的媒體,多元地傳播好內容給其他的人。
Thumbnail
發現google協作平台提供新的、簡單的網頁製作功能,便拿手邊正在進行的案子元素來做一個單書頁,也隨手拿來做成教學。(感謝麥田出版提供圖文資料)如果有興趣的人想研究,這功能幾乎也能做成一個陽春但還算功能齊全的「網站」或者個人的基本文字連載之類的,這就容後再談了。
Thumbnail
電子商務平台若要經營的好,首重數據解析。所謂數據解析,並不是一群行銷人員聚在一起猜猜看、想想看,說的頭頭是道,好似有理有據的分析;真正有用的分析,應該是第一線實戰得來的經驗數據。如果電子商務平台提供 GA 功能,所有第一線實戰經驗數據,將大大增加整個平台商家的營收。---電子商務平台策略聯盟