MT5:プラグイン「OpenGraphLike」でソーシャルリンクを付ける。

| コメント(0) | トラックバック(0)

Zenback廃止。
した理由は表示が重いからです。
特に裏じゃなくてページの表でガッチャガチャやっているのが長い。
加えて関連記事の精度が今一つだったこともあります。

廃止してからPV減った。
ソーシャルリンクを付けないままでいるのは拙い。
しかし面倒くさいとほっといたらPVが減りました。
Zenback廃止の影響なのか確証は無いんですが、多分関係していると思いました。 

因みに「ソーシャルボタン」「ソーシャルリンク」「ソーシャルブックマーク」で検索した結果、
ソーシャルボタン:245万件
ソーシャルリンク:3,930万件
ソーシャルブックマーク:190万件
以上の結果になりました。
一番多い「ソーシャルリンク」をタイトルに付けました。 

ネットで検索するとプラグイン「OpenGraphLike」を発見。

参考サイト
・COLORI>MovableTypeにソーシャルボタンを設置するプラグインを導入
https://colo-ri.jp/develop/2012/11/plugin-add-socialbutton-to-movabletype.html
・Googpic.com>MTに、Facebook, Tweet, Google+, はてブなどの色々なボタンを追加するプラグイン 
https://www.goodpic.com/mt/archives2/2011/07/mt-facebook-googleplus-tweet.html

これらを参考に、ソーシャルリンクを再設定することにしました。

1.プラグインを手に入れる。
上記サイトを参考に、以下のページからプラグイン「OpenGraphLike」を取得します。
https://github.com/goodpic/mt-plugin-OpenGraphLike

mt5-sl1.jpg

右にある緑色の「Clone or Download」ボタンを押す。

mt5-sl3.jpg

(Use Git or checkout with SVN using the web URL.は気にしない。)
「Open in Desktop」と「Download ZIP」は好みでどちらかを押す。
今回は後者を選択。

mt5-sl4.jpg

2.MTにアップロード。
ダウンロードしたZIPファイル「mt-plugin-OpenGraphLike-master.zip」を解凍。
FFFTP等で、 mt-plugin-OpenGraphLike-master>Plugins>OpenGraphLikeフォルダ
これを、
MTのpluginsフォルダにアップロード。

mt5-sl5.jpg

MT管理画面の「ツール>プラグイン」に「OpenGraphLike」が追加されます。

mt5-sl6.jpg

クリック>設定。
使用言語:日本語
変更を保存ボタンを押す。

とりあえずこれだけ、他は初期設定のまま。
その他の設定はソーシャルリンクの表示形式等になるので各自で調整して下さい。

3.MTのエントリーテンプレートにタグをを追加。
I.ヘッダー部分の<head>~</head>に<$MTOpenGraphMeta$>タグを追加。
(Tumblrボタンを表示する場合は</body>の前に<$MTTumblrJS$>タグも記述。)

II.<body>~</body>部分のソーシャルリンクを入れたい場所へ以下のタグを記述。
Facebook いいね!ボタン <$MTFaceBookLike$>
Google+ボタン <$MTGooglePlusButton$>
Twitter ツイートボタン <$MTTweetButton$>
Evernoteクリップボタン <$MTEvernoteButton$>
はてなブックマークボタン <$MTHatenaBookmarkButton$$>
Tumblrボタン <$MTTumblrButton$>
mixiチェックボタン <$MTMixiButton$$>(要mixi Check Key、プラグインの設定画面で入力)
Greeいいねボタン <$MTGreeButton$>

3a.実際にはこうやりました。
まずMTの構造というのがあります。
一つのウェブサイト以下に複数のブログが存在します。具体的には、

ウェブサイト:こいさんのアニメーションレビュー
├ブログ:こいさんの放送中アニメの感想
├ブログ:こいさんの漫画・ライトノベルの感想
└ブログ:こいさんのブログ作成記

こうなっていると。
ウェブサイトには当然タグを追加する必要があります。
ブログにはタグを追加するのは1つ「こいさんの放送中アニメの感想」だけにしておき、他のブログはここからインクルードするようにします。
(こうすることで1箇所直せば他のブログにも反映されます) 

ウェブサイトと1ブログに<$MTOpenGraphMeta$>タグを記述。
今回はテンプレートモジュール「HTMLヘッダー」に入れました。

ウェブサイトと1ブログにテンプレートモジュール「ソーシャルリンク」を作成。
ここにソーシャルリンク用のタグを記述します。
ソーシャルリンクを変更(増減、配置転換)する場合は「ソーシャルリンク」を直せばいい形式です。 

ウェブサイトと全ブログに「ソーシャルリンク」インクルード用のタグを記述。
以後の変更はテンプレートモジュール「ソーシャルリンク」を直せば反映されます。

mt5-sl7.jpg

ほぼ初期設定なので配置やサイズや表示スタイルが今ひとつ。
見栄えが悪いので直します。

ウェブサイトと1ブログの「ソーシャルリンク」にCSSを設定。

ウェブサイトと全ブログのスタイルシート「style.css」にスタイルを書き込みます。  

mt5-sl8.jpg

配置はこれで大分良くなりました。

ウェブサイトと1ブログの「プラグイン>設定」でソーシャルリンクのサイズや表示スタイルを直す。
大きさやカウントの有無等は「プラグイン>設定」で治す必要があります。

mt5-sl9.jpg

ガチャガチャ感は多少ある、あとAdsenseが消えたりする。
Twtterが最初文字→画像に変わったり、Google+の表示が遅いですね。
Adsenseが消えるのは今のところ「こいさんの放送中アニメの感想」で見られます。
記事数が多いページだからか、とかくエラーが発生しがちです。
このタグの影響じゃない可能性もあります。

トラックバック(0)

トラックバックURL:
http://koisananime.com/public_html/mt5/mt-tb.cgi/5523

コメントする

ウェブページ

Powered by Movable Type 5.02

アクセスランキング ブログパーツ

ピックアップ

Powered by amaprop.net