2011/11/22

ココログで twitter のツイートボタン、facebook のいいね!ボタン、Google+ の+1ボタンを追加する方法


ココログ(フリー)には、twitter のツイートボタンを追加する機能は標準でついているのですが、facebook のいいね!ボタンと Google+ の +1 ボタンを追加する機能は用意されていません。

ですが、ココログフリーのオプションパックアドバンス、またはココログプロでは上級テンプレートをカスタマイズすることで、いいね!ボタンと +1 ボタンを追加することができます。

twitter のツイートボタン追加

最初に twitter のツイートボタンを追加します。

追加方法は、デザイン >> テンプレートの管理 >> テンプレート名 からテンプレートの設定に入り、表示項目 >> フッターの設定から「Twitter」にチェックを入れ「変更を保存」ボタンをクリックします。そして、閉じた画面でも「変更を保存」ボタンをクリックします。

pic00

pic00_1

 

上級テンプレート変換

現在使用しているテンプレートを上級テンプレートに変換します。

デザイン >> テンプレートの管理から、現在適用しているテンプレートにチェックを入れて、「上級テンプレートへ変換」ボタンをクリックします。

pic01

 

確認画面が表示されるので「変換する」ボタンをクリックします。

pic02

 

上級テンプレートが作成されたので、「適用」リンクをクリック後、「反映」ボタンをクリックしてテンプレートの変更を反映させます。

pic03

pic04

 

通常であればこれで上級テンプレートの適用は終了するはずなのですが、変換機能に不具合があるので、以下のエントリーを参考に不具合を解消します。

facebook のいいね!ボタン追加

いいね!ボタンプラグインコードの取得

facebook の開発者メニューからいいね!ボタンのプラグインコードを取得します。

以下のように、適当な URL を設定(後で変更)し、Send Button のチェックを外し、Width を100に設定して「Get Code」ボタンをクリックします。

pic05

 

プラグインコードが表示されるので「IFRAME」を選択し、テキストエディタに内容をコピーします。

pic06

 

URL部分を赤字のように変更し、いいね!ボタンのプラグインコードは完成です。

<iframe src="//www.facebook.com/plugins/like.php?href=<$MTEntryPermalink$>&amp;send=false&amp;layout=button_count&amp;width=100&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe>

ブログにいいね!ボタンを設置

デザイン >> テンプレートの管理 >> 適用中の上級テンプレート名 >> テンプレートの編集から、バックナンバーテンプレートの「Indivisual Archives」をクリックします。

pic07

するとテンプレートの内容が表示されるので、以下の赤字部分の次の行にいいね!ボタンのプラグインコードを追加して保存します。

<MTWeblogIfExposePostFooterLinks>
<p class="entry-footer-share<MTIfEntryPostFooterLinksAsButtons> entry-footer-share-buttons</MTIfEntryPostFooterLinksAsButtons>">
<$MTEntryPostFooterLinks$>
</p>
</MTWeblogIfExposePostFooterLinks>

pic08

 

同じ要領で、「Category Archives」と「DateBased Archives」も変更します。また、テンプレートの「Main Index Template」も同じように変更します(2ヶ所)。

できあがり

こんな感じでできあがり。

pic10

Google+ の +1 ボタン追加

+1 ボタンのコード取得

以下のサイトから、+1 ボタンのコードを取得します。

以下のようにサイズを「中」、言語を「日本語」、適当な URL(後で変更)を入力し、+1 ボタンのコードを取得します。

pic09

pic11

 

URL部分を赤字のように変更し、+1 ボタンのコードは完成です。

<!-- 次のタグを head 要素内または body 終了タグの直前に貼り付けてください -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
  {lang: 'ja'}
</script>

<!-- 次のタグを +1 ボタンを表示する箇所に貼り付けてください -->
<g:plusone size="medium" href="<$MTEntryPermalink$>"></g:plusone>

ブログに +1ボタンを設置
ブログにスクリプトを設置

デザイン >> テンプレートの管理 >> 適用中の上級テンプレート名 >> テンプレートの編集から、テンプレートの「slidebar2」をクリックします。

pic12

するとサイドバーの内容が表示されるので、一番最後の行に以下のコードを追記し保存します。

<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{lang: 'ja'}
</script>

pic13

ブログに+1ボタンを設置

デザイン >> テンプレートの管理 >> 適用中の上級テンプレート名 >> テンプレートの編集から、バックナンバーテンプレートの「Indivisual Archives」をクリックします。

pic07

するとテンプレートの内容が表示されるので、facebook のいいね!ボタンのプラグインコードの次の行に以下のスクリプトを追加して保存します。

<g:plusone size="medium" href="<$MTEntryPermalink$>"></g:plusone>

pic08

同じ要領で、「Category Archives」と「DateBased Archives」も変更します。また、テンプレートの「Main Index Template」も同じように変更します(2ヶ所)。

できあがり

こんな感じでできあがり。

pic14 

おわりに

有償プランに限られてしまいますが、ココログでもこんな感じで twitter のツイートボタン、facebook のいいね!ボタン、Google+ の+1ボタンを設置することができます。

若干、表示する際のパフォーマンスが落ちた感じがしますが、これは仕方ないですね。


スポンサーリンク


このエントリーをはてなブックマークに追加




Twitter ではブログにはない、いろんな情報を発信しています。


コメント

コメントを書く



プロフィール

  • 名前:fnya
    経歴:
    SE としての経験は15年以上。様々な言語と環境で業務系システム開発を行い、セキュリティ対策などもしていました。現在は趣味SE。

    Twitter では、ブログでは取り上げない情報も公開しています。


    ブログについて

    このブログは、IT、スマートフォン、タブレット、システム開発などに関するさまざまな話題を取り上げたり、雑感などをつづっています。


    >>ブログ詳細
    >>自作ツール
    >>運営サイト
    >>Windows 10 まとめ

    Twitter のフォローはこちらから Facebook ページはこちら Google+ページはこちら RSSフィードのご登録はこちらから