dllee

※ 2008-11-01 增訂 日記及不同版型的支援 (感謝 RRobiKing 測試)
總算試出來了
在 IE 完全正常，在 FireFox 則是在摘要列表時，最後一篇不會顯示按鈕，單篇文章則完全正常。
本次修改參考了以下來源：

平凡小人物: 天空部落格加入推推王貼紙
[更新] 讓每篇文章都自動加入黑米跟推推王的收推文按鈕 @ Nelson 是好傻好天真國一生 :: PIXNET 痞客邦 ::
Racklin's 阿土伯程式大觀園: 推推王 推文按鈕貼紙 加強版

一開始參考程式碼 http://nelson.csie.us/OtherBlog/addGoogleAd_yam.js

/*
 * 作者: Nelson (http://blog.pixnet.net/Nelson)
 * 說明: 讓 天空部落 的文章自動加入 Google AdSense
 * 備註: 原始程式碼來自 http://blog.xuite.net/emisjerry/tech/11088489，
 *       我將它改成適合 Pixnet 的版本。
 * 版本: v1.1，2008/01/24
 * 適用: 天空部落
 * 授權: 自由使用及修改，拿去用之前，
 * 		 麻煩到 http://blog.pixnet.net/Nelson/post/3967606 留個言給我。
 */

/*
 * 檢查網址裡頭有沒有 "/article/" 字串，
 * 有的話就代表是單篇文章。
 */
var isArticle = false;
if (document.URL.indexOf("/article/") > 0)
	isArticle = true;

if (isArticle)
{
    if (document.addEventListener)
		document.addEventListener('load', init, false);
    else
		window.attachEvent('onload', init);
}

function init()
{
	// "Content" 是文章的主要區塊
	var CONTENT = document.getElementById("articleBlock");
	var DIVs = CONTENT.getElementsByTagName('div');
	for (var i in DIVs)
	{
		var x = new String(DIVs[i].className);
		if (x.indexOf("articleLink") == 0)
		{
			DIVs[i].innerHTML =
				document.getElementById("divAdSenseContentScript").innerHTML + DIVs[i].innerHTML;
			break;
		}
	}
}

按Nelson 及平凡小人物的方式，很快就可以讓單篇文章自動擁有FunP推文按鈕，不過，我比較想在主頁上的每一篇文章旁就看到推文按鈕，不用點進去看也能看到。因此多花了不少時間在測試及資料搜尋。

其中，最主要遇到的問題是：
在 innerHTML 加入了 java script 後，該 java script 並不會執行!!

在主頁中，可能有 10 篇文章，每一篇文章的網址不同，要能動態取出每一篇文章的網址，再動態加入 FunP推文按鈕 的 script 內，才能達到目的。不過，因為網頁已產生完畢，所以瀏覽器不會再去執行剛生出來的 script code，也就看不到改後的效果了。在 FireFox 內使用 FireBug 就會發現，剛才出來的 script code 以灰色字顯示。

找了很多資料，但許多實在是超過我可以理解的範圍，似乎是有解，又好像很麻煩... 最後，看到Racklin's 阿土伯程式大觀園: 推推王 推文按鈕貼紙 加強版
程式碼：http://blogger-ext2.googlecode.com/svn/trunk/3rd/funp_button2.js

function funp_genBtnByClass() {
	for (i=0;i<document.getElementsByTagName("div").length; i++) {
		if (document.getElementsByTagName("div").item(i).className == "funp_button"){
			var objDiv = document.getElementsByTagName("div").item(i);
			var url = objDiv.innerHTML;

            if (url.length ==0) url = "?url="+encodeURIComponent(document.URL);
            else url="?url="+encodeURIComponent(url);

            objDiv.innerHTML= '<iframe src="http://funp.com/tools/buttoniframe.php'+url+'" height="69" width="60" scrolling="no" frameborder="0" marginheight="0" marginwidth="0"></iframe>';
		}
	}
}

if (window.attachEvent) window.attachEvent('onload', funp_genBtnByClass);
else window.addEventListener('load', funp_genBtnByClass, false);

if (typeof BloggerExt != 'undefined') {
  if(typeof BloggerExt.registerHook == 'function') BloggerExt.registerHook(funp_genBtnByClass);
}

阿土伯直接使用 FunP推文按鈕 script 所產出的 iframe，避掉在 innerHTML 內加入 script 的方式，讓動態產生的 HTML 可以正常顯示。於是我先手動加入我想要的 FunP推文按鈕，去看它生出來的 HTML是什麼，最後修改程式碼如下：

// 說明請參考 http://blog.yam.com/dllee/article/17641242
var needAddBtn= false;
var onlyOne=false;
// 目前只處理網誌的部分
if (document.URL.indexOf("/blog.yam.com/") >= 0)	needAddBtn = true;
// 如果網址有 article 表示是在瀏覽單篇文章
if (document.URL.indexOf("/article/") >= 0)	onlyOne = true;

if (needAddBtn)
{
	if (window.addEventListener)
		window.addEventListener('load', addFunP, false);
	else
		window.attachEvent('onload', addFunP);
}

function addFunP()
{
	var CONTENT = document.getElementById("articleBlock");
	var DIVs = CONTENT.getElementsByTagName('div');
	// 取出天空網誌文章的連結的正規表示法 
	var pattern = new RegExp("http://blog.yam.com/.*/article/[0-9]+", "i");
	var btnStr;
	for (var i in DIVs)
	{
		var x = new String(DIVs[i].className);
		if (x.indexOf("post_titlediv")==0)
		{	// 找到文章標題內的連結
			var myUrl = DIVs[i].innerHTML.match(pattern);
			btnStr='<div style="font-size: 0px; float: right; margin-left: 10px;">'
			+'<iframe height="66" frameborder="0" width="60" scrolling="no" marginwidth="0" marginheight="0" src="http://funp.com/tools/buttoniframe.php?url='
			+myUrl[0]+'&s=7"></iframe></div>';
		}
		else if (x.indexOf("post_content")==0)
		{	// 找到文章內容，加入 FunP 按鈕 HTML
			DIVs[i].innerHTML = btnStr + DIVs[i].innerHTML;
			if(onlyOne) break;	// 單篇文章時找到就可以離開了
		}
	}
}

在以上的程式中，是先找出 post_titlediv 內的文章 URL，再使用它去產生 FunP推文按鈕 的 iframe，接著找到 post_content，再把剛才的按鈕 HTML 加到文章內文的一開頭。這樣的方法，在文章列表及單篇文章中都可以使用。唯獨在單篇文章時，引用文章的區塊也是使用 post_content，於是再加上判斷，在單篇文章模式(URL 內有 /article/)只要找到一篇文章就結束，避免在引用文章內也出現推文按鈕。

---

以上的說明，我想大部分的人都不想知道，比較想知道的是「到底如何用？」「如何趕快加到自己的格內？」 以下就是說明囉

先下載附件：addFunP_yam.js (請按右鍵另存新檔)
將它存放到您可以直接連結的網頁空間，例如 googlepages，記下它的 URL。

到天空部落的管理介面，增加一個自定欄位(或是加在現有的自定欄位內也可以)，加入以下的程式碼：

<script src="http://Your.URL/addFunP_yam.js" language="JavaScript" type="text/javascript"></script>

儲存後，記得重新產生 blog 頁面，回到網誌頁面，就可以看到每篇文章都會有FunP推文按鈕了。在寫文章時，不必再加入任何的程式碼，這個 script 會自動幫您處理

後記：
1. 如果您需要的是不同的按鈕型態或是希望放在不同的位置或是非天空網誌，您將需要修改 javascript 才能達到想要的功能。
2. 沒想到天空部落新版的編輯程式會自動幫您重新編排 HTML TAG 內的屬性，這也導致以上 script 內的程式碼與原始內容不符!! 所有列出的程式都有原始碼的載點，請自行下載確認。
3. 天空部落新增的「自動儲存」功能實在是太方便了，一邊寫、自動儲存，就可以立即看，比預覽還方便

---

2008-11-01 增訂
感謝RRobiKing使用及測試，原本的程式無法適用於其他版型，我原本以為，同樣都是天空部落，不是都用相同的 CSS 架構嗎?! 看了RRobiKing的網頁內容才發現... 還真是大不同
以下測試讓另一版型以及日記(daily diary)也可以適用。

// 說明請參考 http://blog.yam.com/dllee/article/17641242
var needAddBtn= false;
var onlyOne=false;
// 目前處理網誌及日記的部分
if (document.URL.indexOf("/blog.yam.com/") >= 0 || document.URL.indexOf("/diary.blog.yam.com/") >= 0)	needAddBtn = true;
// 如果網址有 article 表示是在瀏覽單篇文章
if (document.URL.indexOf("/article/") >= 0)	onlyOne = true;

if (needAddBtn)
{
	if (window.addEventListener)
		window.addEventListener('load', addFunP, false);
	else
		window.attachEvent('onload', addFunP);
}

function addFunP()
{
	var CONTENT = document.getElementById("articleBlock");
	var DIVs = CONTENT.getElementsByTagName('div');
	// 取出天空網誌/日記文章的連結的正規表示法
	var pattern = new RegExp("http://.*blog.yam.com/.*/article/[0-9]+", "i");
	var btnStr;
	for (var i in DIVs)
	{
		var x = new String(DIVs[i].className);
		if (x.indexOf("post_titlediv")==0 || x.indexOf("articleTitleDiv")==0)
		{	// 找到文章標題內的連結
			var myUrl = DIVs[i].innerHTML.match(pattern);
			btnStr='<div style="font-size: 0px; float: right; margin-left: 10px;">'
			+'<iframe height="66" frameborder="0" width="60" scrolling="no" marginwidth="0" marginheight="0" src="http://funp.com/tools/buttoniframe.php?url='
			+myUrl[0]+'&s=7"></iframe></div>';
		}
		else if (x.indexOf("post_content")==0 || x.indexOf("articleSummary")==0 || x.indexOf("articleBody")==0)
		{	// 找到文章內容，加入 FunP 按鈕 HTML
			DIVs[i].innerHTML = btnStr + DIVs[i].innerHTML;
			if(onlyOne) break;	// 單篇文章時找到就可以離開了
		}
	}
}

您可以直接下載附件addFunP_yam.js (請按右鍵另存新檔)，安裝方式如前述。
或請參考 RRobiKing 的「網誌文章加funP推推王貼紙－天空部落yam版」有圖文說明喔

後記：
原本以為天空編輯器的自動重新編排 HTML TAG 內的屬性，會導致 script 原始碼顯示上的問題，在今天測試後發現，主要是因為 pre 這個 TAG 還是會處理其內部的文字，只要符合 HTML 的，還是會處理，而導致的顯示異常。在此先向天空小尖兵說聲抱歉。而解決方法，就是在 pre 內的程式碼，要先把 大於 > / 小於< 符號，改用 &gt; / &lt; 的取代後，再放入 pre 內就可以正常顯示原始碼了。 內的程式碼與原始內容不符!! 所有列出的程式都有原始碼的載點，請自行下載確認。