人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

Twitterの公式のつぶやくボタンなのですが、画像だけ独自に変えたいです。


<a href="https://twitter.com/share" class="twitter-share-button" data-via="n_kazu_com" data-lang="ja" data-count="none">ツイート</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>


これをいじって画像だけ独自に変えたいのですが、どこをいじればいいかわからないです。
おしえていただけたら幸いです。
よろしくお願いします。

●質問者: snoopy_japan
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 5/5件

▽最新の回答へ

1 ● oil999
●60ポイント

以下のようにしてください。

<a href="http://twitter.com/share?count=horizontal&amp;original_referer=ここにhttp://のアドレス&amp;text=ここにタイトル&amp;url=ここにhttp://のアドレス&amp;via=n_kazu_com" onclick="window.open(this.href, ‘tweetwindow’, ‘width=550, height=450,personalbar=0,toolbar=0,scrollbars=1,resizable=1); return false;"><img src="オリジナルのボタンの画像URL" width="画像サイズ(横)" height="画像サイズ(高さ)" /></a>

2 ● きゃづみぃ
●30ポイント

<a href="https://twitter.com/share" class="twitter-share-button" data-via="n_kazu_com" data-lang="ja" data-count="none">ツイート
<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>

<img src="http://q.hatena.ne.jp/images/icon-jinriki-s.gif"></a>

途中の

</a>

を 最後にして その前に 画像リンクを入れるだけでいいと思います。


a-kuma3さんのコメント
これだとできません。 twitter のスクリプトが、Aタグを IFRAMEタグに置き換えるような動きをするので、中に書いた IMGタグも消されてしまいます。

きゃづみぃさんのコメント
一応 確認は してみたんですが 確認の仕方が悪かったのかな?

a-kuma3さんのコメント
はてなブログと、ローカルに立てた apache で試してみたんですが、IFRAME に置き換えられてしまいます。

3 ● a-kuma3
●100ポイント ベストアンサー

以下のコードを、ページのどこかに貼りつける。
「★」をつけた行に、差し替えたい画像の URL を入れてください。

<script>
(function() {
 var TIMEOUT = 0;
 setTimeout(function() {
 var PADDING = 2;
 var MY_TW_IMG = "差し替えたい画像の URL"; // ★
 var ifs = document.getElementsByTagName("IFRAME");
 var found = false;
 for (i = 0 ; i < ifs.length ; ++i) {
 var e = ifs[i];
 if (/twitter-share-button/.exec(e.className)) {
 var ee = document.createElement("IMG");
 ee.src = MY_TW_IMG;
 ee.style.position = "relative";
 ee.style.top = (-PADDING) + "px";
 ee.style.left = (-e.offsetWidth + PADDING) + "px";
 ee.style.height = (e.offsetHeight - PADDING*2) + "px";
 e.parentNode.insertBefore(ee, e.nextSibling);
 found = true
 }
 }
 if (! found) {
 me = arguments.callee;
 setTimeout(function() { me(); }, TIMEOUT);
 }
 }, TIMEOUT);
})();
</script>

ツイートボタンの上に画像を乗せているだけなので、微妙な位置調整は必要かも。
試しに、ぼくのはてなブログで、画像をぼくのプロフィールアイコンにしてみたのがコレ。
http://a-kuma3.hatenablog.com/entry/2013/02/17/090943
さっきの「★」の行は、こういうふうになっている。

 var MY_TW_IMG = "http://cdn1.www.st-hatena.com/users/a-/a-kuma3/profile.gif";

snoopy_japanさんのコメント
すみません、説明不足でした。 用意した、アイコン画像をツイートボタンにしたいのですが、こちらは可能でしょうか。 400×170のアイコン画像があるのですが、これをクッリクした際に公式と同じような動きをしてほしいのです、 説明不足で本当に申し訳ないです、すみませんがよろしくお願いします。

a-kuma3さんのコメント
それなら、No.1 の回答ような書き方になると思います。 例えば、リンクを共有するボタンだと、こんな感じ。 >|html| <a href="https://twitter.com/intent/tweet?original_referer=http://q.hatena.ne.jp/&tw_p=tweetbutton&url=http://q.hatena.ne.jp/" target="_blank"> <img src="http://cdn1.www.st-hatena.com/users/a-/a-kuma3/profile.gif"> </a> ||< original_referer と url のところには、共有したいリンクを指定します。 内側の IMG タグには、ボタンとして表示したい画像の URL を指定します。

4 ● oitant
●10ポイント

Twitter / ロゴとプランド
Twitter公式以外の画像を使用するのはまずいんじゃないかと思いますが・・・


snoopy_japanさんのコメント
規約はしっていますけど、コレをまもっているとデザインで着ないんで、、

oitantさんのコメント
デザインのためなら、こういったルールを守らなくてもいいんですか? それが通用するんですか?

snoopy_japanさんのコメント
多くのサイトで独自の画像を使われています、実際制作の人間ですら、規約の事を知らない人は多いです。 例えばseo対策などの多くはGoogleの規約に反しています。

5 ● ウカイサイコ
●0ポイント

マークを改変し、置き換え、または混同するような方法で使用しないでください。Twitterがスポンサーや協賛しているように見せかけたり、Twitterと他のブランドを混同させるようなやり方も含みます。

•吹き出しを使ったり、Twitter Birdの周りに単語をおくこと。
•Twitter birdの向きを変えたり回転させたりすること。
•Twitter birdをアニメーション化すること。
•Twitter birdを複数表示すること。
•Twitter birdの色を変更すること。
•Twitterブランドの代わりに他のマークやロゴを使用すること

等のことが書かれていますが(ーー;)


snoopy_japanさんのコメント
まえの方と同じなんですが、
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ