Tumblrtwitter、facebook、google+1、evernote、tumblr、はてブ、mixiなど、各ソーシャルメディアやブックマークに共有するボタン設置方法をまとめてみました。[...]twitter、facebook、google+1、evernote、tumblr、はてブ、mixiなど、各ソーシャルメディアやブックマークに共有するボタン設置方法をまとめてみました。このブログはwordpressで構築しているのでプラグインを使用すれば簡単なのですが、他サイトなどにも使うことを想定した設置方法です。下記リンク先でツイートボタンのソースコードが取得できます。ツイートボタンボタンボタンの種類を選びます。ツイート内テキストツイートに含まれるテキストを選択します。ボタンが表示されるページのタイトルか任意のテキストを入力します。URLツイートに初期表示するURLを設定します。ボタンが表示されるページのURLか任意のURLを入力します。言語選択ボタンに表示されるテキストの言語を選択します。1.ユーザーアカウント1このユーザー名はツイート内にvia○○として表示されます。2.ユーザーアカウント2関連するユーザーのアカウントと説明を入力します。ユーザーアカウント1を入れると上記の様に表示されます。ユーザーアカウント2を入力するとツイート後に上記の様に表示されます。2.設置コードが生成されるのでコピーし、サイトのHTMLの好きな場所に張り付けます。いいねボタン正確な情報を発信したいのでOPGの設定まで行います。付加する記述方法のことです。IT戦記また、OGPを設置した効果は下記サイトが参考になります。<遂に公開>SEOの2倍のアクセスを稼ぐFacebook活用術。ラボ/Facebook・twitterの企業利用法についての研究機関1.アプリIDを取得OGPの設定に必要なアプリIDを取得します。下記リンク先よりアプリケーションの作成をします。適当なアプリケーション名を入力し、利用規約に同意してアプリケーションを作成します。Site」を選択します。いいねボタンを設置するサイトのURLとドメインを入力し変更を保存をクリックします。この画面に記載されてるアプリIDを後ほど使用します。※アプリIDを忘れた場合はアプリページで確認できます。下記リンク先よりいいねボタンソースコードを取得します。LikeいいねさせたいサイトのURLを入力します。デフォルトでは現在のページのURLを取得します。Styleレイアウト選択[standard]テキストをボタンの右に表示し、友だちの写真を下に表示します。最小の幅は225px、デフォルト幅は450px。写真なしの高さは35px、写真がある場合の高さは80px。[box_count]いいねを押された合計数をいいねボタンの上に表示します。最小幅は55px、デフォルトの幅は55px。[button_count]いいねを押された数をボタンの右側に表示します。最小幅は90px、デフォルト幅は90px。Widthボタンの幅を指定します。ボタンのレイアウトを参考に決めると良いでしょう。Facesボタンの下にプロフィール写真を表示させるか選択します。display表示させたい言葉を選びます。”いいね”も”お勧め”もボタンを押した時の挙動は同じです。Scheme色見を選択します。Fontフォントを選択します。Codeをクリックしてソースコードを取得します。3.いいねボタン設置ソースコードをいいねボタンを設置したい箇所に貼り付けます。“like”表記はコードを貼ってあるページの言語を判定して、自動的に“いいね”と表示されます。それでも日本語表示されない場合は、ソースコード内のsrc="http://connect.facebook.net/en_US/all.jsをsrc="http://connect.facebook.net/ja_JP/all.jsに書き換えると“いいね”で表示されます。Graphタグのソースコードを取得します。Facebook開発者Titleページのタイトルを入力します。Typeどんな内容のページか選択します。URLページのURLを入力します。ここでのURLはいいねボタンで設定したURLより優先されます。Imageサイト画像のURLを入力します。50px×50pxがベスト。横:縦=3:1まで可能です。nameサイト名を入力します。AdminfacebookユーザーIDを入力します。ユーザーIDが分からない方は下記リンク先で調べることができます。Codeでソースを取得します。取得したソースに少し手を加えます。このソースには「og:description」が無いので設定を追加します。/>下記のようなOGPソースコードになりますので、これらのソースを内に貼り付けます。/>また、html要素に以下の2要素を追加します。xmlns:og=”http://ogp.me/ns#”xmlns:fb=”http://www.facebook.com/2008/fbml”6.検証URLリンターを使用してOGPが正しく設置されたか調べます。Facebook開発者ページのURLを入力してLintをクリックします。エラーが出ず、情報が正しく表示されてれば設置は成功です。備考:wordpressのプラグインwordpressを使用している場合はOGP設置プラグインを使用すると簡単です。Pro」というプラグインを使ってます。下記リンク先からgoogle+ボタンソースコードを取得します。ボタンサイズボタンサイズを選択します。言語+1ボタンを設置するサイトの言語を選択します。カウンターを表示+1ボタンを押された数を表示します。表示するタイミング+1ボタンを表示するタイミングを選択します。通常はデフォルトです。コールバック関数+1ボタンが押された時に呼び出す関数を指定します。+1ボタンの対象とするURLページのURLを入力します。空白の場合はそのページのURLを自動取得します。生成されたコードを、サイトに貼り付けます。ボタンを設置したいところに貼付けるコードと、head要素内に貼付けるコードの2種あります。下記リンク先からソースコードを取得します。Corporationボタンの種類を選びますクリップ対象となるHTML要素のIDを指定します。ここで指定した部分だけがクリップされます。id="content">内に書いてあるのでcontentと入れます。空白の場合はページ全体がクリップされます。Webサイト名サイト名を入れます。空白の場合はドメイン名となります。Evernote紹介コードアフィリエイトコードを入れます。アフィリエイトコードについては下記サイトが参考になります。tottoのライフログ(仮)候補となる保存先のノートブックお勧めの保存するノートプック名を入力します。既存に無いノートブック名の場合は新規で作成されます。候補とのなるノートタイトルお勧めのノート名を入力します。空白の場合はページのタイトルになります。URLクリップするページのURLを入力します。空白の場合は現在のページのURLを使用します。お勧めのタグを入力します。生成されたソースコードを、ページ内のボタンを設置したい部分に貼り付けます。備考:wordpressの場合WordPress用のプラグインが用意されてます。下記のコードを直前に追加します。下記リンク先からソースコードを取得します。Tumblrボタンボタンの種類を選択します。共有される形式コンテンツがTumblrに共有される形式をリンク、引用、エンベッドビデオ、写真の中から選択します。プログラミング言語プログラミング言語を選択します。生成されたソースコードをサイトに貼り付けます。備考:wordpressの場合head要素に同様のjavascriptを設置して、ボタンを設置した箇所に下記のコードを貼り付けます。下記リンク先からソースコードを取得します。タイトルを入力します。はてなブックマークボタンのタイプを選択します。生成されたコードを設置したい部分に貼り付けます。下記のソースコードで設置できます。下記リンク先からDeveloper登録をします。下記リンク先からmixiチェックキーを取得します。Plugin」にアクセスし、左メニューから「新規サービス追加」をクリックします。情報を入力して登録します。登録が完了すると、チェックキーが発行されます。下記のソースをボタンを設置したい場所に貼り付けます。src="http://static.mixi.jp/js/share.js"></script>※data-urlとdata-buttonは省略可能。ボタンの種類は以下の通りです。その他詳細な設置方法は下記リンク先をご確認下さい。デベロッパーセンター)備考:OGPmixiチェックはOGPに対応してます。OGPタグについてはfacebookの項を参照して下さい。要素に以下を追加してください。探すとこのような便利な情報が。ここから必要なものを調べて、コードを引っ張りました。あとは表示されているコードをコピペでブログに導入です。WordPressを使っている人は、テンプレートをいじりましょう。このブログでは記事のタイトル付近に導入しました。記事の下にあるTwitterボタンは『zenback』のものです。Spiceこちらを参考にさせていただきました。わかりやすかったです。Spiceサービス作りましたAbout自分で得た情報、学んだことのアウトプットのために始めたblogです。して情報を共有することで少しでもWEB業界に貢献できたらなと思ってます。このblogが誰かの役に立てたら幸いです。内容で間違いなどありましたら指摘頂けると助かります。AuthortooltipHiro東京在住のフリーランスwebデザイナー。TSUKURIBEと言う屋号で活動してます。お問い合せは右のフォームまたはTSUKURIBEのサイトよりお願いします。Formフォームまたはこちらよりお問い合わせください。