顯示具有 blogger 標籤的文章。 顯示所有文章
顯示具有 blogger 標籤的文章。 顯示所有文章

2011-05-02

Published 星期一, 5月 02, 2011 by with 0 comment

幫 Blogger 加上 Facebook Send 按鈕



最近 Facebook 推出的「民調問答」功能開始發燒，個人認為這個功能勢必對於社群經營/銷售帶來衝擊。今天和大家分享的是前陣子臉書針對「讚」按鈕，推出了更客製化的兄弟「Send(傳送)」按鈕。

Facebook 無庸置疑是虛實整合最強大的社群網站，但是「讚」按鈕有一個缺點就是全域分享，一旦你在某個網頁或是連結上按「讚」，你所有的朋友都可以看的到。Facebook 進一步考量到按「讚」的本質意義，那就是「分享！」。

而分享的本質就牽涉到彼此的同質性，簡單來說，有些東西你分享給某些人是有意義的；但是分享給另一群人就沒有太大的意義了。所以，臉書推出了一個新的按鈕：「Send(傳送)」按鈕，讓你在分享的同時可以指定特定的 群組/朋友，此一功能更是大幅提高了 Facebook 的群組能力！

那麼，該怎麼把原本 Blogger 當中的「讚」按鈕，增加上「Send(傳送)」按鈕呢？

1. 首先來到 Blogger 的後台，選擇 Design -> Edit HTML，並把 Expand Widget Templates 勾選起來。

2. 利用 Ctrl+F 找到 <data:post.body/> 的位置。

3. 在上述位置的「前方」加上以下代碼：



其中有一些參數可以自定，更詳細的參數說明可以參照 How to add Facebook Send button to every post | Blogger Sentral。

... ...
Read More

, ,

      edit

2010-08-13

Published 星期五, 8月 13, 2010 by with 7 comments

使用不含 javascript 的 twitter button - blogger



今天 twitter 推出了官方的 twitter button (推文按鈕)，就像是 facebook 的讚按鈕一樣，無疑是想要收集更多的使用者資訊和擴展服務的普及性。官方的 button 相當簡單，只要選擇樣式，然後插入 javescript 就大功告成。

Digital Inspriation 上面則分享了不需要使用 javescript 使用 tweet this 文字連結的方式，我覺得也很實用，在這邊和大家分享！

如果是使用 Wordpress 平台，可以在你想要加入分享按鈕的地方加入以下的 code:

<a href="http://twitter.com/share?url=<?php echo urlencode(the_permalink()); ?>&amp;text=<?php echo urlencode(the_title()); ?>&amp;via=blogaccount&amp;related=myaccount">Tweet this</a>


如果是使用 Blogger 平台的話，則加入以下的 code:

<a expr:href='"http://twitter.com/share?text="   data:post.title   "&amp;url="   data:post.url   "&amp;via=blogaccount&amp;related=myaccount"'>Tweet this!</a>


其中要修改兩個參數，1. blogaccount: 代表分享內容前面回自動加上的前綴字，你可以打上你的網誌名稱，例：Browny Walking。2. myaccount: 代表你的 twitter 帳號，會後綴在分享內容尾端，例：@brownylin。

有興趣的朋友不妨將自己的網誌佈署上 twitter button 吧！

......
Read More

, ,

      edit

2010-08-05

Published 星期四, 8月 05, 2010 by with 1 comment

Blogger 上安裝 Syntax Highlighter

syntaxHighlighter.jpg

網頁設計師或者程式設計師經常會利用部落格記錄下程式碼，那麼怎麼樣可以讓程式碼和文章一目了然有所區隔呢？這時候就需要 "語法高亮度" 這個外掛，此外掛定義了一個 HTML 標籤，之後只要將程式碼放在這個標籤內，就可以呈現高亮度區塊性的顯示。

安裝這個外掛的方式很簡單，首先你需要 下載 需要用到的 javascript 和 css 檔案，其中必要的檔案為 shCore.css, shThemeDefault.css, shCore.js 這三個檔案；然後是你希望支援的程式語言，例：你希望支援 C++ 語言的話，就需要加入 shBrushCpp.js (支援語言列表在此)。

syntaxHighlighter01.jpg

找到需要的檔案之後，需要一個像是 server 的地方來存放他們，可以利用 google site 的檔案上傳，將這些檔案存放在 google site 的路徑之下。然後你就可以得到每個檔案的位址 (在Download連結上方按右鍵選擇 "複製連結網址")，得到的網址大概像是這樣 http://sites.google.com/site/scripthost123/shCore.js (?後面的網址可以去掉)，有了這些檔案位址以後，接下來就要修改 blogger 範本。

進入 Blogger ，選取 Design 然後 Edit HTML，在下面的 HTML 碼中找到 <head> 標籤，然後貼上下方的程式碼。 


<link rel="stylesheet" type="text/css" href="http://sites.google.com/site/scripthost123/shCore.css" />
<link rel="stylesheet" type="text/css" href="http://sites.google.com/site/scripthost123/shThemeDefault.css" />

<script src='http://sites.google.com/site/scripthost123/shCore.js' type='text/javascript'/>
<script src='http://sites.google.com/site/scripthost123/shBrushCpp.js' type='text/javascript'/>
<script src='http://sites.google.com/site/scripthost123/shBrushCSharp.js' type='text/javascript'/>

<script type='text/javascript'>
SyntaxHighlighter.all()
</script>

最後，在張貼程式碼的時候，記得在程式碼的外圍加上 <pre> 標籤，就能夠高亮度顯示囉，如下圖! 附註：程式碼可以先經過 Postable 處理過後在放到 <pre> 標籤當中，比較不會出錯。 

<pre class="brush: cpp">
    程式碼貼此處
</pre>

參考文章：How to Add Syntax Highlighter for Blogger

......
Read More

, ,

      edit

2010-07-21

Published 星期三, 7月 21, 2010 by with 6 comments

Blogger 推出無腦安裝 share button 啦！

bloggerShareButton.jpg

Blogger 是一個免費的部落格平台，讓你無需自行架設伺服器以及安裝一些外掛的繁瑣程序。也因為方便所以客製化的能力有限，不過一直都在緩慢的成長中。這個看似平凡在許多其他 blog 平台都有的社群網站分享按鈕，在今天終於現身 blogger 了。

難道簡樸明瞭是 Blogger 擁抱的風格，就連 share button 也沒有太多選項，就是要用和不要用而已，還在怨嘆要幫 blogger 加一些分享按鈕很麻煩的朋友有福了，趕緊把這個勾勾打上吧！

……

Read More

      edit

2010-04-23

Published 星期五, 4月 23, 2010 by with 11 comments

幫 Blog 換上新版的 facebook "Like" 按鈕

就在昨天 facebook 舉辦的高峰會議 f8 當中，facebook 挾著社群網路使用者的優勢，向世人宣示其更進一步滲透網路的決心！於是其推出一系列的 Social Plugins 讓網站主可以更容易的和 Facebook 做連結。

也就是說，facebook 希望打造一個社群遍佈的網路環境，不論你瀏覽到哪個網頁、觀看哪一個部落格、到哪一個購物網站購物，一切網路行為都將與社群有所牽連，例如：你可以在觀賞部落格的同時，看到有哪些人在某篇文章當中說 "讚"，於是乎你就可以點到他的 profile，或許也可跟他交個朋友。又例如，你在某個購物網站買了一雙鞋，由於該購物網站是採用 facebook connect 作為他的登入系統，於是網站可以取得你的好友資訊，進而向你的朋友推薦一些你已購買的類似產品...可以想見的應用不勝枚舉！

當然，自己的 blog 也不能錯過這個行銷的機會，以下就分享如何在 blogger 系統下的每篇文章中，都加入新版的 like button (說讚按鈕)，作法很簡單，將以下的 code 插入你想要按鈕出現的地方，我的話是放在 <data:post.body/> 的下方！

<script>
document.write(&#39;&lt;iframe src=&quot;http://www.facebook.com/plugins/like.php?href=<data:post.url/>&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;font=verdana&amp;colorscheme=light&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; allowTransparency=&quot;true&quot; style=&quot;border:none; overflow:hidden; width:450px; height:65px&quot;&gt;&lt;/iframe&gt;&#39;);
</script>

加上這個按鈕以後，如果瀏覽你的部落格的訪客已經有登入到 facebook 的話，就可以直接說讚，若否，則會跳出一個登入視窗。一旦他按下 "讚"，這則消息則會張貼到該訪客的塗鴉牆，等於進一步的幫你的部落格宣傳，如下圖：

      

此外還可以透過 精準行銷，來觀察訪客和網站的互動關係，甚至是訪客和商品之間的互動關係，詳細的方法可以參閱 Add Facebook Plugins to your Blog – Quick Guide 的介紹！

......
Read More

,

      edit

2010-02-12

Published 星期五, 2月 12, 2010 by with 0 comment

為 blogger 添加 google buzz 推文按鈕 - button

Google Buzz Download Icons.jpg

最近最火熱的話題應該非 Google Buzz 莫屬了，但是它的出現並沒有帶給我很大的驚奇，主要是因為以 Gmail 的聯絡人做為預設的 follower 實在沒有太大意義。

因為 Gmail 聯絡人並不一定代表多熟的朋友，整體的介面看起來，說簡單沒有比 Twitter 簡單，說複雜也沒有 Facebook 複雜，目前我還摸不著頭緒該怎麼使用它。不過，就分享的概念來看，Google 整合了自家的 Reader, Youtube 甚至 Map 等等服務進 Buzz 當中，那麼它的威力就不可小覷了。

所以也放上一個 Google Buzz 的推文按鈕在自己的部落格上吧，以下為語法:

<a expr:href='"http://www.google.com/reader/link?url="+ data:post.url + "&amp;title=" + data:post.title + "&amp;srcURL=部落格網址"' rel='nofollow external' target='_blank'><img alt='' src='按鈕圖片url'/></a>

進入Blogger主控台，選擇 Layout –> Edit HTML –> 勾選 Expand Widget Templates，然後搜尋 <data:post.body/> 在他之前加上以上語法即可。

到底 Google Buzz 會不會是 Twitter 或者 Facebook 殺手呢，我覺得應該不會! 想要知道更多的細節請參考: http://techcrunch.com/2010/02/09/google-buzz-event/

需要按鈕 icon 可以參考: http://www.chethstudios.net/2010/02/google-buzz-social-icons-for-bloggers.html

Wordpress 的做法可以參考: http://www.tricksdaddy.com/2010/02/add-google-buzz-button-to-wordpress-blog.html

Read More

, ,

      edit

2009-10-11

Published 星期日, 10月 11, 2009 by with 5 comments

在 Blogger 放置 facebook 推文按鈕

fb_share01.jpg
如何在 Blogger 放置臉書推文按鈕，方便訪客直接分享到他的臉書頁面呢？前陣子採用了 jas9 分享的 fbShare.me，不過如果直接放置該 script 在 <data:post.body/> 之前，點擊之後無法針對每一篇文章進行分享，導致點擊首頁的每個按鈕，分享的都是同一個首頁網址，因此需要修改 script 中的 url 部份！

fbShare.me 有提供 url 欄位可以修改，所以只要複製他提供的範例，然後將 url 的部份改成 <data:post.url/> 就可以針對特定文章進行分享了，整體的 code 看起來像是下面這樣：
<script>var fbShare = {
url: &#39;<data:post.url/>&#39;}
</script>
<script src='http://widgets.fbshare.me/files/fbshare.js'/>
放在 <data:post.body /> 之前，此外如果希望按鈕可以顯示在文章的右上角的話，可以在 blogger 的 CSS 範本中加入以下設定：
.wdt_button {
padding: 10px 0 0 10px;
float :right;
}
然後將按鈕的程式碼改成如下：

<div class='wdt_button'>

<script>var fbShare = {
url: &#39;<data:post.url/>&#39;}
</script>
<script src='http://widgets.fbshare.me/files/fbshare.js'/>

</div>
Read More

,

      edit
訂閱： 文章 (Atom)