このブログでソーシャルメディア対応としてやったこと

このブログでソーシャルメディア対応としてやったこと
記事公開日：2014年03月26日 19:17

category: Web | 文字数：2547 | 読む目安：5分以上

ソーシャルメディアの利用が一般的になってきて数年。
Webサイトの運営でも、いわゆる「ソーシャルメディア対応」なんていう言葉が普通に使われてますよね。

例えば、twitterのツイートボタンを設置したり、Facebookなどで大切になってくるOGP（オープングラフ・プロトコル）を設定したりするのは最低限必要なところかな、と思います。
（LINEに送るってのもありますが...とこの話はまた別の機会にでも。）

このブログでも、公開にあたって一番気にしたのはそこでした。
デザインや機能も大切なんですが、そこは「まず公開することを優先した」感じですね。
思い立ってから公開できるようになるまで2〜3時間だったかな...という感じです。

公開前にやったことは...

ブログテンプレートの一部カスタマイズ（ソーシャルメディア対応など）
CSSなどの一部調整（ホントに少しだけ^^;）
プラグイン2種のインストール（ImageUploadUtility / SetDefaultCategory）

という感じです。

今日はそんな中から、ソーシャルメディアへの対応について何をしたかをご案内します。

まずはTwitterのツイートボタンとFacebookのいいね！ボタンですが...
設置方法やなんかはもう色んな所で説明されてますので省略ってことで（笑）

Twtterの公式サイトでボタンをポチポチしてくと作れたり、Facebookの公式サイトでボタンをポチポチしてくと作れます。

私はここで生成したボタンを個別記事の下の方に付けました。
そこまで読んで「まぁいいんじゃない？」って思ってくれたらシェアみたいな（笑）
こんな感じ（↓）です。

あと、Movable Type標準のコメント機能ではなくて、Facebookのコメントツールを使うことにしました。
モデレーターを設定してコメントがついたらFacebookアカウントに通知が来るようにしたかったんです。
仕事中でもFacebookをブラウザ（タブの1つ）で立ち上げておくことが多いので、通知があるといいかなーって。（注：遊んでいるわけではありません）

コメントモデレーションツールの使い方については省略しますが、こちらが詳しいかな？と思います。

みんなが知らないFacebookコメントの管理機能徹底解説
ブログに設置したFacebookコメント欄。ブログの管理者であれば、通知や非表示などコメントを管理できる機能を利用できるの、知っていましたか?

というわけで、ここまではツールも使えますし、比較的カンタンですね。

モジュールテンプレートでOGPの設定を入れた。

ワタシは今回、モジュールテンプレートの「HTMLヘッダー」の中にOGPに関するmetaを入れました。
プラグインを使う方法もあるかなと思うのですが、個人的にはこっちの方が早かったというか(^^;

モジュールテンプレート側では、挿入されるテンプレートの種類（メインインデックスなのか個別記事なのかなど）に応じて分岐されるように、簡単なMTIfを使いました。（ちなみにワタシ、好きなMTタグは？と聞かれるとMTIfと答えます）

こんな感じ（↓）です。

<mt:if name="main_index">
<mt:ignore>メインページ</mt:ignore>
<meta property="og:title" content="<$MTWebsiteName remove_html=" 1="" />" />
<meta property="og:type" content="blog" />
<meta property="og:url" content="<$MTWebsiteURL$<" />
<meta property="og:site_name" content="www.ni4.jp" />
<meta property="og:image" content="https://www.ni4.jp/ogimage.gif" />
<meta property="og:description" content="<$MTWebsiteDescription convert_breaks=" 0="" words="120" />" />
<meta property="fb:app_id" content="7014305********" />
</mt:if>

上では省略していますが、これを<mt:Else>でつなげてく感じで作ってあります。
あと、個別記事のog:imageだけは、それ用にカスタムフィールド（MTEntryOgimage）を作って、それで設置できるようにしてあります。

テンプレートはこんな感じ（↓）です。

<mt:If tag="EntryOgimage">
<meta property="og:image" content="<mt:entryogimageAsset><mt:AssetURL></mt:entryogimageAsset>" />
<mt:Else>
<meta property="og:image" content="https://www.ni4.jp/ogimage.gif" />
</mt:If>

最初、ブログ本文に入る画像を抽出するようなことも考えたんですが、Facebookのog:imageって推奨サイズがころころ変わる印象があったので、カスタムフィールドだったらその時々に応じて自分で決められるなってことでこちらにしました。

ブログ記事を書くのが自分だから許される範囲かな？という気もしますね（汗）

あと、ブログ記事を投稿した時にTwitterとFacebookに自動投稿するのも入れようかと思ったんですが...それは止めました。
自動投稿って便利なのはいいんですけど、シェアする時に自由にコメントを入れられた方がいいかなーって。

多少手間ではあっても、その方が「なんでシェアしたか」とかが、より伝わりやすいんじゃない？的な感じです。

というわけで、以上がこのブログでのソーシャルメディア対応でしたー。

www.ni4.jp