2008/11/09

[Blogger]新功能 : 加入反應(Reactions )按鈕一窺讀者的想法!




每當有讀者來訪,作者總是會想知道讀者看完文章後的感覺,過去其實有不少此類可讓讀者選星號,表情或是文字表達心情的外掛元件,可見得這功能有大眾市場, 因此 Blogger 日前也將這個可自訂反應(Reactions)的投票功能正式開放.順利的話,只要啟用就能馬上使用,在每一篇文章下都可以投票.


要啟用這功能, 先進入 版面配置 --> 網頁元素 --> 點選 網誌文章網頁元素的編輯.


自然就會看到一項 Reactions : , 在方塊內勾選, 並編輯文字.

逗號 , 分隔想讓讀者選的幾種反應, 如 好玩, 有趣, ., 這樣就行了.


不過,有些人照做後,可能行不通(包括我).

在blogger 官方網頁上有說明, 對於使用classic及已客製化許多的範本, 如果只是勾選這個選項,仍可能無效.

Reactions works with Layouts templates, though if your template is heavily customized, you may have to reset your widget templates for Reactions to appear. If you have a Classic template you will need to switch to Layouts to use Reactions.


一旦碰上這個'沒反應'的結果, 可照下列方式修改看看.

1. 版面配置-->修改 HTML , 打勾 展開小裝置範本


2. 在 <p class='post-footer-line post-footer-line-1'> 這行之後,加入以下程式碼.
<span class='reaction-buttons'>
<b:if cond='data:top.showReactions'>
<table border='0' cellpadding='0' width='100%'>
<tr>
<td align='right' valign='top'>
<span class='reactions-label'>
<data:top.reactionsLabel/>
</span>
</td>
<td><iframe
allowtransparency='true' class='reactions-iframe'
expr:src='data:post.reactionsUrl' frameborder='0' name='reactions'
scrolling='no'/>
</td>
</tr></table>
</b:if>
</span>

如圖.


3. 修改後, 在首頁就可以看到每篇文章下方都會出現 反應選項, 還會顯示目前各選項的票數.





相關文章:

Reactions: easily engage your readers

相關文章 :

33 comments:

Sango 提到...

感謝~

立即來測試...^^

雪特爺 提到...

不好意思,想請問一下
不曉得為什麼加入後,前面(這篇文章讓你覺得)的空白有一大段,不知道能往前面一點嗎?(縮排??)

skyvee 提到...

想改前置語詞的位置,可以調整 td align='right' 將right改成left 或 center

戰地記者 提到...

如果選項太多, 請把 iframe 的 class 拿掉
自訂 width, height

雪特爺 提到...

不好意思,雪特再問一個問題
(這篇文章讓你覺得)前面的空白,已解決
可是後面的選項又和(這篇文章讓你覺得)之間有一個大空白,是否能從語法調整呢?
----------------------------------------------------------------------------
原本示意圖
這篇文章讓你覺得:      口有趣 口無聊
想要改成
這篇文章讓你覺得:口有趣 口無聊

JIANG JIANG 提到...

塞入<b:if cond='data:blog.pageType == &quot;item&quot;'>........</b:if>
ex:

<span class='reaction-buttons'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:top.showReactions'>
<table border='0' cellpadding='0' width='100%'>
<tr>
<td align='left' valign='top'>
<span class='reactions-label'>
<data:top.reactionsLabel/>
</span>
</td>
<td><iframe allowtransparency='true' class='reactions-iframe' expr:src='data:post.reactionsUrl' frameborder='0' name='reactions' scrolling='yes'/>
</td>
</tr></table>
</b:if>
</b:if>
</span>
 

這樣只在單篇文章內顯示唷..
給你參考一下

Skyvee 提到...

謝謝jiang, 這樣首頁就不會出現投票按鈕了.

雪特爺 提到...

首先,雪特先謝謝Jiang Jiang大大的解惑
但雪特試了一下,似乎不行
我想,還是從基本開始吧
先把Blogger的架構了解起吧
QQ

Skyvee 提到...

雪特爺,你的問題是要改 table border='0' cellpadding='0' width='100%' 這行的width,把百分比調小一點( 如80%.) ,應該就會靠近了.

雪特爺 提到...

To Skyvee
好耶~雪特修改成功了
謝謝您^^
看來~雪特的功力還有待加強啊..唉~~

JIANG JIANG 提到...

慢慢來吧 ....

我也是這樣過來的 !

Blogger真是讓人又愛又恨阿 ...

多找找像 skyvee 大大 這樣有hack教學的 獲益良多!

Skyvee 提到...

雪特(這樣稱呼,真的不要緊嗎?),就像JIANG JIANG說的,我當初也是從不熟,到處參考別人的教學,從改版中學習過來的.現在blogger 方面的hack教學資源比以前更多了,很容易就可以找到自己想要的功能了.

雪特爺 提到...

To JIANG JIANG大大
嗯嗯~
謝謝您的告知
謝謝唷!!

To Skyvee大大
OK的~請儘量叫吧!XD
好的~雪特會努力的@@!

℃〃杜西 提到...

感謝阿~

我有一個很嚴重的問題= ="

http://sixteendusyi.blogspot.com/

這是我的~

我弄上去之後,那個字的顏色

剛好一樣耶,不知道從何地方去修改呢~?

(我也是追蹤者=_=+

敖犬 提到...

請問怎麼修改字的顏色呀?
我的背景是黑色, 字又是黑色,
根本看不到.

Skyvee 提到...

字的顏色,請在CSS區 找 post-footer 之類的,修改字型顏色,如 color: #333; 其中333可改成你想要的顏色.

CeLesTine Lee 提到...

谢谢你的教导~
这个困扰我多时的问题终于解决了~

Skyvee 提到...

:) 別客氣.互相交流,學習.

San 提到...

用上了... 真好... 十分感謝大大!

Yapoching 提到...

版主您好
我套用語法之後
成功出現反應選單
但是選單內容只能選取一個
http://yapoching.blogspot.com/
可以麻煩版主幫忙除錯嗎?
謝謝

Skyvee 提到...

Yapoching 您好,

選單內容就是只能單選喔! :)

匿名 提到...

thanks

匿名 提到...

我怎樣弄都弄不到==

Y I [N] G 盈盈 提到...

谢谢~之前弄得我头都大了,帮助很大哟^_^

匿名 提到...

感謝分享:)

Shane Lee 提到...

你好^^謝謝分享!終於把反應按鈕弄出來了

但有個問題就是我把反應跟分享按鈕都放在line-3
它們卻顯示在不同行 反應會掉到分享按鈕下面一行
我想要它們在同一行阿~~~
不知道要怎麼設定才好?一直辜狗弄了好久 都解決不了ˊˋ

這麼久的文章不知你還會不會回~先謝謝喔~^^

Shane Lee 提到...

自己來回一下...後來終於試成功了
只是用很笨的方法, 在不同瀏覽器看不知會不會亂七八糟...

在]]>前加了一段
span.reaction-buttons table {
margin-top: -23px;
}
然後反應跟分享就重疊在同一行, 再去編輯POSTS,
在 "反應:" 前面輸入一堆全形空白鍵
反應按鈕就往後跑接在分享按鈕的後面了....

自己亂試弄出來的
不知有沒有更好的方法?

Shane Lee 提到...

"在]]></b:skin>前"

Skyvee 提到...

Shane,

其實您所用的方法已很簡單了, 不過如果需要去編輯posts 會比較麻煩,要不要考慮在CSS區, 就是在
span.reaction-buttons table {
margin-top: -23px;
}
再加一行 margin-left的設定.
如 margin-left: 160px;

:) 歡迎加入blogger使用群, 我們一起加油吧!

Shane Lee 提到...

對耶加margin-left就好了嘛

不過我後來用adobe的BrowserLab看
在火狐它們還是疊在一起
在chrome就正常

然後我電腦自己開IE看跟adobe截圖給我的又不一樣
真不知道BrowserLab準不準

✖ szє мiи ✖ 提到...

弄不到 blog主还在么?
可以教教我 ?
我弄到 有两个出现耶 ><
怎么解决啊 ?

Skyvee TS 提到...

有兩個出現, 是加了好幾個地方嗎? 其實這個功能, 可以透過 設計的頁面, 在 網頁元素=>網誌文章的元件裡, 設定就可以了.

✖ szє мiи ✖ 提到...

没有吖 照着做 更新就看见2个了
網誌文章的元件 在哪里?

張貼留言

謝謝您願意在此分享心得, 讓文章內容更豐富.