SNSボタンを設置してみよう！　| トフでもできる！？テーマ開発講座

知識編

2 テーマ書き出す読み込む
テーマ書き出す/読み込む

SNSボタンを設置してみよう！

Stylish CorporateのSNSエリア。configでどのボタンを出すか制御しています。

昨今のサイトでは、ページのすみにSNSシェアボタンをおくことが多いですよね。
これもウェブページ、記事テンプレートに組み込んでおきましょう！
１つ作ってモジュール化しておけば、複数設置する場合も簡単ですね♪早速作っていきましょう。

まずは記事ページのテンプレートのSNSエリアに、コードを追加します。

<ul>
  <li>
  <!-- facebook-->
    <iframe src="https://www.facebook.com/....." width="61" height="20" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
  </li>
  <li>
    <!--はてなブックマーク-->
    <a href="http://b.hatena.ne.jp/entry/" class="hatena-bookmark-button" 
    data-hatena-bookmark-layout="basic-counter" title="このエントリーをはてなブックマークに追加">
      <img src="https://b.st-hatena.com/images/entry-button/button-only@2x.png"
       alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" />
    </a>
    <script type="text/javascript" src="https://b.st-hatena.com/js/bookmark_button.js"
     charset="utf-8" async="async">
    </script>
  </li>
  <li>
    <!--twitter-->
    <a href="https://twitter.com/share" class="twitter-share-button" data-via="@movabletypenet" data-lang="ja" data-hashtags="mt:net">
    ツイート
    </a>
    <script>
    !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script', 'twitter-wjs');
    </script>
  </li>
  <li>
  <!--LINE-->
  <div class="line-it-button" style="display: none;" data-type="share-a" data-lang="ja" >
  </div>
  <script src="//scdn.line-apps.com/n/line_it/thirdparty/loader.min.js" async="async" defer="defer" >
  </script>
  </li>
</ul>

例：このサイトのSNSエリアのHTMLです。それぞれのSNSボタンのリンクを書き換えます。

SNSボタンの設置については、各公式サイトをご覧ください。
参考リンクを以下にまとめています。（外部サイトに飛びます。）

各種設置方法: facebook: https://developers.facebook.com/docs/plugins/share-button/#configurator; はてなブックマーク: http://b.hatena.ne.jp/guide/bbutton; twitter: https://about.twitter.com/ja/resources/buttons; LINE: https://media.line.me/howto/ja/

テンプレート化してつかうものだから、特定のリンク先ではなく「このページにリンク」でボタンを生成しようね！

記事の最後に、ボタンが表示されました！
これをモジュール化し、記事やwebページから呼び出しましょう。

アカウントの管理をconfig内で行う

一部のSNSですが、ソースの中にアカウントが記述されているものがあります。
例えばtwitterは、

<a href="https://twitter.com/share" class="twitter-share-button" data-via="movabletypenet" data-lang="ja" data-hashtags="mt:net">ツイート</a>

date-viaの中にアカウント名があります。
このアカウント名をconfigで作った変数で設定してあげれば、運用するアカウントが変わってもテンプレートに触らずに設定の変更ができますね。

まずはconfig側に変数を用意しましょう。

変数名、twitterViaの中に、twitterのアカウントIDを記述します。

<mt:SetVarBlock name="twitterVia">movabletypenet</mt:SetVarBlock>

ソース側は、このように書き換えます。

<a href="https://twitter.com/share" class="twitter-share-button" <mt:If name="twitterVia">data-via="<$mt:Var name='twitterVia'$>"
  </mt:If> data-lang="ja" data-hashtags="mt:net">ツイート</a>

<mt:If name="twitterVia">で、twitterVia内の入力の有無を確認しています。ない場合はこの処理が飛ばされます。

これでconfigからアカウントの設定をすることができました！
実際に動くか試してみましょう！

いいね！！！

表示/非表示をconfig内で行う

上の例では４つのSNSボタンを表示させました。
これを必要に応じて、configから表示/非表示の切り替えができるようにします。
既存のテーマでも、そのような作りになっていることが多いので、仕組みを覚えておきましょう！

config側を以下のように設定します。

<mt:Ignore>ソーシャルボタン: 表示する場合は 1 を、
表示しない場合は 0 を指定してください。</mt:Ignore>
  <mt:SetVarBlock name="socialButtonFacebook">1</mt:SetVarBlock>
  <mt:SetVarBlock name="socialButtonTwitter">1</mt:SetVarBlock>
  <mt:SetVarBlock name="socialButtonHatena">0</mt:SetVarBlock>
  <mt:SetVarBlock name="socialButtonLine">0</mt:SetVarBlock>

それぞれのSNSの名前をつけた変数を用意します。
<mt:SetVarBlock>内の1,0で表示/非表示を切り替える仕組みです。
今回は　Facebook、Twitterを1にして、表示してみましょう。

モジュール側は <mt:If>で振り分けます。

<mt:If name="socialButtonTwitter">
  <li>
  <!-- facebook-->
    <iframe src="https://www.facebook.com/plugins/share_button.php?href=○○○○○&layout=button&size=small&mobile_iframe=true&width=61&height=20&appId" width="61" height="20" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
   </li>
  </mt:If>

例）facebookの例。<mt:If name="モジュール名">でかこんでいます。

これでconfig内から表示/非表示を切り替えることができました！

次に進む！

前に戻る！

サーバー不要の
高速WebCMSサービス

トフでもできる!? Movabletype.netテーマ開発