［メモ］G+とかFBのボタンから共有するとき個別記事の内容を引用させる方法
2012.04.23 Mon ［Edit］
ソーシャルボタンの設置と設定をがんばってみた
（注：今回掲載のタグ類はこのままコピーすると一部全角ですのでご注意ください）
ソーシャルボタン設置で、ちょっと四苦八苦してみました。
以前からzenbackさんを活用してみたり、ちょっと忍者おまとめツールを活用したり、ブログにデフォルトのツイートボタンを設置してみたりとしていましたが、イマイチどれも帯に短したすきに長し、といった感じ。ここはやっぱり、自力で設置したいな、と、不意に思いたち、昨日せっせと設置してみました。
google facebook twitter / Sean MacEntee
というわけで、設置から設定まで、四苦八苦した模様を、お届けいたします。
まずはとにかく設置してみよう
私のやり方の基本は、「分からなかったらググる」、これに付きます。
というわけで、お世話になったサイト様はこちらっ。
横並びにする方法は実は実行していないですが、この記事から各種（Facebook、Twitter、はてブ）の設置方法へと飛べるので、こちらをご紹介。こちらを参考に、せっせと設定。
ポイントは、ＦＣ２の独自タグ。
<%topentry_title>とか、<%topentry_link>とか、そういったタグを、タイトルのところとかＵＲＬに入れることで、その各記事へのリンクができる模様。
あと、Google+もほしいよねってことで、こちらを参考にしました。
素直にやれば大丈夫です。注意点は、各サービスのページで素直に入力するのはいいですが、コード生成されたあとに、ちゃんと確認しましょう。私は”＜”が見事にエンコードされてました。気づかずにそのままいれて「あれー、できないー」なんていってました。すみません、いい加減で。
私くらいかもしれませんが、一応。全角って怖いですね。本当に。
さて、各ページ（今回はFacebookとTwitterとはてブに、Google+）からコードを生成してはりました。出来ました。
じゃあ、実験。ちゃんと共有できるかどうかを試しました。
が、しかし。
共有すると記事の引用ではなくブログの内容紹介がでる
何度もやりました。記事のＵＲＬとタイトルは、先ほど紹介した独自タグページを見てばっちり指定したので、きちんと各記事ごとに違うものが表示されています。が、記事の内容が出ない。ブログの総合タイトルの下にある紹介文が出る。
なんでー？ ボタンの位置が悪いのー？ と、思いました。真剣に思いました。
もうね、わかる方にはものすごく「なんで？」という悩みに見えるでしょうがこんなもんです私。
検索するんだけど、キーワードの選び方が悪いのか上手く行かなくて。まずしっかりHTMLを眺めてみた。もう、ほんと真剣に眺めてみた。
で、もしかして、”Link ref～”が関係あるのか？ と、真剣に考えこんで検索して、でも違って、えええええ、と、悩んでいたとき、ん？ と発見しました！
重要なのは"metaname＝～"の部分だった
発見してみれば、あああああ、と納得出来るんですが、勉強せず場当たりでやってるとこういうことになる。詳しくはこちらのサイト様の紹介が素晴らしいのでご紹介です。
もともと、ＦＣ２ブログは（テンプレートにも寄るでしょうが）＜meta name="description" content="<%introduction>" /＞だけ設定されていることが多い様子。なので、ここをトップページ、各記事ページ、カテゴリページ、日別ページなど、それぞれ個別に設定していく。すると、Google+やFacebookで共有（+1のときの共有やいいね）の時に、その個別記事だったりカテゴリだったりの要約を設定することができるらしい。
ちなみに、重要な独自タグは<%topentry_discription>。＜!--topentry--> ～ ＜!--/topentry-->の間に挟んで使います。200文字の記事の要約を作ってくれるタグになります。各個別記事を共有した際に、とっても重要になってくる部分かと。
＜!--permanent_area-->
＜meta name="description" content="<%topentry_discription>" /＞
＜!--/permanent_area--＞
これが重要だったのです。（注意：このままコピーすると一部全角ですのでご注意ください）
ちなみに通常の＜meta name="description" content="<%introduction>" /＞も、できれば、インデックスエリアにだけ表示される変数、＜!--index_area--＞ ～ ＜!--/index_area--＞で囲むとなお良いかと思われます。他にも、上記で紹介したサイト様には、カテゴリ別の場合など丁寧に紹介して下さってますので、興味がおありでしたら、ぜひそちらを御覧くださいませ。とても私は勉強になりました。ありがとうございます。
というわけで、無事設置成功
なにはともあれ、よかったよかった。
まぁ、よく見たらなんかブログ村ランキングが混ざってたりＦＣ２拍手が混ざってたり、よく見かけるEvernoteはなかったりしますが、Evernoteに関しては、活用してる人はほぼ大半が自分が使いやすい拡張機能なりBookmarkletつかってるだろうという判断で入れませんでした。だって、それらのツールと比べて綺麗にクリップ出来るきがしないのだもの。
いままで、掌編をかいたときでも、Twitterに更新を流すだけでしたが、これで、手軽にFacebookとかGoogle+に通知させることができます。嬉しい。
また、おそらく他のブログにも応用することが出来るだろうと思うので、ちょっと頑張ってみようと思いました。
以上、覚書として記録しておきます。
まとめ
Google+1ボタン作成ページ
+1 Your Website - Google
Facebookのいいねボタン作成ページ
Like Button - Facebook開発者
Twitterボタン作成ページ
Twitter / Twitterボタン
はてブボタン作成ページ
はてなブックマークボタンの作成・設置について
SECTION・9-2nd様より
ブログの記事ごとに『はてブ』（はてなブックマーク）ボタンを設置する方法
ツイートボタン（Twitter公式）をブログに設置する方法
Facebook『いいね！』ボタンの作成と設置（FC2ブログ）
SOFT LOG - フリーソフト・デスクトップカスタマイズソフトの紹介様より
FC2ブログにグーグルプラスワン(+1)ボタンを設置する方法。 - SOFT LOG
ミジンコWEBデザイナーの車窓から様より
『meta name="description"』FC2ブログで個別にカスタマイズする方法│ミジンコWEBデザイナーの車窓から
スポンサードリンク
