FC2ブログ

RSS|archives|admin
HOME  ◇ IT ◇ LIFE ◇ 雑記 ◇ 創作関連 ◇ 掌編小説 ◇ 小説目次 ◇ Twitterログ

[メモ]G+とかFBのボタンから共有するとき個別記事の内容を引用させる方法

2012.04.23 Mon [Edit]

ソーシャルボタンの設置と設定をがんばってみた


(注:今回掲載のタグ類はこのままコピーすると一部全角ですのでご注意ください)

ソーシャルボタン設置で、ちょっと四苦八苦してみました。
以前からzenbackさんを活用してみたり、ちょっと忍者おまとめツールを活用したり、ブログにデフォルトのツイートボタンを設置してみたりとしていましたが、イマイチどれも帯に短したすきに長し、といった感じ。ここはやっぱり、自力で設置したいな、と、不意に思いたち、昨日せっせと設置してみました。

google facebook twitter
google facebook twitter / Sean MacEntee



というわけで、設置から設定まで、四苦八苦した模様を、お届けいたします。




まずはとにかく設置してみよう


私のやり方の基本は、「分からなかったらググる」、これに付きます。

というわけで、お世話になったサイト様はこちらっ。

各種SNSボタンを横並びに設置する方法と注意点


横並びにする方法は実は実行していないですが、この記事から各種(Facebook、Twitter、はてブ)の設置方法へと飛べるので、こちらをご紹介。こちらを参考に、せっせと設定。

ポイントは、FC2の独自タグ

テンプレート用 変数一覧|FC2ブログ公式マニュアル


<%topentry_title>とか、<%topentry_link>とか、そういったタグを、タイトルのところとかURLに入れることで、その各記事へのリンクができる模様。

あと、Google+もほしいよねってことで、こちらを参考にしました。

FC2ブログにグーグルプラスワン(+1)ボタンを設置する方法。 - SOFT LOG



素直にやれば大丈夫です。注意点は、各サービスのページで素直に入力するのはいいですが、コード生成されたあとに、ちゃんと確認しましょう。私は”<”が見事にエンコードされてました。気づかずにそのままいれて「あれー、できないー」なんていってました。すみません、いい加減で。
私くらいかもしれませんが、一応。全角って怖いですね。本当に。

さて、各ページ(今回はFacebookとTwitterとはてブに、Google+)からコードを生成してはりました。出来ました。

じゃあ、実験。ちゃんと共有できるかどうかを試しました。


が、しかし。

共有すると記事の引用ではなくブログの内容紹介がでる

何度もやりました。記事のURLとタイトルは、先ほど紹介した独自タグページを見てばっちり指定したので、きちんと各記事ごとに違うものが表示されています。が、記事の内容が出ない。ブログの総合タイトルの下にある紹介文が出る。
なんでー? ボタンの位置が悪いのー? と、思いました。真剣に思いました。

もうね、わかる方にはものすごく「なんで?」という悩みに見えるでしょうがこんなもんです私。

検索するんだけど、キーワードの選び方が悪いのか上手く行かなくて。まずしっかりHTMLを眺めてみた。もう、ほんと真剣に眺めてみた。

で、もしかして、”Link ref~”が関係あるのか? と、真剣に考えこんで検索して、でも違って、えええええ、と、悩んでいたとき、ん? と発見しました!

重要なのは"metaname=~"の部分だった


発見してみれば、あああああ、と納得出来るんですが、勉強せず場当たりでやってるとこういうことになる。詳しくはこちらのサイト様の紹介が素晴らしいのでご紹介です。

『meta name="description"』FC2ブログで個別にカスタマイズする方法│ミジンコWEBデザイナーの車窓から


もともと、FC2ブログは(テンプレートにも寄るでしょうが)<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-->で囲むとなお良いかと思われます。他にも、上記で紹介したサイト様には、カテゴリ別の場合など丁寧に紹介して下さってますので、興味がおありでしたら、ぜひそちらを御覧くださいませ。とても私は勉強になりました。ありがとうございます。

というわけで、無事設置成功


なにはともあれ、よかったよかった。
まぁ、よく見たらなんかブログ村ランキングが混ざってたりFC2拍手が混ざってたり、よく見かける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デザイナーの車窓から

web拍手 by FC2 ブログランキング・にほんブログ村へ このエントリーをはてなブックマークに追加 





スポンサードリンク

Theme:ホームページ・ブログ制作 | Genre:コンピュータ |
Category:IT | Comment(0) | Trackback(0) | top↑ |
<<[メモ]私がモバイル読書(文)に憧れる3つの理由 | HOME | [掌編]恋に恋して、君に恋した>>
name
title
mail
url

[     ]
Trackback URL
http://angelgardens.blog47.fc2.com/tb.php/734-72ede4ac


Related Posts Plugin for WordPress, Blogger...