Top  スポンサー広告  ブログに色々なボタンを設置してみた。「Twitterツイートボタン」編 Top  義経の備忘録  ブログに色々なボタンを設置してみた。「Twitterツイートボタン」編
--------(--)
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

↓役に立った・面白かったなど思っていただけましたら是非クリックをお願いします。
このエントリーをはてなブックマークに追加
関連記事

Category : 義経の備忘録

2012-01-27(Fri)
ども…皆さんこんにちは。義経です。

FC2には標準でTwitterのツイートボタン、Facebookのいいね!ボタンが設置出来るようなオプションがあります。
ツイートいいねボタン


しかし、それ以外のボタンを設置したいときに並べて設置しようと思うとなかなか難しいのでもういっそのこと全て手動で設置してみてはどうか?という事でいろんなボタンをブログに追加してみました。
ボタン郡
今回追加したボタンは左から
Twitter:ツイートボタン →今回
Google:Google+1ボタン →Google+1ボタン編
mixi:イイネ!ボタン →mixi:イイネ!ボタン編
Facebook:いいね!ボタン →Facebook:いいね!ボタン編
はてなブックマーク:はてなブックマークボタン →はてなブックマークボタン編

以上の設置方法を書いていこうと思う。

まず、何故設置することになったのかのきっかけですが、どうやらGoogle先生がこのGoogle+1ボタンも検索条件に反映させるとかさせないとか言い始めたことがきっかけです。

どういうことかというと、このGoogle+1ボタンが押されると検索条件に有利になるかもよぉって事です。SEO的にとっても大切ですねwこのGoogle+1はなにか?と言うと、Google+という物があるのですがこのGoogle+がなにか?これはあれです。Facebookのぱくr…FacebookのGoogle版です!まぁ簡単に言うといいねボタンと同じって事ですねw

さて、このGoogle+1ボタンを設置したいが為に色々と試行錯誤しておりました。でもどうしてもうまくいかない…

既存のツイートボタン、いいね!ボタンの右に設置したいのに…

もうめんどいから全部一から設置しちゃえ!っていうことで設置しましたw
折角手動で設置するんだから、それ以外のボタンも設置するかと言うことでmixiやはてなのボタンも設置してみましたよ。

今回はTwitterのツイートボタン編です。基本的にFC2ブログ用に書いていきます。
Twitterのツイートボタンの設置方法

Twitterには素材という公式のボタンやらなんやらが提供されています。 https://twitter.com/about/resources
んでこの中のボタンって言うものからボタンを作っていきます。→Twitterボタン

まずは設置したいボタンを選択します。
ツイッターボタンを選択

今回は主にリンクを共有するボタンを解説しますので、リンクを共有するにチェックを付けてください。

ツイッターボタンのオプション

ボタンのオプションを色々といじることで自分好みに調整する事が出来ます。
①URLを共有
まず設置場所自体のページをそのまま使用したい場合はページのURLを使うでいいのですが、これだとブログのTOPページを表示したときに全てのボタンがTOPページのURLになってしまいます。
それはそれでいいのかもしれませんが、今回というか私の場合は記事毎に違うボタンを設置したかったので、URLを入力したいと思いました。
そこでページのURLを使うの下にあるボックスに <%topentry_link> こいつを入れて上げます。但しいくつか注意点がありますので後述します。

②ツイート内テキスト
こちらも①同様にページのタイトルを使用するのであればそのままページのタイトルを使うでかまいません。但し、上記の様に<%topentry_link>を入れた場合は同じようにタイトルも入れた方がいいでしょう。
私の場合は 記事タイトル:ブログタイトル としたかったので、 <%topentry_title>:<%blog_name> としました。こちらもURL同様に注意点があります。

③数を表示
ツイートボタンに吹き出しで数を表示するかどうかのチェックボタンです。チェックを外すと数が表示される吹き出しが無くなります。

④ユーザー
これは何故必要なのかよく分かりませんがwとりあえず自分のユーザーIDを入れておくとツイートボタンを押されたときのツイート内容に @ユーザー名さんから がつきます。

⑤推奨
ここに自分のアカウントを入れておくと、ツイートした後にフォローしてねって表示されるみたいです。未確認ですがw

⑥ハッシュタグ
ハッシュタグを埋め込みたいときに使用します。埋め込みたいハッシュタグの文字を入れます。

⑦ボタン(大)
チェックを付けるとボタン自体が大きくなります。

⑧言語設定
特別な事でもない限り日本語で良いと思いますが…

と言う事で上記を入力すると右側のプレビューが変わっていきます。
もちろんコードも変わっていきます。

⑨コードのプリビューを見る
とりあえず、上記の内容でコードを取得しました。
<a href="https://twitter.com/share" class="twitter-share-button" data-url="&lt;%topentry_link&gt;" data-text="&lt;%topentry_title&gt;:&lt;%blog_name&gt;" data-lang="ja">ツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

となります。
ここで気をつけるべき点は、data-url="&lt;%topentry_link&gt;" data-text="&lt;%topentry_title&gt;:&lt;%blog_name&gt;"この部分です。
&lt;%topentry_link&gt;の&lt;と&gt;は元々 < と > でないと機能しません。
&lt;と&gt;は < と > のURLソース上での代替え文字なのです。
ですので&lt;と&gt;を < と > に変えて上げる必要があります。
そうすると以下の様になります。
<a href="https://twitter.com/share" class="twitter-share-button" data-url="<%topentry_link>" data-text="<%topentry_title>:<%blog_name>" data-lang="ja">ツイート</a>
~以下略~

また、もう一つの注意点としてこの<%topentry_link>や<%topentry_title>などはテンプレートの<!--topentry--> ~ <!--/topentry-->のなかに収まっていなければ意味がありません。その為設置するときには十分注意してください。

ではこれを設置してみましょう。


この様になります。

仮に全部入りだと…
<a href="https://twitter.com/share" class="twitter-share-button" data-url="任意のURL" data-text="任意のタイトル" data-via="ユーザー名" data-lang="ja" data-size="large" data-related="推奨のユーザー名" data-hashtags="ハッシュタグ名">ツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>



こうなります。両方のボタンを押してみてください。違いが分かります。

また吹き出しの数ですが、現在ボタンの右隣にあります。
これを上にしたい場合は、 data-count="vertical" これを追加して上げる必要があります。
ちなみに数を表示したくない場合は data-count="none" とします。
この様な感じです。
<a href="https://twitter.com/share" class="twitter-share-button" data-url="<%topentry_link>" data-text="<%topentry_title>:<%blog_name>" data-lang="ja" data-count="vertical">ツイート</a>
~以下略~

こうすることによって、吹き出しが上になります。



この様にする事で、ツイートボタンを設置出来ますが、ツイートボタンだけが欲しい場合は、ブログの管理画面で、環境設定 > ブログの設定 > 記事の設定にツイートボタンの設定がありますのでそれを有効にして上げればすみます。
ツイッター設定

ちなみにフォロミーのボタンはこんな感じです。



ツイッターの公式ではこのボタン以外にも
プロフィールウィジェット


など作成する事が出来ます。

と言う形で本当はもっと細かくカスタマイズ出来る様ですが、とりあえずFC2用に簡単に設置出来るように解説しました。もっと詳しく知りたいと言う方は、ツイートボタン 設置などで検索するともっともっと詳しく解説していらっしゃるページがありますのでそちらを参照してみるといいかもしれません。

↓役に立った・面白かったなど思っていただけましたら是非クリックをお願いします。
このエントリーをはてなブックマークに追加
コメント
コメントを書く

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

トラックバック

http://areda.blog9.fc2.com/tb.php/1259-69a839b5

この記事にトラックバックする(FC2ブログユーザーのみ)

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。