季刊とらいろ

左手でにきかくよ。うそちがうよ。

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
  1. --/--/--(--) --:--:--|
  2. スポンサー広告

ツイッターとかのソーシャルボタンをオリジナル画像で設置してみる

ソーシャルボタン設置

各種ソーシャルボタンを自分で用意した画像を使って設置する方法について書きます。

あれね、あのクリックしたらいい感じにツイートやらシェアしてくれちゃう便利ボタン。

ちなみにオリジナル画像でない通常のボタン設置方法は殆どジェネレータ使ってソースコピペするだけですので、
それぞれのURLを紹介しておきます。

facebook/twitter/はてなブックマーク/Yahoo!ブックマーク/Google+1

この5つのソーシャルボタンの設置方法を紹介します。

以下、実際に設置するやり方です。


初めに、それぞれオリジナル画像で設置する場合のHTMLの書き方を紹介します。

次に、各記事ごとに設置する場合に使うURLとタイトル用のテンプレート変数を紹介します。
(fc2ブログ用)

最後に、fc2ブログ以外のサイト、変数の無いブログ(あるのかな?)等で設置する際に
手打ちが面倒なケースで使うコードを紹介します。

facebookのソーシャルボタンを設置する

オリジナル画像を使わない、通常のソーシャルボタン設置は

https://developers.facebook.com/docs/reference/plugins/like/



こちらのジェネレータで作成して、GetCodeをクリックするとソースが出来るので、設置したい場所にコピペして完成です。

自分で用意した画像を使ってfacebookのソーシャルアイコンを設置する場合は、

aタグのhrefに以下のアドレスを指定します。

http://www.facebook.com/sharer.php?u="記事orサイトのURL"&t="記事orサイトのタイトル"

つまり、この季刊とらいろだと、


	

こうなります。

ただし、このままだとURLで使っちゃいけない予約語やらがタイトル(上の例では「季刊とらいろ」)に入ってると上手く動かない場合があるので、
パーセントエンコーディングってのをやっておきましょう。

下のURLとタイトルをテンプレート変数で入れ込むで一緒に紹介しています。

トップページのみに設置する場合はこれで(エンコードしたら)完成です。

各記事毎に設置する場合も下のURLとタイトルをテンプレート変数で入れ込むで紹介してます。

ツイッターのソーシャルボタンを設置する

オリジナル画像を使わない、通常のソーシャルボタン設置は

https://developers.facebook.com/docs/reference/plugins/like/

こちらのジェネレータで作成して、表示されているソースを設置したい場所にコピペして完成です。

自分で用意した画像を使ってtwitterのソーシャルアイコンを設置する場合は、

aタグのhrefに以下のアドレスを指定します。

http://twitter.com/share?url="記事orサイトのURL"&text="記事orサイトのタイトル"

つまり、この季刊とらいろだと、


	

こうなります。

ただし、このままだとURLで使っちゃいけない予約語やらがタイトル(上の例では「季刊とらいろ」)に入ってると上手く動かない場合があるので、
パーセントエンコーディングってのをやっておきましょう。

下のURLとタイトルをテンプレート変数で入れ込むで一緒に紹介しています。

トップページのみに設置する場合はこれで(エンコードしたら)完成です。

各記事毎に設置する場合も下のURLとタイトルをテンプレート変数で入れ込むで紹介してます。

はてなブックマークのソーシャルボタンを設置する

オリジナル画像を使わない、通常のソーシャルボタン設置は

http://b.hatena.ne.jp/guide/bbutton?al=0

こちらのジェネレータで作成して、表示されているソースを設置したい場所にコピペして完成です。

自分で用意した画像を使ってはてなブックマークのソーシャルアイコンを設置する場合は、

aタグのhrefに以下のアドレスを指定します。

http://b.hatena.ne.jp/add?mode=confirm&url="記事orサイトのURL"&title="記事orサイトのタイトル"

つまり、この季刊とらいろだと、


	

こうなります。

ただし、このままだとURLで使っちゃいけない予約語やらがタイトル(上の例では「季刊とらいろ」)に入ってると上手く動かない場合があるので、
パーセントエンコーディングってのをやっておきましょう。

下のURLとタイトルをテンプレート変数で入れ込むで一緒に紹介しています。

トップページのみに設置する場合はこれで(エンコードしたら)完成です。

各記事毎に設置する場合も下のURLとタイトルをテンプレート変数で入れ込むで紹介してます。

ヤフーブックマークのソーシャルボタンを設置する

オリジナル画像を使わない、通常のソーシャルボタン設置は

http://bookmarks.yahoo.co.jp/settings/tools/savelink

こちらのジェネレータで作成して、表示されているソースを設置したい場所にコピペして完成です。

自分で用意した画像を使ってYahoo!ブックマークのソーシャルアイコンを設置する場合は、

aタグのhrefに以下のアドレスを指定します。

http://bookmarks.yahoo.co.jp/bookmarklet/showpopup?t="記事orサイトのタイトル"&u="記事orサイトのURL"&ei=UTF-8"

つまり、この季刊とらいろだと、


	

こうなります。

ただし、このままだとURLで使っちゃいけない予約語やらがタイトル(上の例では「季刊とらいろ」)に入ってると上手く動かない場合があるので、
パーセントエンコーディングってのをやっておきましょう。

下のURLとタイトルをテンプレート変数で入れ込むで一緒に紹介しています。

トップページのみに設置する場合はこれで(エンコードしたら)完成です。

各記事毎に設置する場合も下のURLとタイトルをテンプレート変数で入れ込むで紹介してます。

Google+1のソーシャルボタンを設置する

オリジナル画像を使わない、通常のソーシャルボタン設置は

https://developers.google.com/+/plugins/+1button/

こちらのジェネレータで作成して、表示されているソースを設置したい場所にコピペして完成です。

自分で用意した画像を使ってYahoo!ブックマークのソーシャルアイコンを設置する場合は、

aタグのhrefに以下のアドレスを指定します。

https://plus.google.com/share?url="記事orサイトのURL"

つまり、この季刊とらいろだと、


	

こうなります。

ただし、このままだとURLで使っちゃいけない予約語やらがタイトル(上の例では「季刊とらいろ」)に入ってると上手く動かない場合があるので、
パーセントエンコーディングってのをやっておきましょう。

下のURLとタイトルをテンプレート変数で入れ込むで一緒に紹介しています。

トップページのみに設置する場合はこれで(エンコードしたら)完成です。

各記事毎に設置する場合も下のURLとタイトルをテンプレート変数で入れ込むで紹介してます。

URLとタイトルをテンプレート変数で入れ込む(fc2ブログ用)

各記事毎に設置するやり方はこのまま読み進めて下さい。
パーセントエンコーディングのやり方は少し下にスクロールしてね。

それぞれ記事によってURLとタイトルは異なります。
全てにブログトップページのURLを使ってしまうと、shareやツイートした人が一体どの記事を共有したかったのか分かりません。

そこで、自分のURLとタイトルをテンプレート変数を使って入れましょう。
(他のブログでも同じような変数が有ると思うので、それを使って下さい。無い場合は次に紹介するコードで代用して下さい)

使い方はとても簡単。

URLを入れる場所に<%topentry_enc_link>を入れます。
タイトルを入れる場所に<%topentry_enc_utftitle>を入れます。

以上です。

ツイッターを例にすると、


	

↑こうなります。

さっき、URLを入れていた所とタイトルを入れていた所にテンプレート変数が入っています。

これで、各記事毎に異なったURLをシェアするボタンが出来上がりです。

これをテンプレートのHTMLにコピペすれば、各記事ごとにソーシャルボタンが設置出来ます。

ちなみに設置場所ですが、とらいろさんは追記の後ろ
<!--/more-->
↑これの直下に置いてます。

以上、URLとタイトルをテンプレート変数で入れ込む!!でした。

パーセントエンコーディングしときましょう

上記のテンプレート変数を使う場合は問題ありませんが、手打ちでURLとタイトルを入れる場合

パーセントエンコーディングってのをやっておきましょう。

下のボックス内にURLかタイトルを入れてエンコードボタンをクリックして下さい。




謎の文字列に変わりますので、それをコピペしましょう。

【ツイッターを例に季刊とらいろの場合】


	

↑こうなります。

URLとタイトルをjavascriptで入れ込む

fc2以外のブログで変数が無い場合(そんなブログあるのかな...)、ブログ以外で一々URLとタイトル入れるのが面倒な時はjavascriptさんを使いましょう。

やり方は、5つ全てを例に紹介していきます。
加えて、ソーシャルボタンをクリックした時に、新しいウインドウを開くようにします。

まず、HTMLの方は


こんな感じにしておきます。
hrefはjavascriptで入れるので空です。
ちなみに上から順に、ツイッター・フェイスブック・グーグル+1・はてなブックマーク・ヤフーブックマークだとします。
これを、設置したい場所にコピペします。

次に、以下のコードを<script>タグ内にコピペします。

$(function(){
	var pt = encodeURI($('title').html());
	var pu = encodeURI(document.URL);
	$('.tw_btn a').attr("href", "http://twitter.com/share?url="+ pu + "&text=" + pt);
	$('.fb_btn a').attr("href", "http://www.facebook.com/sharer.php?u="+ pu +"&t=" + pt);
	$('.hb_btn a').attr("href", "http://b.hatena.ne.jp/add?mode=confirm&url="+ pu +"&title=" + pt);
	$('.g1_btn a').attr("href", "https://plus.google.com/share?url=" + pu);
	$('.yb_btn a').attr("href", "http://bookmarks.yahoo.co.jp/bookmarklet/showpopup?t="+ pt +"&u="+ pu +"&ei=UTF-8");
	$(".social a").click(function(){
		window.open(this.href, "social_window","width=600,height=600,resizable=yes,scrollbars=yes,toolbar=yes");
		return false;
	});
});


テンプレートでjQueryを読み込んでいない場合は、上記コードより上に以下の一行を加えて下さい

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

これで、現在表示しているページのURLとタイトルがエンコードした状態で各リンクに挿入されます。
また、クリックすると新しいウインドウで開かれると思います。

それぞれクラス名は適宜変更して下さい。

以上、各種ソーシャルボタンを設置してみようよ!!ねぇ!してみようよ!!するのかい!?しないのかい!?しーない!!!

でした!

関連記事

テーマ:ホームページ・ブログ制作 - ジャンル:コンピュータ

  1. 2012/10/27(土) 22:29:57|
  2. WEB
  3. | トラックバック:1
  4. | コメント:0
<<IEでタブが2つ開く時の直し方 | ホーム | バーボンってのはどこの子や!!>>

コメント

コメントの投稿


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

トラックバック

トラックバック URL
http://trairo.blog41.fc2.com/tb.php/134-01216534
この記事にトラックバックする(FC2ブログユーザー)

まとめ【ツイッターとかのソー】

各種ソーシャルボタンを自分で用意した画像を使って設置する方法について書きます。 あれね、あのクリッ
  1. 2012/11/14(水) 10:06:14 |
  2. まっとめBLOG速報
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。