Follow Meはもう古い!WebサイトやBlogに”Add to Circles!”なGoogle Plus Widgetを貼ろう - 適宜覚書-Fragments

Follow Meはもう古い!WebサイトやBlogに”Add to Circles!”なGoogle Plus Widgetを貼ろう

   

Google Plus Widgetサイト

はじめに

BlogやWebサイトでTwitterのFollow Meを貼っているのをよく見かけます。というよりも無い方が珍しいくらいです(^^;;。貼っておけば、プロフィールや動的な名刺みたいに使えますし、記事に興味を持っている人と接点を作りやすいです。

今回は、これのGoogle+版ということでWebサイトやBlogに”Add to Circles!” なGoogle Plus Widgetを貼る方法について紹介します。

”Add to Circles” Wedgetを貼る方法

  1. 当然ながら、Google+のアカウントとWedgetを貼るWebスペースを所有することが利用前提です。
  2. WebブラウザでGoogle+ Widget :: Google Plus customizable Widget to get in touch with your visitorsを開きます。

    Google Plus Widgetサイト

    Google Plus Widgetサイト

  3. ページ内の左中央程にある「Get widget」をクリックします。

    Get widget

    Get widget

  4. すると、画面下部にSettingとしてWidget作成用フォームが表示されます。
  5. このフォームは、Basic Settings(基本設定)、Main Area Settings(メイン部分設定)、Title Settings(タイトル部分設定)、Text Settings(文字列設定)、Button(ボタン背景色設定)、Button Text(ボタン文字列設定)の6つのタブで切替が出来ます。

    6つのタブで設定フォーム切替

    6つのタブで設定フォーム切替

  6. すぐ設定したいところですが、先にGoogle+IDをGoogle+で入手してください。Google+のプロフィール画面のURLの数字部分です。

    Google+ID

    Google+ID

  7. Basic Settings(基本設定)でGoogle+ID欄があるのでこれを埋めます。

    Google+ IDの入力

    Google+ IDの入力

  8. 必要であればもっと子毎回設定も出来ます。例えばBasic Settings(基本設定)なら、Text Font(フォントの選択)やWidget Width(幅をpixで指定)、Include update feed(チェックボックスをオンだと投稿内容表示)など設定します。
  9. Title Settingsを選択してフォームを変更して、Title Text(タイトルに表示する文字列)を入力しました。見ての通り日本語ですが問題なく通ります。

    タイトルの文字列指定

    タイトルの文字列指定

  10. 入力が終わったら先程「Get widget」のあった場所にある「Get code」をクリックします。

    Get code

    Get code

  11. するとプレビューとコードが表示されます。プレビューが気に入ればそのままコードを自分のWebページ等に貼ればWidgetが貼れます。もし、修正したい場合は再度下部フォームで調整してください。

    プレビューと貼付けコード

    プレビューと貼付けコード

おわりに

今回は、WebサイトやBlogに”Add to Circles!”なGoogle Plus Widgetを貼る方法を紹介しました。この記事がお役にたてると嬉しいです。

適宜覚書-Fragmentsは、筆者が興味をもった様々な情報やネタを筆者が忘れても後で思い出せるよう覚書として公開するBlogです。Google Chrome拡張、Facebook、Google、Twitter、Windows、各種Webアプリなどを扱うことが多いです。この覚書が、もし何かお役立ちになれば幸いです。

 - Google, Webサービス, レビュー , ,