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

知識編

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

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

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

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

記事ページのテンプレートの中にあるコメントアウト、〜の間に、SNSボタン設置用コードを追加します。

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

各種設置方法: Facebook: https://developers.facebook.com/docs/plugins/share-button/#configurator; はてなブックマーク: https://b.hatena.ne.jp/guide/bbutton; X（旧Twitter）: https://publish.twitter.com/?buttonType=TweetButton&widget=Button

SNSのコードは、シェアするURLによって内容が変更されますが、参考としてこのサイト「トフでもできる！テーマ開発講座」のSNSエリアのコードをご紹介します。
このままコピー＆ペーストをして使うとこのサイトをシェアするSNSエリアになってしまうので、ご自身のサイトに設置する際は正しいURLで作成したコードに入れ替えて使用してくださいね。

<ul class="entry-social">
  <!-- Facebook -->
    <li class="entry-social-facebook">
      <div id="fb-root"></div>
      <script async defer crossorigin="anonymous" src="https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v22.0"></script>
      <div class="fb-share-button" data-href="<$mt:CanonicalURL$>" data-layout="button_count" data-size="small"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=<$mt:CanonicalURL$>&src=sdkpreparse" class="fb-xfbml-parse-ignore">シェアする</a></div>
    </li>
  <!-- はてなブックマーク -->    
    <li class="entry-social-hatena">
    <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>
  <!-- X（旧Twitter） -->
    <li class="entry-social-x-twitter">
    <a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-via="movabletypenet" data-show-count="false">Tweet</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
    </li>
</ul>

どのページにも使えるように、リンク先のURLが入っているところは、現在のぺージのURLを表示する<$mt:CanonicalURL$>というMTタグを使っているよ！

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

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

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

<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-via="movabletypenet" data-show-count="false">Tweet</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

date-viaの中にアカウント名があります。
現在はmovabletypenetというアカウント名が入っていますが、ここをconfigで作った変数で設定してあげれば、運用するアカウントが変わってもSNSのコードを触らずに設定の変更ができますね。

まず、記事のアーカイブ・テンプレートの中に、configのモジュール・テンプレートを読み込みます。
configの使い方、読み込みの方法はconfigを使うから確認できます。

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

変数名、x-twitterViaの中に、X（旧Twitter）のアカウントIDを記述します。

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

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

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

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

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

いいね！！！

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

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

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

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

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

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

<mt:If name="socialButtonFacebook">
  <!-- Facebook -->
    <li class="entry-social-facebook">
      <div id="fb-root"></div>
      <script async defer crossorigin="anonymous" src="https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v22.0"></script>
      <div class="fb-share-button" data-href="<$mt:CanonicalURL$>" data-layout="button_count" data-size="small"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=<$mt:CanonicalURL$>&src=sdkpreparse" class="fb-xfbml-parse-ignore">シェアする</a></div>
    </li>
</mt:If>

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

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

次に進む！

前に戻る！

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

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