sns jade mixin

likebox.jade

include _mixin/likebox

block prepend body
  +fb-sdk()

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

mixin_likebox.jade

//-
  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

mixin_sns.jade

//-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.jade

//-hexo snippets
- var postUrl = config.url + post.path;
- var snsTxt = post.title + "|" + config.title;

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

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

+tweet(label, snsTxt, postUrl)

sns_count.jade

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");
    | });

sns_count_api.coffee

###
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'