★★★請勿任意轉載本站的文章及圖片但歡迎網摘及連結並註明網站名稱與網址,
勿全文轉載,彼此尊重,是網路的基本禮儀。


2012年1月21日星期六

利用My Tab幫粉絲專頁做個歡迎頁面,加強宣傳效果


之前有介紹利用FBML來幫自己的粉絲專頁設計一個宣傳歡迎頁面(Welcome Page),但是這個應用工具現在已經沒法再新申請,陸續有許多人來詢問相關的問題,綸太郎目前找到My Tab這個可以在Facebook自訂頁面的應用程式,也是非常好用,跟大家介紹。

雖然網路上也是有其他的應用程式可以達到自訂頁面的效果,有的還有可見即可得的html編輯器讓你的使用更方便,但都只有提供一個頁面的功能,如果要更多自訂頁面,通常是需要付費的,而My Tab則是有5個頁面可利用,雖然還是要利用Html語法來寫,但是簡單的、甚至只有純文字的,我想大家還是可以接受。
My Tab粉絲專頁,按下右手邊的"前往應用程式",即可進入,


或直接到應用程式的頁面,應用程式,按下Get Started,就可以開始,


在下方誰可以在Facebook看到這個應用的動態,選擇"公開",按下"安裝",


這時畫面會跳出你的粉絲專頁,按下同意,例如綸太郎有兩個粉絲專頁,則這兩個都可以利用,


接下來就會秀出你的粉絲專頁,Page List有兩個,旁邊的More Apps,則是給你安裝第二個My Tab、第三個、第四個及第五個,


例如我選擇了"東京封印"這個粉絲專頁,然後將應用程式安裝在上面,按下"install the application on this page"


就會另頁出現以下畫面,按下新增My Tab的按鈕,就會進入你的粉絲專頁,


這時你會發現,塗鴉牆下面多了一行"My Tab"的字樣,這樣就是第一個My Tab自訂頁面完成。


原始的My Tab頁面,是一個說明欄,


這時你可以修改你的內容,有兩種方式進入修改頁面,
第一種:按一下最下方的
"change this content to be your custom landing page."(這是初始建立才會出現),會跑到後台的應用程式頁面,按下My Tab的"前往應用程式",


就會跑到製作頁面的編輯畫面,可以看到上方的工具欄是"Edit Page",製作好了,按下Save即可。


第二種:回到原來的應用程式頁面,(建議使用這個)
進入應用程式畫面
http://apps.facebook.com/revtab
選擇你要製作的粉絲專頁,就會出現以下畫面,按下"Edit Tab Content",


一樣出現如上上圖製作頁面的畫面,寫好了,按下Save即可。


如果要新增更多頁面,則選擇工具欄的"More Apps",可以新增My Tab2,安裝方式跟My Tab一樣流程,其他頁面以次類推,


頁面製作好了,我們就要將My Tab的名稱改成"Welcome",一樣是在粉絲專頁名稱右手邊有個編輯內容,按下後可以進入後台,選擇"應用程式",找到 My Tab的應用程式,按下中間的"編輯設定",改成Welcome,按下儲存及確定即可。


你就可以看到你的塗鴉牆下面有個Welcome的連結,有藍色箭頭小標誌的即是,按下下方的編輯,則可拖曳他的位置,往上一些,拖好位置,按下"完成"即可。


如果想讓還未成為粉絲的朋友,一進專頁就看到這個Welcome頁面,在你寫好頁面後,記得在粉絲專頁名稱右手邊有個編輯內容,按下後可以進入後台,選擇第二項"權限管理",
將"訪客抵達預設頁籤:"改成你自己設的Welcome頁面,這樣一來沒有加入粉絲的進入你的頁面時,第一個看到的就是你的宣傳歡迎頁面。


整個My Tab應用程式的完全安裝,到這裡應該就全部結束。

接下來就是製作頁面內容的部份,如果你會寫html的話就可以開始寫了,以下是簡單的語法,大家可以先實做看看。
<br/>空行
<p>段落文字</p>
<div align="center">文字或段落置中</div>
<strong>粗體文字</strong>
<font color="#C16100">文字顏色</font>
文字顏色及大小一起設定
<font color="#0000FF" size="+2">文字</font>
或是用<h3>文字</h3>,數字越大,顯示的字型越小

可以參考這篇語法該怎麼寫,用FBML工具來製作你的Facebook粉絲歡迎頁面---撰寫篇

如果有時間,再跟大家分享html語法怎麼寫,可以讓畫面顯得更精美,更實用,有興趣製作新的Welcome頁面的朋友可以參考看看。

延伸閱讀:
用FBML工具來製作你的Facebook粉絲歡迎頁面---安裝篇

read more...

2011年10月15日星期六

Blogger推出文章圖片具燈箱效果的功能(Lightbox)

Blogger最新推出的功能,就是讓你的圖片具有Lightbox(燈箱)的效果,能以類似幻燈片的呈現方式來看圖片或是相片,目前是預設的功能,大家可以點點看你的圖片,就會發現和以前展現的方式是不一樣的。

如何設定呢?目前是預設是會自動顯示,如果不想利用此功能,可以自行調整。

進入Blogger後台(新介面),選擇"設定"裡面的"文章和留言",可以看到"在Lightbox中打開圖片",這個選項,預設是"",把它調整""即可。

舊介面,設定→格式→在 Lightbox 中打开图片,選擇"否"

如果發現你的部落格圖片並沒有這項效果,沒關係,到後台上述的功能按下"是"的選項,按下儲存後,多按幾次圖片,多試幾次,就會正常了,燈箱下方還會出現此篇文章的相關圖片列表,對於旅遊類或是美食類的部落格看圖就很方便,大家可以玩看看。

另外提醒一下,似乎是你的圖片是從文章後台直接"新增圖片"的方式上載的,才能發揮這個功能,如果是從Picasa或是Flickr圖庫連結的,就不能展現這個功能,目前測試大概是這樣。

參考來源:
Lightbox update | Blogger Buzz

read more...

2011年10月5日星期三

Blogger最新推出的超炫動態檢視功能(Dynamic Views)


Blogger最近推出了一項全新的部落格檢視功能(Blogger Dynamic Views ),如果之前有使用後台最新介面及利用Google Plus工具朋友,對這種簡潔式且動態顯示的功能,應該是可預期得到的,使用了AJAX, HTML5 and CSS3等技術,讓畫面呈現一種流線性且帶有時尚科技感的動態效果,跟以往靜態的呈現風格有相當大的差異。

如何使用這個功能呢?首先要有兩大條件,
1、你的部落格是設定開放的。
2、你的文章資訊提供需是"完整的" ,也就是RSS輸出是"全文輸出"
這兩個條件都符合,才可利用動態檢視。

全文輸出,後台設定,


如何動態顯示呢?很簡單,只要在你的網址後面加上/view即可
例如 http://01mistery.blogspot.com 變成
http://01mistery.blogspot.com/view

不過這功能目前只能檢視文章,對於測欄邊的小工具是完全無用的,也就是後台的"版面配置"是完全無效的,所以我想目前只適合圖像式的部落格,或是只有圖與文的部落格,也就是影像部落格吧或是簡單的圖文部落格,要裝廣告或是一些Widget、社交工具等按鈕,目前是不行的。

有七種檢視方式,
傳統模式(Classic):將傳統範本稍做變化,展現時代風格


翻卡模式(Flipcard):將相片鋪排遍布整個網頁


雜誌模式(Magazine):清爽、優雅的仿社論式版面配置


下方會有類似格子型的將文章片段列出,

拼貼模式(Mosaic):不同大小圖片和文字的拼貼混排


側欄模式(Sidebar):類似電子郵件收件匣的檢視模式,有一塊閱讀頁面可供快速捲動及瀏覽


快照模式(Snapshot):羅列您所張貼文章的互動式布告板


時間表模式(Timeslide):依張貼時期以水平檢視模式排列您的文章


而以上的模版,利用Flipcard、Magazine、Snapshot、Timeslide,在點選文章標題時,會浮出一個畫面顯示文章的完整內容,就像Ajax顯示圖片一樣。

這個新改變,有些模板,我想是可以讓Blogger的舊文可以有重見天日的一天吧,隨機的點選圖片來看文章,另外使用這個功能也能讓覽人數增加,以前一個人看了好幾篇,還是計數1次,如果利用這種模式,則是Page view就計數一次,可參考動態檢視 Analytics (分析) 說明。

可以參考Blogger提出的影片,


有興趣的朋友可以玩看看,不過建議是新開一個測試部落格來玩,進入後台版面部分,就可以看到有新增了七個範本,選擇套用即可,使用前還是記得備份原來的模版。


以目前的改變來說,綸太郎是覺得不符合很多部落客的要求,但如果你是設計類的或是影像處理方面的作者,我想是很適合你用的,可以表現出高質感的設計風格吧。

參考資料:供讀者使用動態檢視的完整說明 - Blogger說明
Dynamic Views: seven new ways to share your blog with the world--Blogger Buzz

read more...

2011年10月4日星期二

簡單清爽型的Google Plus個人名片貼及動態消息元件


Google Plus漸漸熱門起來,相關的元件也就一個一個被開發出來,今天介紹一個簡潔型的Google Plus widget,只要簡單的設定就可以放在你的部落格上,而且它有提供兩種語法,Java Script及IFrame,適合各種部落格使用,而且同時支援IE、Firefox及Google Chrome。

首先要知道你的Google plus的個人ID,到你的G+頁面,可以看到網址上有一串數字,就是你的Google+ ID



Google Plus個人名片官網:Google Plus Profile Widget - No Spamming
設定部份很簡單,只要填入Google Plus的ID,選擇寬度及顏色,在勾選要不要連結你在Google Plus提供的相關網站即可,Domain可以不要理他。


單純的名片

有網站連結的名片,


Google Plus動態官網:Google Plus Profile Widget -Feed


跟上面一樣,可設定寬度和顏色。

這是相關語法
<iframe src="http://plus.scriptrr.com/feeds/feeds.php?plusid=110839249641048231486&host=plus.scriptrr.com&width=400&links=0&color=343434" frameborder="0" scrolling="no" height="630" width="420"></iframe>


如果你想讓高度短一點,修改語法裡的height="300"或其他數字,然後改scrolling="auto",捲軸從no改成auto,如果要讓橫的沒有捲軸,width="420"要改成440,大概是跟你設定的差距40個px,成果如下圖。


以上兩項設定過後,再將相關程式碼貼上你的部落格就可以完成你自己的Google Plus名片及動態資訊了。

延伸閱讀:
幫自己做個Google Plus的名片貼貼紙吧
在部落格新增Google Plus最新動態的元件

read more...

2011年10月3日星期一

在部落格單篇文章新增Google Plus button的按鈕


應讀者要求來寫Google Plus新社交工具的按鈕吧,其實網路上已經有很多文章,不過還是來寫一下,畢竟Google的Blogger不用這工具,實在是說不過去,尤其最近全面開放後,聽說已經有5000萬人加入了,後勢可期啊。

按鈕的語法,在Google官網已有說明,請參考+1您的網站


覺得哪種格式適合你的部落格,就選那種樣式,綸太郎覺得目前Facebook是主流,所以配合FB按鈕的大小,也是選擇長 (60 像素)的按鈕。

其他的設定都不用管(綸太郎也不曉得那做什麼用),維持原始的狀態,例如剖析,你如果選了"explicit",則按鈕無法顯示。

你可以看見有顯示兩段程式碼,很多人可能就是這裡發生錯誤,不知道要怎樣放程式碼在你的後台Html裡,


官方提供的程式碼如下,
<!-- 請將這組標籤置於 <head> 標籤之後或 </body> 標籤之前。 -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

<!-- 請將這組標籤置於 +1 按鈕該出現的位置。 -->
<g:plusone size="tall"></g:plusone>


進入Blogger 後台,選擇設計→修改Html,然後勾選展開小裝置範本

將第一段程式碼,放在
</head>
之前,像下圖這樣


而重要的就是顯示位置放那裡,就是第二段程式碼,綸太郎的部落格G+的顯示位置是在單篇文章的日期後頭,文章標題之前,如果不熟悉Html架構的自己放可能有些困難,但之前你已經有這些社交按鈕,就找到同樣位置把它插入即可,如果沒有的,仔細看以下的文章。

請參考此圖對照說明,


找到以下這段語法,這是主要文章區(淺綠色那行)
<b:include data='post' name='post'/>
然後在上方幾行部分,就是這段<b:if cond='data:post.isDateStart'>程式碼的上方,新增以下社交工具程式碼

將第二段程式碼, 淺粉紅色的程式碼放上,
<g:plusone size="tall"></g:plusone>
你會發現怎我的程式碼沒有後面的結束語法,例如</g:plusone>,因為Blogger儲存後會自動把這段刪掉,另外我用
<span style='padding-left: 3px; padding-right:3px;'>....第二段程式碼....</span>
這是樣式碼,調整跟左右圖片的距離,如果有需要再加入。

而Google Plus的程式碼前面是Facebook按鈕的語法,後面則是Plurk的語法。

到目前為止,加完後程式碼會在各個頁面出現,例如主頁,或是分類頁面,如果要在單篇文章出現,則前後要用以下程式碼圍起來,就是圖片上淺橘色的部份
<b:if cond='data:blog.pageType == &quot;item&quot;'>
.
...你的程式碼...
.
</b:if>

以上這樣修改就完成了,每個模版的語法可能不盡相同,可以多自己試看看,多操作幾次應該就可成功,記得修改程式碼之前要儲存原有的模板,才不會改壞了,有需要的朋友可以試看看。

read more...