snsボタンmixin(jade)

jade-mixin

まるで辞書を引くかのようにコードを召喚できる垂涎モンの機能mixin。大抵のテンプレートエンジンに付いているかと思いますが、もちろんjadeにもあります。jadeのmixinはパラメータの設定は勿論、blockでコードを上乗せしたり、attributesで属性値を指定できたりしますのよ。

wordpressのテンプレートエンジンを欲する今日この頃。なんとかjade-phpのmixinでカバーできないものか。githubでmixinを検索してコードを模索しているのですが、知性やら知識やら技術やら色々と追いつかず、なかなか解読できなくて苦労しています。

さて、試しに今回はソーシャルボタンのmixinを記事にしてみます。未熟な頭で作った単調なモノですが、使えなくはないと信じたい。こうやってコードを晒していけば、以前みたいにコメントで改善案を出してくれる親切な人が現れてくれるかも、なんて下心もあります。

sns-mixin

ところでHexoにデフォルトで付いている[highlight.js]がjadeに対応してないのよね、困っちゃうわよね。

_mixin/sns.jadelink gist
//-onClick ウィンドウ位置
- var snsOnclickTop = null;
- var snsOnclickLeft = null;
//-onClick メニューバー有無
- var snsOnclickMenubar = null;
//-onClick ツールバー有無
- var snsOnclickToolbar = 0;
//-onClick アドレスバー有無
- var snsOnclickLocation = null;
//-onClick ステータスバー有無
- var snsOnclickStatus = null;
//-onClick リサイズ 可否
- var snsOnclickResizable = 1;
//-onClick スクロールバー 有無
- var snsOnclickScrollbars = 1;

//-twitter ツイートボタン
mixin tweet(txt, shareTxt, pageUrl)
- var width = 650;
- var height = 470;
a(
class="sns-tweet"
title="ツイートする"
href="http://twitter.com/share?count=horizontal&original_referer=#{pageUrl}&text=【#{shareTxt}】&url=#{pageUrl}"
target="_blank"
onClick="window.open(encodeURI(decodeURI(this.href)), 'tweetwindow', 'width=#{width}, height=#{height}, personalbar=0, toolbar=#{snsOnclickToolbar}, scrollbars=#{snsOnclickScrollbars}, resizable=#{snsOnclickResizeble}'); return false;"
rel="nofollow"
)!= txt

//-twitter フォローボタン
mixin follow(txt, account, pageUrl)
- var width = 650;
- var height = 470;
a(
class="sns-follow"
title="フォローする"
href="https://twitter.com/intent/follow?original_referer=#{pageUrl}&screen_name=#{account}&tw_p=followbutton"
target="_blank"
onClick="window.open(encodeURI(decodeURI(this.href)), 'tweetwindow', 'width=#{width}, height=#{height}, personalbar=0, toolbar=#{snsOnclickToolbar}, scrollbars=#{snsOnclickScrollbars}, resizable=#{snsOnclickResizeble}'); return false;"
rel="nofollow"
)!= txt

//-twitter ハッシュタグ
mixin hashtags(txt, hashtag, pageUrl)
- var width = 650;
- var height = 470;
a(
class="sns-hashtags"
title="ハッシュタグでつぶやく"
href="https://twitter.com/intent/tweet?hashtags=#{hashtag}&original_referer=#{pageUrl}&share_with_retweet=never&tw_p=tweetbutton"
target="_blank"
onClick="window.open(encodeURI(decodeURI(this.href)), 'tweetwindow', 'width=#{width}, height=#{height}, personalbar=0, toolbar=#{snsOnclickToolbar}, scrollbars=#{snsOnclickScrollbars}, resizable=#{snsOnclickResizeble}'); return false;"
rel="nofollow"
)!= txt

//-facebook シェアボタン
mixin share(txt, shareTxt, pageUrl)
- var width = 600;
- var height = 400;
a(
class="sns-share"
title="シェアする"
href="http://www.facebook.com/sharer.php?u=#{pageUrl}&t=【#{shareTxt}】"
target="_blank"
onClick="window.open(encodeURI(decodeURI(this.href)), 'sharewindow', 'width=#{width}, height=#{height}, personalbar=0, toolbar=#{snsOnclickToolbar}, scrollbars=#{snsOnclickScrollbars}, resizable=#{snsOnclickResizeble}'); return false;"
rel="nofollow"
)!= txt

//-googleplus 共有ボタン
mixin google(txt, pageUrl)
- var width = 600;
- var height = 400;
a(
class="sns-google"
title="共有する"
href="https://plus.google.com/share?url=#{pageUrl}"
target="_blank"
onClick="window.open(encodeURI(decodeURI(this.href)), 'pluswindow', 'width=600, height=450, personalbar=0, toolbar=#{snsOnclickToolbar}, scrollbars=#{snsOnclickScrollbars}, resizable=#{snsOnclickResizeble}'); return false;"
rel="nofollow"
)!= txt

//-hatebu ブックマークボタン
mixin hatebu(txt, shareTxt, pageUrl)
- var width = 600;
- var height = 450;
a(
class="sns-hatebu"
title="ブックマーク"
href="http://b.hatena.ne.jp/add?mode=confirm&url=#{pageUrl}&title=【#{shareTxt}】"
target="_blank"
onClick="window.open(encodeURI(decodeURI(this.href)), 'pluswindow', 'width=600, height=450, personalbar=0, toolbar=#{snsOnclickToolbar}, scrollbars=#{snsOnclickScrollbars}, resizable=#{snsOnclickResizeble}'); return false;"
rel="nofollow"
)!= txt
sns.jadelink gist
//-hexo snippets
- var postUrl = config.url + post.path;
- var shareTxt = post.title + "|" + config.title;

+share("シェア", shareTxt, postUrl)

//-icon
- var label = "<i class='myicon'>#{theme.icon.twitter}</i>ツイート"

+tweet(label, snsTxt, postUrl)

さて、いちいち注訳を入れる必要もないかな、小窓に関する設定を変数で入力します。ボタン自体はcssでカスタム、アイコンは擬似要素(before)を使うか、引数にiタグを丸々書き込んでしまうか。パラメーターの命名がぱっとしねーっすね、うーん。txtがaタグの文章、shareTxtがsnsに投稿される文章。

likebox-mixin

いいねボックスは[page plugin]となりましたねぇ。最大横幅が500とか舐めてます。レスポンシブの手段も製作者に投げてますし、使い勝手は悪い。twitterタイムラインはAPIで取得できてデザインが自分で組めるけれどfacebookはできないよね。……できないよね?

mixin_likebox.jadelink gist
//-
facebook likebox (page Plugin)
https://developers.facebook.com/docs/plugins/page-plugin
//- javascript(bodyタグの直後に設置)
mixin fb-sdk()
div#fb-root
script(type="text/javascript").
//facebook sdk
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.async = true;
js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.5";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//- id: urlのID部分
mixin likebox(id, label, likeboxWidth, likeboxHeight)
//- ヘッダー縮小
- var likeboxSmallHeader = "false";
//- コンテナ幅サイズ適応
- var likeboxContainerWidth = "true";
//- ヘッダーの背景写真を隠す
- var likeboxHideCover = "false";
//- 友人のアイコンを表示する
- var likeboxShowFacepile = "false";
//- ポストを表示する
- var likeboxShowPosts = "true";
.fb-page(
data-href="https://www.facebook.com/#{name}"
data-width= likeboxWidth
data-height= likeboxHeight
data-small-header= likeboxSmallHeader
data-adapt-container-width= likeboxContainerWidth
data-hide-cover= likeboxHideCover
data-show-facepile= likeboxShowFacepile
data-show-posts= likeboxShowPosts
)
.fb-xfbml-parse-ignore
blockquote(cite="https://www.facebook.com/#{id}")
a(href="https://www.facebook.com/#{id}")!= label
likebox.jadelink gist
include _mixin/likebox

block prepend body
+fb-sdk()

block content
.likebox
+likebox("StarbucksJapan", "スターバックス", 500, 450)

……どうっすかね、bodyタグの直後にfb-sdkを設置する必要があります。jadeは上書きと挿入、どちらもできるのが良い。

sns-count

最近twitterのカウントAPI廃止になりましたね。愚痴ってばっかりで申し訳ないんですけど、やっぱり「勘弁して」って言いたくなる。――しかし、facebookやはてブは依然としてカウントが取得できます。せっかくなんで、そのコードも晒しときます。

sns-count.coffeelink gist
###
SNS Count
###

socialCountApi = (url, element) ->
#facebook
$.ajax
url: "https://graph.facebook.com/",
dataType: "jsonp",
data:
id: url
success: (rss) ->
$ ".facebook-#{element}"
.text rss.shares || 0
error: ->
$ ".facebook-#{element}"
.text "0"
#twitter
///API廃止により、コメントアウト
$.ajax
url: "http://urls.api.twitter.com/1/urls/count.json?url=" + url
dataType: "jsonp"
data:
url:url
success: (res) ->
$ ".twitter-#{element}"
.text res.count || 0
error: ->
$ ".twitter-#{element}"
.text "0"
///

#hatebu
$.ajax
url: "http://api.b.st-hatena.com/entry.count?callback=?"
dataType: "jsonp"
data:
url: url
success: (res) ->
$ ".hatebu-#{element}"
.text res || 0
error: ->
$ ".hatebu-#{element}"
.text '0'
_mixin/sns.jadelink gist
include _mixin/sns
- var pageUrl = theme.url;
.btn.btn-social
+share("facebook", config.title, pageUrl)
span.facebook-count

block script
script(type="text/javascript")
| //share count
| $(window).on("load", function(){
| socialCountApi("https://www.google.co.jp/", "count");
| });

注意点はURLをフルパスで指定してあげること。第二引数のクラス名にカウントが挿入されます。もしアーカイブページなどで記事ごとにカウントを取得する際はループで記述、またクラス名も記事のID名などを利用して孤立させて下さい。

終わりに

ご覧いただきありがとうございました。こういうjadeの記事ってあんまり見かけないんだけれど、もっと増えないかなって。自分が知らないだけかも分からんけれど、とにかく増えないかなって。