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

Question

snoopy_japan

60

60もっと見る

200pt

ウェブ制作

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>

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

回答の条件

1人5回まで

登録：2013/02/17 04:47:18
終了：2013/02/22 17:31:11

※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

No.1

oil99917283202013/02/17 05:52:46

60pt

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

<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>

No.2

きゃづみぃ1353911982013/02/17 08:37:54

30pt


<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>

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

他1件のコメントを見る

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

2013/02/17 10:01:45

一応確認はしてみたんですが確認の仕方が悪かったのかな？

2013/02/17 10:21:22

はてなブログと、ローカルに立てた apache で試してみたんですが、IFRAME に置き換えられてしまいます。

2013/02/17 10:37:06

No.4

oitant512013/02/20 09:57:49

10pt

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

他1件のコメントを見る

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

2013/02/22 17:59:21

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

2013/02/22 19:01:34

No.5

ｳｶｲｻｲｺ15782013/02/20 20:57:22

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

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

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

まえの方と同じなんですが、

2013/02/22 17:29:27

楽1978 2013/02/21 04:10:26

No.4とNo.5の回答ってわざわざ回答に書かなくていいんじゃないの？
コメントで十分かと。

　 - デザインを優先させたいので規約なんか守りません 2013-02-22 18:01:16

デザインを優先させたいので規約なんか守りませんすごい人がいるもんだ。Twitterの公式のつぶやくボタンなのですが、画像だけ独自に変えたいです。 https://twitter.com/share” class=”twitter-shar

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

リクエスト送信済

回答リクエストを送信したユーザーはいません

a-kuma3 · Accepted Answer · 2013-02-17T09:57:48+09:00

以下のコードを、ページのどこかに貼りつける。
「★」をつけた行に、差し替えたい画像の 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";

a-kuma3 · Accepted Answer · 2013-02-17T09:57:48+09:00

以下のコードを、ページのどこかに貼りつける。
「★」をつけた行に、差し替えたい画像の 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";

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

ベストアンサー

a-kuma3497321542013/02/17 09:57:48

その他の回答（4件）

oil99917283202013/02/17 05:52:46

きゃづみぃ1353911982013/02/17 08:37:54

a-kuma3497321542013/02/17 09:57:48ここでベストアンサー

oitant512013/02/20 09:57:49

ｳｶｲｻｲｺ15782013/02/20 20:57:22

コメント（1件)

この質問への反応（ブックマークコメント）

トラックバック