>> 
[FC2ブログ] Twitter フォローボタン と Google +1 ボタン を導入してみました
 >> 
[FC2ブログ] Twitter フォローボタン と Google +1 ボタン を導入してみました

スポンサーサイト

  • このエントリーをはてなブックマークに追加
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

[FC2ブログ] Twitter フォローボタン と Google +1 ボタン を導入してみました

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

[FC2ブログ] Twitter フォローボタン と Google +1 ボタン を導入してみました

風邪をひいた管理人です。


今回は、Twitter公式のフォローボタンGoogle +1 ボタン がリリースされたのでこのブログにも導入しました。
とても簡単に導入できるのでその手順をまとめてみました。


Twitter / フォローボタンGoogle

+1 Button - Google+ Platform — Google Developers https://developers.google.com/+/web/+1button/





Twitter / フォローボタン

Twitter / フォローボタン」は、Twitterからリリースされたブログパーツです。Webサイトなどに設置して「フォローしてね!」ってボタンです。






フォローボタンのコード生成

下記URLからフォローボタンのコードを作成します。


[FC2ブログ] Twitter フォローボタン と Google +1 ボタン を導入してみました

上記の設定を入力すると設置用コードが生成されます。(ボタンをプレビューしながら設定できますよ)

  1. あなたのユーザー名は?
    ユーザー名を入力します(Twitterアカウントが必要です)
  2. 背景に何色を使用しますか?
    : ブルーのボタン、 : グレーのボタン
  3. フォロワ-数を表示しますか?
    フォロワー数を表示します
  4. 言語選択
    ボタンに表示される「Follow」の言語を変更します(日本語もあります)


[FC2ブログ] Twitter フォローボタン と Google +1 ボタン を導入してみました

設定を入力し終えると設置用コードが生成されるので、自分のWebサイトなどに設置して終了です。




フォローボタンのカスタマイズ

Follow Button | Twitter Developers https://dev.twitter.com/docs/follow-button

生成されたコードのアンカータグ(<a>)に上記Webサイトに記載されている特定のパラメーターを入力する事でフォローボタンをカスタマイズできます。



↓テキストは赤色、リンクは緑色にした例です。
<a href="http://twitter.com/shin_Flag" class="twitter-follow-button" data-text-color="FF0000" data-link-color="00CC00" >Follow @shin_Flag</a><script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>



パラメーター一覧
  • Followers count display - フォロワーの表示/非表示 true/false
    例 : data-show-count="false"
  • Button color - ボタンの色 blue/grey
    例 : data-button="grey"
  • Text color - テキストの色
    例 : data-text-color="000000" 黒
  • Link color - リンクの色
    例 : data-link-color="00CC00" 赤
  • Language - ボタンの言語
    例 : data-lang="ja" 日本語
  • Width - ボタンの幅
    例 : data-width="300px"
  • Alignment - 左寄せ/右寄せ
    例 : data-align="right" 右寄せ




Twitter / フォローボタン






Google +1 ボタン

[FC2ブログ] Twitter フォローボタン と Google +1 ボタン を導入してみました

+1 ボタン」とはユーザーが気に入ったコンテンツを Gogole 検索でおすすめできる機能とのこと。
Webサイトに設置すると下記のボタンが表示されます。




Google +1 ボタンのコード生成

+1 ボタン は下記URLで設置コードを生成できます。

+1 Button - Google+ Platform — Google Developers https://developers.google.com/+/web/+1button/




[FC2ブログ] Twitter フォローボタン と Google +1 ボタン を導入してみました

ボタンサイズと言語を設定します。画像下部の赤丸部から詳細設定もできます。



[FC2ブログ] Twitter フォローボタン と Google +1 ボタン を導入してみました

"カウンターの表示" や "+1 の対象とする URL" などの設定が行えます。
上記はFC2ブログ用に生成した時の画像です。FC2ブログでは "+1 の対象とする URL" に各エントリー用のFC2ブログタグを入れないとカウンターが正確に表示されないのでご注意を(<%topentry_link>)



[FC2ブログ] Twitter フォローボタン と Google +1 ボタン を導入してみました

設定を入力し終えると上記のように設置手順と設置用コードが生成されます。設置手順に従って自分のWebサイトなどに設置して終了です。

FC2ブログタグの <> は特殊文字に変換されるので、<%topentry_link> に直してから設置してくださいね。(赤字)

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



[FC2ブログ] Twitter フォローボタン と Google +1 ボタン を導入してみました

ちなみにWebサイトに設置してある「+1 ボタン」をクリックすると自分のGoogleアカウントのプロフィール内の "+1 タブ" に表示されるので、+1 ボタン をクリックしておけばブックマークし忘れていても確認できますね。設置されてある場合ですけど




Google +1 ボタン

関連記事
-1 comments
yutakarlson URL [edit] 2011.06.03

ブログ名:「Funny Restaurant 犬とレストランとイタリア料理」

こんにちは。私は、ブログを公開すれば、自動的にtwitter、facebookやbuzzに公開されたり、あるいは、YouTubeで動画をみていて好みの動画を見ていて、それを、お気に入りに登録すると、それが、自動的にtwitter、facebook、buzzに公開されるようにしています。「+1」は、こうしたことの延長線上にあるものと位置づけられると思っています。確かに、ソーシャル・メディアなどを活用して、いろいろい書き込むというより、ブログの場合は、アクセスしてくれる人すべてが対象ということで、範囲が広いですし、それだけだと今度は身内の人ととはあまりかかわりがないということになりますが、「+1」は、これを橋渡しし、さらに多くの人に広範囲に情報を提供できるメディアになる可能性が高いです。詳細は、是非私のブログを御覧になってください。ブログに、さっそく、+1、を設置しましたので、是非、クリックをお願いします。

管理者にだけ表示を許可する
-0 trackbacks