ページを選択

ブログのエントリーに、TwitterのツイートボタンやFacebookのいいね!ボタンがついていると思いますが、自分のブログにもつけたくなったので、早速つけてみました。

備忘録もかねて、「Facebook」「Twitter」「はてなブックマーク」「Google+1」のボタンの設置方法について紹介しますね。

このブログはWordPressで、テーマをelegantthemes を使ってますので、それ前提にお話しますので、WordPressでない人、他のテーマを使っている人は自分のブログのソースに追加をしてくださいね。

 

はてなブックマークボタンの設置

 

以下のサイトにアクセスして、

はてなブックマークボタンの作成・設置について
はてなブックマークボタンの作成と設置のやり方を紹介しているサイト

 

 

 

 

  1. 自分のブログのURLとタイトルを入力
  2. ボタンのタイプを選択
  3. コードをコピーしてブログのエントリのテンプレートの好きな位置に貼付けます

elegantthemesではePanelの「Integration」=>「Add code to the bottom of your posts, before the comments」の欄に貼付けましょう。

 

 

Facebookボタンの設置

 

次に、Facebookのいいね!ボタンですが、以下のサイトでコードを作成できます。

Like Button – Facebook開発者
FacebookのLikeボタンの設置
いいね!ボタンをクリックしたユーザのFacebookのニュースフィードにリンクを送るだけなら、「Step.1」 に自分のブログのURLを入力し、ボタンのスタイルなどを選んで「Get Code」を押すだけです。

コードは2種類に別れていて、1つ目の方はHTMLの<body>タグのすぐ後ろに入れましょう。

elegantthemesでは、epanelがありますので、「Integration」=>  「Add code to the < body > (good for tracking codes such as google analytics)」に入力しましょう。

 

2つ目はePanelの「Integration」=>「Add code to the bottom of your posts, before the comments」の欄にはりつけてください。

 

 

Twitterボタンの設置

 

Twitterボタンには、Twitter公式のボタン設置ページがあります。

 

Twitter / Twitterボタン
Twitter社が用意するツイッターのボタン設置用のページです。

 

 

 

ブログのエントリをツイートしてもらいたい場合には「リンクを共有する」にチェックをつけて、コードを取得しましょう。

同じく、ePanelの「Integration」=>「Add code to the bottom of your posts, before the comments」の欄に貼付けることができます。

 

 

Google+1ボタン

 

最後にGoogle+1ボタンの設置用ページです。

Google +1 ボタン
Google+のボタンを設置するためのページ

 

 

 

「ウェブサイトに +1 ボタンを設置するには、こちらでコードを取得してください。」というリンクがありますので、リンクをクリック後、ボタンの種類などを指定してコードを取得します。

「このタグを +1 ボタンを表示する場所に挿入してください」というのを、ePanelの「Integration」=>「Add code to the bottom of your posts, before the comments」の欄に貼付けます。

また、「この render 呼び出しを適切な位置に挿入してください」の下のコードを、「Integration」=>  「Add code to the < body > (good for tracking codes such as google analytics)」に入力します。

こうしてできたソーシャルボタンはこのエントリーの下にもあるような感じになります。

ぜひご自分のブログにも設置してみてください。

 

[2012.08.20 追記]

この方法だと、ブログ全体に対して「いいね!」やブックマークがされてしまうので、以下の方法をオススメします。

WordPressの記事毎に「はてなブックマーク」「Facebook いいね!」「Twitter」「Google+1」ボタンを簡単に設置する方法