次の機能を備えた JavaScript でコンテンツ ロッカーを開発しました。
- SEO (検索エンジン最適化): 検索エンジンがコンテンツを読み取ってインデックスに登録できるようにするため、コンテンツを非表示にします。
- 標準のソーシャル ウィジェット: これらのコンテンツ ロック機能を Facebook、Twitter、Google+、LinkedIn のネイティブ ソース コードに追加します。
- ソフトな動作: 忠実な読者の邪魔をしたくないため、コンテンツのロックが解除されると、ロック解除は Web サイトでブロックされているすべてのコンテンツに影響します。
- ソース コードは JavaScript なので、すべての Web ページに組み込むことができます (jQuery は視覚効果のみに使用します)。
実装は、Cookie を使用する上記のツールの実装に似ています。
コードは次のとおりです。実際の動作や他のソーシャル ウィジェットとの統合を確認したい場合は、
ソーシャル メディアの「いいね」を Web サイトに劇的に増やす方法をご覧ください。
<head>
<script src="contentslocker.js" type="text/javascript"></script>
</head>
<body>
...
<div class="irBodyLocker">
<p>The rest of the article is locked</p>
<p>To continue reading, become our friend pressing one of the buttons</p>
...put here the social widgets
</div>
<div class="irLockedBody" style="display:none;">
...put here the locked contents
</div>
</body>
The IdeaR.ContentsLocker.lockContents function is invoked by the script.
IdeaR.ContentsLocker.lockContents = function ()
{
$(function ()
{
if (IdeaR.ContentsLocker.socialActivity() == true)
{
$('div.irBodyLocker').hide();
$('div.irLockedBody').show();
}
// Add social handlers only if contents are locked
else
$(function ()
{
// Facebook
var exsistingFbAsyncInit = window.fbAsyncInit;
if (exsistingFbAsyncInit == null)
window.fbAsyncInit =
IdeaR.ContentsLocker._subscribeFacebookLike();
else
window.fbAsyncInit = function ()
{
exsistingFbAsyncInit();
IdeaR.ContentsLocker._subscribeFacebookLike();
};
// Twitter
twttr.ready(function (twttr)
{
twttr.events.bind('tweet',
IdeaR.ContentsLocker.ontwitteraction);
twttr.events.bind('follow',
IdeaR.ContentsLocker.ontwitteraction);
});
});
});
};
IdeaR.ContentsLocker.socialActivity = function ()
{
return IdeaR.ContentsLocker._getCookie(
IdeaR.ContentsLocker._socialAction, 'false') == 'true' ? true : false;
};
IdeaR.ContentsLocker._getCookie = function (name, defaultValue)
{
var docCookies = document.cookie.split(";");
for (var i = 0; i < docCookies.length; i++)
{
var equalPos = docCookies[i].indexOf('=');
var currentName = unescape(docCookies[i].substr(0, equalPos));
currentName = currentName.replace(/^\s+|\s+$/g, '');
if (currentName == name)
{
var value = docCookies[i].substr(equalPos + 1);
return unescape(value);
}
}
return defaultValue;
};
IdeaR.ContentsLocker._socialAction = 'SocialAction';
IdeaR.ContentsLocker._subscribeFacebookLike = function ()
{
FB.Event.subscribe('edge.create', function (targetUrl)
{
IdeaR.ContentsLocker.unlockContents();
});
};
IdeaR.ContentsLocker.ontwitteraction = function (intent_event)
{
if (intent_event)
IdeaR.ContentsLocker.unlockContents();
};
IdeaR.ContentsLocker.unlockContents = function ()
{
$('div.irBodyLocker').slideUp(400, function ()
{
$('div.irLockedBody').fadeIn();
});
IdeaR.ContentsLocker.saveSocialAction();
};
IdeaR.ContentsLocker.saveSocialAction = function ()
{
IdeaR.ContentsLocker._setCookie(
IdeaR.ContentsLocker._socialAction, true, 10000);
};
IdeaR.ContentsLocker._setCookie = function (name, value, expirationDays)
{
var cookieString = escape(name) + '=' + escape(value);
if (expirationDays != null)
{
var expirationDate = new Date();
expirationDate.setDate(expirationDate.getDate() + expirationDays);
cookieString += '; expires=' + expirationDate.toUTCString();
}
document.cookie = cookieString;
};