Kaie's Blog: 2007-07

[Blogger Hack] Comment Photo Hack (在Comment處顯示回應者圖片)

　　這個Blogger Hack我已經使用很久了，也是我個人非常喜愛的一個Hack，在我的Kubrick版型中，也有提供之功能!我覺得在回應文章時，同時顯示回應者的圖像是很酷的一件事，看圖片很快就可以辨認出是某某某，同時此iCon也具有特別的意義，像徵著你的Blog Spirit..等同於一個人的網路身份..口桀口桀 (XD..當我在亂講就好...是我個人特別癖好罷了)，當初在找這個Hack的時候，覺得明明Blogger就可以自行提供個人Profile Image的link，很簡單就可以辦到了，沒什麼技術上的問題，但為啥不提供...後來在Google Groupgs有看到，聽說官方的回應是，會有關於安全性方面的問題，所以不提供...至於問題是如何，當然就沒提到囉...

※Demo1: example
※Demo2: 以這篇回應較多的文章來看看吧...

　　因為之前較沒空，所以一直懶得翻譯...並且有不少網友來信問說是如何弄的，所以就直接來篇翻翻教學吧，請往下看吧..

．參考資料來源：
New Comment Photo Hack (Blogger) (新方法，較簡易，底下講解此方法..)
comment photos and highlighting hack (這篇是舊方法)

Step1.首先開啟你的Template(記得要是完整的，也就是到"Edit Html"頁面勾選"Expand Widget Templates")，找到底下的code

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>

在這段code底下插入下面的code

<div style="clear:both">
<dt style="float:left;margin-right:5px;clear:both;" expr:id='"commentphoto" + data:comment.id'></dt>
<!--底下這段，針對IE修正了些小bug-->
<b:if cond='data:comment.authorUrl'>
&lt;script type=&quot;text/javascript&quot;&gt; if(typeof(commentPhotoIds) == &#39;undefined&#39;) var commentPhotoIds = []; commentPhotoIds.push({&#39;id&#39;:&#39;commentphoto<data:comment.id/>&#39;, &#39;url&#39;:&#39;<data:comment.authorUrl/>&#39;});&lt;/script&gt;                
<b:else/>
&lt;script type=&quot;text/javascript&quot;&gt; if(typeof(commentPhotoIds) == &#39;undefined&#39;) var commentPhotoIds = []; commentPhotoIds.push({&#39;id&#39;:&#39;commentphoto<data:comment.id/>&#39;, &#39;url&#39;:&#39;&#39;});&lt;/script&gt;                
</b:if>

Step2.接著往下滾，你會找到一個相對應的</b:loop>，在</b:loop>之前新增底下的code</div>
Step3.在tempalte中，找到</body>，接著將底下這段code貼在</body>上面，底下有maxwidth(限制最大圖像寬度)和defaultimage(若在Profile中沒有圖片時，所使用的預設圖片)參數供你自行調整

<script type='text/javascript'>
//<![CDATA[
  function commentPhotoDo() {
      var tag;
      for(var i = 0; i < commentPhotoIds.length; i++) { 
//上面那行，相較於原文，也作了些小修正了，解決一些怪異的行為
        tag = document.createElement('script');
        tag.type = 'text/javascript';
        tag.src = 'http://scrape.singpolyma.net/avatar.php?maxwidth=70&url='+encodeURIComponent(commentPhotoIds[i].url)+'&id='+encodeURIComponent(commentPhotoIds[i].id)+'&defaultimage='+encodeURIComponent('http://img139.imageshack.us/img139/1011/defaultavatarad7.png');
        document.body.appendChild(tag);
      }//end for var i in commentPhotoIds
  }//end function commentPhotoDo
  if(typeof(commentPhotoIds) != "undefined") commentPhotoDo(); //在首頁不執行此script
//]]>
</script>