[Blogger] Social Content Locker § 讓訪客按讚、加1或推文後才可看隱藏內容

魏子靖

如果你是一位站長，是否曾經有遇到過你寫了一篇很有價值的文章，或者有些重要的檔案供讀者下載，但總是引不起共鳴，幫忙分享、按讚的、加1的訪客沒有幾個，的確，這樣真的會讓站長感到點的沮喪，畢竟站長也沒有義務要提供這些資訊給他人，沒有功勞也有苦勞嘛，所以大家應該也曾遇到過，有些文章是你要按讚後你才可以看到內容的，無疑的，若內容很吸引人，那麼你的按讚或加1數會大增，但這也容易引起訪客的反感，因為對讀者來說實在不方便，網路上也有很多人在討論怎麼破解這種的情況，問一下Google就有很多答案了(Chrome外掛比較出名的是「Anti-force Like、I don’t like it」)，我在此就不多做說明，因此，這種按讚才能觀看內容的功能到底是好或壞，我覺得應該是看從哪一種角度來切入，撇開這些爭議不談，本文這次要分享的功能就是可以把內容隱藏起來，在「正常」非破解的情況下，需要按讚、加1或推文至Twitter後才能觀看內容的功能，但是這個介面美觀多了，而且還蠻有質感的。

參考資料：How To Create a Social Content Locker in Blogger BlogSpot

網址：實際的效果展示 (建議你實際玩玩看)

【使用教學】

原本是以Blogger為例子，你可以參考原文，也可以直接參考我的說明：

步驟一、請到Blogger後台→「範本」→「編輯HTML」，將以下語法，貼到</head>之前，若你怕CSS檔失效，請自行備份喔

<link href=’https://dl.dropboxusercontent.com/u/137869302/lockercss.css’ rel=’stylesheet’ type=’text/css’/>

步驟二、發文的時候，按照以下的格式來發文，這樣就行囉，但請注意步驟三，需要修改一些你個人的社群網址、ID，這樣才會有用

<article id="default-usage">
<div class="to-lock" style="display: none;">
<!– 從這開始隱藏你的文章內容 (可使用HTML語法)–>
<div style="text-align: center; margin-bottom: 20px;">
<img src="想要隱藏的圖片網址" alt="" style="margin: auto;" />
</div>
<div style="text-align: justify">
想要隱藏的文字
</div>
<!– 文章隱藏結束 –>
</article>
</div><div id="mblunlocker"> </div>
<script type="text/javascript" src="https://dl.dropboxusercontent.com/u/137869302/lockers.js"></script>
<script>
jQuery(document).ready(function ($) {
$("#default-usage .to-lock").socialLock({
text: {
header: "Share it To Unlock This Content",
message: "Yes, this is Social Locker. Just try it, click on one of buttons."
},
style: "ui-social-locker-secrets",
buttons: {
order: ["twitter", "facebook", "google"]
},
// twitter options
twitter: {
url: "http://文章或網站網址",
text: "Upgrade your social buttons to get more social traffic!"
},
// facebook options
facebook: {
url: "http://粉絲團網址",
appId: "Facebook APP ID"
},
google: {
url: "http://文章或網站網址"
}
});
});;;;
</script>

步驟三、上面的語法中，要「紅色」部分置換掉你自己的

  • 想要隱藏的圖片：放上你要隱藏的圖片網址
  • 想要隱藏的文字：放入你要隱藏的文字
  • 文章或網站網址：指定一個要推廣的網址，例如某篇文章、或者你的網站網址
  • 粉絲團名稱：Facebook粉絲團的網址
  • Facebook  APP ID：輸入你的FB粉絲團的ID

一般比較有問題的可能是不知道Facebook粉絲團ID怎麼取得，其實不難，只要由以下的網址來查詢即可：

https://graph.facebook.com/粉絲團名稱

例如我的粉絲團網址：https://www.facebook.com/jinnsblogfans

則用「https://graph.facebook.com/jinnsblogfans」來查詢，查詢的結果大概如下圖所示：

最後，代碼中有一些文字你是可以自行修改的，我已經用「洋紅色」標示出來，有需要的人請自行修改喔，另外有一點要注意，這個Hack我覺得因為CSS的關係，當範本背景色是白色時，其效果是最好的