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


如果你是一位站長,是否否經有遇到過你寫了一篇很有價值的文章,或者有些重要的檔案供讀者下載,但總是引不起共鳴,幫忙分享、按讚的、加1的訪客沒有幾個,的確,這樣真的會讓站長感到點的沮喪,畢竟站長也沒有義務要提供這些資訊給他人,沒有功勞也有苦勞嘛,所以大家應該也曾遇到過,有些文章是你要按讚後你才可以看到內容的,無疑的,若內容很吸引人,那麼你的按讚或加1數會大增,但這也容易引起訪客的反感,因為對讀者來說實在不方便,網路上也有很多人在討論怎麼破解這種的情況,問一下Google就有很多答案了(Chrome外掛比較出名的是「Anti-force LikeI 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的關係,當範本背景色是白色時,其效果是最好的