我的作品

[我的作品] RippleDot——用彩色圓圈圈模擬出漣漪

昨天下午大概花了3小時的時間,把我的第2個作品RippleDot寫出來了。這個作品其實沒有任何功能,而且滿無腦的,不過看起來挺炫麗,所以嚴格來說,也算是個作品吧XD。

網頁:

http://i314i.github.io/RippleDot/

github:

http://github.com/i314i/RippleDot

這次的作品我特別加上了兩個元素,Google Analytics 和 Open Graph Protocol。

首先,Google Analytics的功能是提供網站流量報表,可以分析出登入網站的客人有多少、年齡層、語系……今天早上去看的時候,真的有跑數據出來。

而且要加Google Analytics的服務其實很快,只要把Google Analytics的服務辦好,再把它提供的程式碼貼到要分析的html中就完成了。以下是我的程式碼(每個人的序號都不太一樣,所以不要照貼我的):

<script>
(function(i,s,o,g,r,a,m){ i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); 
ga('create', 'UA-68117185-1', 'auto'); 
ga('send', 'pageview'); 
</script> 

不過我覺得這樣每個html都貼實在是很麻煩,所以我把它獨立出來,再開一個js檔,這樣只要在html檔include一行的script就好了,而且又可以重複使用。

而Open Graph Protocol,則是在分享網站的時候,會顯示更多這個網站的資訊,就像下面這個樣子:
OGP

然而,在使用Open Graph Protocol時我遇到了一個問題,就是username.github.io似乎不支援這個服務。這是因為username.github.io並不是這個網站的CNAME。為了解決這個問題,我爬了蠻久的文,加上自己的改進,終於發現這個方法,把url設到image去,原本的image也再開一個image就好了。

        <meta property="og:title" content="RippleDot" />
        <!--<meta property="og:url" content="http://i314i.github.io/RippleDot/" />-->
        <meta property="og:description" content="Colorful ripple filled with dots!!!" />
        <meta property="og:image" content="http://i314i.github.io/RippleDot/" />
        <meta property="og:image" content="http://i314i.github.io/RippleDot/img/RippleDot.png" />

Open Graph Protocol網站:

http://ogp.me/

github.io不能使用Open Graph Protocol的解決方法討論:

http://ramsesoriginal.info/2015/03/21/facebook-open-graph-github-pages/

Facebook Open Graph Protocol debugger:

https://developers.facebook.com/tools/debug/og/object/

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 變更 )

Twitter picture

You are commenting using your Twitter account. Log Out / 變更 )

Facebook照片

You are commenting using your Facebook account. Log Out / 變更 )

Google+ photo

You are commenting using your Google+ account. Log Out / 變更 )

連結到 %s