吉米實驗筆記

Blogger 系統要加入 +1 Button 如果你不是使用 2010 年新版的可以使用範本設計工具的版型，那麼你需要加入一些小東西以及一些小修改即可使用。

一、勾選展開小裝置範本，記得備份你的版型先

二、找到 <b:includable id='shareButtons' var='post'> 和 </b:includable> 包的那一堆 code，其實 Google 官方已經幫你加了一個 DummyTag，那就是 +1 Button，會長得像這樣：

<b:if cond='data:top.showDummy'> <div class='goog-inline-block dummy-container'><data:post.dummyTag/></div> </b:if>

三、雖然已經幫你加了那一個 Tag，但並沒有引入

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

你可以把上面那一行加到 </head> 之前的位置，我看了一下用 Blogger 新版版型的裡面，是放在另一個位置，且有 Blogger 內建的語法。

首先找到 <b:if cond='data:top.showStars'>….</b:if>，然後在 </b:if> 後面加入：

<b:if cond='data:top.showDummy'> <data:top.dummyBootstrap/> </b:if>

然後你應該就會看到在官方的 Sharebutton 後面多了一個 +1 Button 了。

關於 Sharebutton 可參考之前寫的跟 Blogger Sharebutton 有關的文章：

Google +1 Button 的官方介紹網站和影片：http://www.google.com/intl/zh-TW/+1/button/

如果需要裝在其他網站或者你不想用官方 Sharebutton 旁邊那一個的話，你可以參考 Google 的文件選用適合大小的 +1 Button 及放在您想放的位置，文件在此：在您的網站中加入 +1 按鈕。

那就請你試按看看囉！

文章分類：Blogger FixTune

2011年6月1日星期三

[Blogger Tune] 回應區分部落格作者及訪客的簡單作法

6/01/2011

就目前查到的可以做出在 Blogger 系統下回覆別人的回應功能的，是 Sean 所寫的這篇：Sean's Blog: 讓Blogger 的「意見回應」可以有「作者回覆」 (最終版)，很久之前有試過，但就是弄不出來，後來我大概想了一下我自己需要的東西，大概是讓我回應的區塊可以跟訪客分別出來就可以，加上我訪客留言的人不算多，我只要能即時回覆看起來其實就蠻像回覆在底下的感覺。所以我就用 CSS 和判斷式土法鍊鋼了一下，以後有時間再來研究 Sean 大所實現的功能。

剛好 Steven 大有問到，所以我就在這裡分享一下我的爛招，大家還是應該要去看 Sean 大那一篇才是王道。

一、勾選展開小裝置範本，記得備份你的版型先

二、加一個作者回應的 DIV CSS：因為我想要我回應的框框內縮一點，不然其實不加也沒關係

#comment-header-me{width:525px;border:1px solid #cccccc;padding:5px 10px 5px 10px;margin:5px 0px 5px 30px;background-color:#eeeeee;-moz-border-radius:8px;-khtml-border-radius:8px;-webkit-border-radius:8px;border-radius:8px;}

三、找到 <b:loop values='data:post.comments' var='comment'>，我是加了一個判斷式 <b:if cond='data:comment.author == data:post.author'>，然後把作者回應要顯示的東西所需要的語法放在那裡面，你可以從原來的語法裡面先複製一份在判斷式裡頭再慢慢改，原來的語法就是接在 <b:else/> 後面。(紅字是加上去的判斷式，粗字是作者回應的區塊。)

<b:loop values='data:post.comments' var='comment'> <b:if cond='data:comment.author == data:post.author'> <div id='comment-header-me'> <div expr:class='"comment-author " + data:comment.authorClass' expr:id='"comment-" + data:comment.anchorName'> <a expr:name='data:comment.anchorName'/> <div id='comment-name-url'> <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidiHOgmSbmXfaD1aMt4XzPnqfSIxtB41iZNcTHSNMkrverRND2FURKdNuIFNeBLjJOGgtLJyZdYj3Ejbj7E7gjZE4DkzyDjGZT3nykI2mjQ7nQ06JgBZXPUOg8O3ogg8GgNtXTjzUvaV1i/s45/n1558631551_185425_2612.jpg'/> <a class='comments-autor-name'>吉米回應》</a> <a class='comment-permalink'><data:comment.timestamp/></a> <b:include data='comment' name='commentDeleteIcon'/> </div> <div id='comment-body'> <b:if cond='data:comment.isDeleted'> <data:comment.body/> <b:else/> <data:comment.body/> </b:if> </div> </div> </div> <b:else/> <div id='comment-header'> <div expr:class='"comment-author " + data:comment.authorClass' expr:id='"comment-" + data:comment.anchorName'> <a expr:name='data:comment.anchorName'/> <b:if cond='data:comment.favicon'> <img expr:src='data:comment.favicon' height='35px' style='margin-bottom:-2px;' width='35px'/> </b:if> <b:if cond='data:blog.enabledCommentProfileImages'> <data:comment.authorAvatarImage/> </b:if> <div id='comment-name-url'>  <div id='countcomment'> <script type='text/javascript'> ShowCommentIndex('<data:post.id/>'); </script> </div> <b:if cond='data:comment.authorUrl'> <a class='comments-autor-name' expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a> <b:else/> <a class='comments-autor-name'><data:comment.author/></a> </b:if> 於 <a class='comment-permalink'><data:comment.timestamp/></a> <a class='says'>留言說：</a> <b:include data='comment' name='commentDeleteIcon'/> </div> <div id='comment-body'> <b:if cond='data:comment.isDeleted'> <data:comment.body/> <b:else/> <data:comment.body/> </b:if> </div> </div> </div> </b:if> </b:loop>

參考參考就好，因為這基本上算是很懶惰的改法。

文章分類：Blogger FixTune

2011年5月6日星期五

[Blogger Tune] 淺談 Blogger 的判斷式以及 PageType 的應用

5/06/2011

這個東西很基本，卻可以做很多事，比如說你想讓某些東西不在首頁出現只在文章頁出現的應用，或者你也可以拿來區別不同 PageType 的 CSS，達到版型改變的效果。

首先，我們先來談現在 Blogger 的 PageType。

因為 Draft.Blogger 現在已經多了可以新增靜態頁面的功能 (類似 WP)，目前最多可以新增 10 個 Page。

StaticPage on Blogger

因此目前有四種 PageType：

index：首頁，包含舊的 Search 以及搜尋 TAG 出現的頁面，還有首頁進行的分頁瀏覽 (較舊的文章、較新的文章)
archive：歷史文章列表
item：文章頁面
static_page：Draft.Blogger 新增的功能－靜態頁面

然後，怎麼用呢？這時我們要用到 Blogger 的 if else 判斷式。

基礎用法

如果 PageType 是 index 則裡頭可以填上你要加的語法，比方你想加的 Button 啦，或是在這個頁面才使用的 CSS 或 Javascript。

<b:if cond='data:blog.pageType == &quot;index&quot;'>
……
</b:if>

進階用法

當是 index 時怎麼樣，然後如果不符合第一個條件怎麼樣。

<b:if cond='data:blog.pageType == &quot;index&quot;'>
……
<b:else/>
……
</b:if>

接下來就請你參考實際使用情況，自由發揮囉。

文章分類：Blogger FixTune

[Blogger Tune] 利用 jQuery Toggle 調整版面元素的顯示與隱藏

5/06/2011

最近才開始認真學 jQuery，目前為止還是只能說懂個皮毛而已，這次利用 toogle() 和 slidetoggle() 讓版面做一些動態調整的設計。

我的版面中央內容區塊如上圖所示：

上方的 Content-wrapper 裡頭包了 Main-wrapper 和 Sidebar-wrapper，底下的 Bottombar-wrapper 是我後來修改了原始版型，加上一大塊的 Bottombar-wrapper，拿來放一大堆 Widget 用的。

文章分類：Blogger FixTune,jQuery

[Blogger Tune] 使用 Blogger 內建的 data:post.thumbnailUrl 以及 data:post.snippet 製作首頁縮圖文章版面，不需要 javascript 的做法

5/06/2011

之前寫的這篇：[Blogger Addon and Fix] PremiumBloggerTemplates 版型縮圖功能小修正，那是用 javascript 產生的首頁縮圖文章版面，最近發現 Blogger 好像多了 data:post.snippet (摘要) 和 data:post.thumbnailUrl (縮圖) 的參數，於是拿來改了一下器材控首頁的版面，成果見上圖。

實做》

一、Blogger 管理後台，設計-->修改 HTML，勾選展開小裝置範本，別忘了先備份版型，以免改爛掉

二、找到 <data:post.body />，替換成底下的 code

<b:if cond='data:blog.pageType == "index"'> <b:if cond='data:post.snippet'> <b:if cond='data:post.thumbnailUrl'> <div class='Image thumb' style='float:left;margin-right:5px;'> <img expr:src='data:post.thumbnailUrl'/> </div> </b:if> <data:post.snippet/> <b:if cond='data:post.hasJumpLink'> <div class='jump-link'> <a expr:href='data:post.url'><data:post.jumpText/></a> </div> </b:if> </b:if> <b:else/> <description style='display:none;'><data:post.snippet/></description> <p><data:post.body/></p> </b:if>

解說》

<b:if cond='data:blog.pageType == "index"'> 只在首頁顯示摘要縮圖的版面

<b:if cond='data:post.snippet'> 當有摘要內容的時候

<b:if cond='data:post.thumbnailUrl'> 當有縮圖的時候

<b:if cond='data:post.hasJumpLink'> jumplink 就是閱讀更多的功能，當你有  Tag 時會出現。

另外，在這篇：[Blogger] 分享到 Facebook 卻發現文字抓錯？，我是使用 <description> Tag 將 <data:post.body /> 包起來，既然發現有 <data:post.snippet /> 摘要的參數，所以就在 <data:post.body /> 上面加一行 <description style='display:none;'><data:post.snippet/></description>，不會顯示，但 FB 抓得到摘要內容。

討論》

有任何問題歡迎回應討論。

文章分類：Blogger FixTune

2011年4月20日星期三

[Blogger Addon and Fix] PremiumBloggerTemplates 版型縮圖功能小修正

4/20/2011

近期我使用了很多從 PremiumBloggerTemplates 網站分享的 Blogger 版型，該網站分享的版型有幾個特點：輪播的特色文章、首頁文章縮圖、DropDown menu，其中首頁文章縮圖原來的程式是設定固定的縮圖大小，除了長形的圖比例會改變以外，有些時候文章裡的圖還比設定的縮圖大小還小時，就會變成放大模糊的圖，最近用 jQuery 加了一段小程式在底下去做判斷，當文章的圖比較小時，那就維持原來的圖的大小顯示。

做法：

首先，PBTemplates 用來產生首頁文章版面的程式：

這裡改的地方，除了只依照設定的寬去改變縮圖的大小 (拿掉了 height=”’+img_thumb_height+’px”) 以外，粉紅字的部份是我加進去的，用來給我寫的小程式處理用的

function createSummaryAndThumb(pID){ var div = document.getElementById(pID); var imgtag = ""; var img = div.getElementsByTagName("img"); var summ = summary_noimg; if(img.length>=1) { imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img id="tnimg" src="'+img[0].src+'" width="'+img_thumb_width+'px"/></span>'; summ = summary_img; } var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>'; div.innerHTML = summary; }

我寫的用來修正小圖被放大的小程式：

接在上面那一段之後會有一個 </script> 的後面，貼上底下的語法

<script> //<![CDATA[ /* for small pics fix by jimmyyen using jQuery */ jQuery(document).ready(function() { jQuery("img[id^=tnimg]").each(function() { var timg = jQuery(this); var newImage = new Image(); newImage.src = timg.attr("src"); if (newImage.width && newImage.width < img_thumb_width) { timg.attr('width', newImage.width); } }); }); //]]> </script>

提供給同樣有使用 PBTemplates 版型的朋友參考。最後我要感謝 PBTemplates 提供許多優秀的版型給 Blogger 的使用者。

文章分類：Blogger Addon,Blogger FixTune

2011年4月5日星期二

[Blogger Tune] Change Blogger ShareButton！一個步驟換掉你的 Blogger 官方分享按鈕！

4/05/2011

想來點變化嗎？官方公版的 ShareButton 雖然乾淨好用，但有時候稍嫌小了點，偶爾也會想換個樣子對吧？

只需要一個步驟，利用 CSS 和一張圖，就可以搞定囉！

前話

先從啟用 ShareButton 談起，如果你的版型沒有官方的 ShareButton 的話，先找找看有沒有這一段

<b:includable id='shareButtons' var='post'> <a class='goog-inline-block share-button sb-email' expr:href='data:post.sharePostUrl + "&target=email"' expr:title='data:top.emailThisMsg' target='_blank'> <span class='share-button-link-text'><data:top.emailThisMsg/></span></a> <a class='goog-inline-block share-button sb-blog' expr:href='data:post.sharePostUrl + "&target=blog"' expr:onclick='"window.open(this.href, \"_blank\", \"height=270,width=475\"); return false;"' expr:title='data:top.blogThisMsg' target='_blank'> <span class='share-button-link-text'><data:top.blogThisMsg/></span></a> <a class='goog-inline-block share-button sb-twitter' expr:href='data:post.sharePostUrl + "&target=twitter"' expr:title='data:top.shareToTwitterMsg' target='_blank'> <span class='share-button-link-text'><data:top.shareToTwitterMsg/></span></a> <a class='goog-inline-block share-button sb-facebook' expr:href='data:post.sharePostUrl + "&target=facebook"' expr:onclick='"window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;"' expr:title='data:top.shareToFacebookMsg' target='_blank'> <span class='share-button-link-text'><data:top.shareToFacebookMsg/></span></a> <a class='goog-inline-block share-button sb-buzz' expr:href='data:post.sharePostUrl + "&target=buzz"' expr:onclick='"window.open(this.href, \"_blank\", \"height=415,width=690\"); return false;"' expr:title='data:top.shareToBuzzMsg' target='_blank'> <span class='share-button-link-text'><data:top.shareToBuzzMsg/></span></a> <b:if cond='data:top.showDummy'> <div class='goog-inline-block dummy-container'><data:post.dummyTag/></div> </b:if> </b:includable>

找到 <data:post.body/>，把 <b:include data='post' name='shareButtons'/> 加上去，理論上就會出現官方的 ShareButton。

實作

貼上這一段 CSS 在 </style> 或者 ]]></b:skin> 之前：

/*sharebutton*/ .share-button{width:30px;height:30px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim8i0oXubFCNOX3zHrahN6jlCne-dfR7c0De6NXJrlhW71LTwOshAGlq5u8IHTKxZwJW3JEcw7MsFvjQGmVsn2oAz_LliT_00cjwM669OAqtOKsgEm1l37cfl3oVQGG0iioqW9J8svFqoH/s800/sharebutton-4.png) no-repeat left !important;overflow:hidden;margin-left:-1px;position:relative} a.sb-email {background-position: 0px 0px !important;} a.sb-blog {background-position: -30px 0px !important;} a.sb-twitter {background-position: -60px 0px !important;} a.sb-facebook {background-position: -90px 0px !important;} a.sb-buzz {background-position: -150px 0px !important; width: 30px;} a.sb-email:hover {background-position: 0px -30px !important;} a.sb-blog:hover {background-position: -30px -30px !important;} a.sb-twitter:hover {background-position: -60px -30px !important;} a.sb-facebook:hover {background-position: -90px -30px !important;} a.sb-buzz:hover {background-position: -150px -30px !important;}

解說一下，官方的按鈕是 20px 的大小，而我做的是 30px 的大小，你也可以自己做圖來改，把上面有底線的那一個圖片連結改掉就可以了。很簡單吧？！簡單就請你按個讚囉！

sharebutton-4

官方的 Sharebutton 整個 bar 的圖寬是 120px，有六個按鈕，其中第五個是沒有出現的 Orkut 按鈕，我照著做了一個寬 180px，六個按鈕的圖。

使用的圖示來源：Double-J Design

文章分類：Blogger FixTune

2011年4月3日星期日

[Blogger][Fix] 分享到 Facebook 卻發現圖抓錯？Facebook Like Button and Open Graph protocol

4/03/2011

Facebook Like Button (讚) 其實也是兼有分享的功能，這點大家應該知道，只是分享的時候不像另一個 Facebook Share Button 可以選擇圖片，如果用 Facebook Like Button 分享的話，圖片和內容都是 Facebook 自己抓的，所以如果你要求分享出去的內容和圖片是適當的話，就必須要設定好 Metadata。

底下就針對 Blogger 的環境做一份簡單的教學，其實所有網站的觀念都是一樣的，必須透過 Open Graph Protocol 來跟 Facebook 做清楚的溝通。

在繼續看之前，如果您還沒有裝 Facebook Like Button，請參考在下之前的教學文章：[Blogger] 淺談 Facebook Social Plugins 的安裝

關鍵的組成，幾個基本的 Metadata：

<meta property="og:title" content="我是標題" /> <meta property="og:type" content="article" /> <meta property="og:url" content="http://jimmyyen.blogspot.com/00030.html" /> <meta property="og:image" content="http://lwww.abc.com/9c.jpg" />

看上面的例子應該很清楚了：

og:title 指的是該網址的標題

og:url 指的是該網址

og:image 指的是該網址指定顯示的圖片，我是用固定式的，其實我想應該也可以寫一個 Script 變成動態指定不同篇不同圖，這個讓高手去玩就好

og:type 我是選用 article，其他型態的指定您可以參考 Facebook Open Graph 文件，拉到底下有一個 Object Type 的專章

所以在 Blogger 底下怎麼做呢？

配合我之前寫的：[Blogger] 淺談 Blogger SEO (Search Engine Optimization)，裡頭第二項 PageTitle 的修改，底下是我目前所使用的：

其實主要只是為了固定圖片的顯示而已，其他的不加好像也不會有問題，只是順便就加進去了，這其中，共用的部份我就加在判斷式之前，然後 fb:admins 和 fb:app_id 這兩個項目就查一下你 Facebook 的 id 以及應用程式的 App_id，不然就不要加，可以參考 Facebook Open Graph 文件。

這段語法加在 <head> 與 </head> 之間即可。

以上供大家參考，並歡迎討論。

補充：

如果還是有問題，記得要在 <html> 的 tag 裡加上：
xmlns:fb='http://www.facebook.com/2008/fbml'
xmlns:og='http://ogp.me/ns#'

如下：

<html xmlns:fb='http://www.facebook.com/2008/fbml' xmlns:og='http://ogp.me/ns#'>

文章分類：Blogger FixTune

[Blogger][Fix] 分享到 Facebook 卻發現文字抓錯？

4/03/2011

因為最近發現 Facebook 按讚之後分享到您的 Profile 上的畫面，會像上圖那樣，會抓標題和摘要內文及圖片，就像按分享的效果一樣，所以，所抓的文字正不正確，大概也會影響朋友去點這篇文章的興趣吧。(以前是只顯示一條文字，內容是誰誰誰說那一個連結讚)

Facebook 的 URL Linter 工具

先介紹 Facebook 的 URL Linter 工具，可以用來 Debug 你分享到 Facebook 上的網址，Facebook 會抓取的內容。

先輸入您文章的網址，按下 Lint 鈕：

這支工具就會依照您的 OpenGraph 設定和網頁上的 META 去擷取資料，讓你檢測抓到的資料對不對。

解決文字抓錯的問題

這篇要談的是抓摘要文字的部份，Facebook 會抓的是第一個 <p></p> 符號之間所置放的文字或者 <description></description> 之間所置放的文字 (實測結果應該是優先抓 <description>)，由於，大家很可能都是抓現成的版型，有些版型會用到 <p> 符號在文章內文之前，那就很有可能抓到夾在該 <p></p> 之間的文字，而不是所想分享的文章的文字，因此最簡單的方法，大概是像底下這樣：

找到 <data:post.body/>，在前後加上 <description></description>，如下：

<description><data:post.body /></description>

然後，這篇所要的抓到正確文字就可以解決了，您可以用 URL Linter 去測試看看就知道。