夏の匂いがまた君を思い出させる。 忘れられないの、君と青い夏。

傻瓜如何加入LikeButton到Write.as網誌中

最近很火紅的LikeCoin,感覺很多網誌都加入了,但是LikeCoin網站裡的設定教學只有 Wordpress、Medium這兩種,如果要加到別家的網誌中,可能要比較麻煩一點了。我喜歡Write.as的簡潔,自訂功能上可能比不上別家,但Write.as Pro可以使用Javascript,所以理論上應該是可以加入LikeButton的,只是該怎麼加到Write.as網誌中呢?不懂Javascript的我開始從Google尋找解答、、、

LikeButton


先聲明,我不是資訊出身的,沒有什麼程式的基礎,也不是從事相關領域的工作,只有在學校寫過一點bash script / C++的經驗 (不要問我,我都還給教授了),因為嘟友詢問怎麼將LikeCoin的LikeButton放到Write.as網誌裡,於是寫下這個記錄,不敢說是教學,同樣是超級外行,我也是拼拼湊湊意外被我弄出來的,單純瞎子摸象的經驗 ,或許你有更好的安裝方法,或者更好、更簡潔的語法,也可以分享給我?謝謝!

以下簡單說明我是如何加入LikeButton到Write.as網誌裡頭的:

  1. 首先參考了Write.as Themes範例網站裡頭的Javascript,像是『Longhouse Life』這一個,在網誌文章的最下面加入了作者想加入的連結列,我把這段拿來使用,加入了Back to top ↑回到文章最上面的功能,只需要簡單修改一下HTML碼就可以了!
    JS from Longhouse Life
  2. 再來我參考了 『以JavaScript在Blogger等各家網誌的文末、側欄產生LikeButton』這一篇教學底下的程式碼,找出產生LikeButton的段落,然後加到上面Write.as範例裡頭的Javascript中。這裡可以參考前面第1點的Javascript裡頭的註解,將LikeButton的段落放到Add to individual blog post page這一段最後面,就可以在每篇文章顯示LikeButton了。
    JS from danieltw.net

最後將完整的Javascript碼貼到Write.as設定裡的Custom Javascript欄位中,基本上如果可以看到LikeButton出現就大功告成了,只要再加入CSS style調整版面字型等樣式修飾就可以了。

Custom Javascript

可以參考我的網誌Javascript程式碼如下,記得把[Liker ID]換成你自己的;另外,CSS class需要自己定義重新修改一下適合自己的樣式:

var topP = document.createElement("p");
topP.innerHTML = '<div class="custom-nav"><a href="#">Back to top ↑</a></div>';

var cont = document.getElementById("wrapper");
if (cont !== null) {
// Add to blog index and tag pages
cont.appendChild(topP);
} else {
// Add to individual blog post page
cont = document.getElementById("post-body");
cont.insertAdjacentHTML("afterend", topP.outerHTML);
cont.insertAdjacentHTML("afterend", "<div class='custom-nav likecoin'><p>-<br><em>如果你喜歡我的文字,請幫忙按 5 下 Like!我將得到 LikeCoin 的回饋。</em></p><p>回饋由 <a rel='nofollow'  href='https://like.co/'>LikeCoin</a> 基金會出資,只要註冊/登入帳號,點 5 下 Like 就可以贊助我的文章。化讚為賞,支持創作。謝謝你!</p><iframe scrolling='no' frameborder='0' width='640' height='212' src='https://button.like.co/in/embed/[Liker ID]
/button?referrer="+encodeURIComponent(location.href.split("?")[0].split("#")[0])+"'></iframe></div>");
}

Reference:
1. Longhouse Life — Themes
2. 以JavaScript在Blogger等各家網誌的文末、側欄產生LikeButton

#blog #LikeCoin #Writeas