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回まで
  • 13歳以上
  • 登録:2013/02/17 04:47:18
  • 終了:2013/02/22 17:31:11

ベストアンサー

id:a-kuma3 No.3

a-kuma3回答回数4558ベストアンサー獲得回数19032013/02/17 09:57:48

ポイント100pt

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

すみません、説明不足でした。

用意した、アイコン画像をツイートボタンにしたいのですが、こちらは可能でしょうか。
400×170のアイコン画像があるのですが、これをクッリクした際に公式と同じような動きをしてほしいのです、

説明不足で本当に申し訳ないです、すみませんがよろしくお願いします。

2013/02/17 14:04:31
id:a-kuma3

それなら、No.1 の回答ような書き方になると思います。
例えば、リンクを共有するボタンだと、こんな感じ。

<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 を指定します。

2013/02/17 15:21:19

その他の回答(4件)

id:oil999 No.1

oil999回答回数1728ベストアンサー獲得回数3202013/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>
id:taknt No.2

きゃづみぃ回答回数13539ベストアンサー獲得回数11982013/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件のコメントを見る
id:taknt

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

2013/02/17 10:21:22
id:a-kuma3

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

2013/02/17 10:37:06
id:a-kuma3 No.3

a-kuma3回答回数4558ベストアンサー獲得回数19032013/02/17 09:57:48ここでベストアンサー

ポイント100pt

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

すみません、説明不足でした。

用意した、アイコン画像をツイートボタンにしたいのですが、こちらは可能でしょうか。
400×170のアイコン画像があるのですが、これをクッリクした際に公式と同じような動きをしてほしいのです、

説明不足で本当に申し訳ないです、すみませんがよろしくお願いします。

2013/02/17 14:04:31
id:a-kuma3

それなら、No.1 の回答ような書き方になると思います。
例えば、リンクを共有するボタンだと、こんな感じ。

<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 を指定します。

2013/02/17 15:21:19
id:oitant No.4

oitant回答回数5ベストアンサー獲得回数12013/02/20 09:57:49

ポイント10pt

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

他1件のコメントを見る
id:oitant

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

2013/02/22 17:59:21
id:snoopy_japan

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

2013/02/22 19:01:34
id:inazumaereven07 No.5

ウカイサイコ回答回数157ベストアンサー獲得回数82013/02/20 20:57:22

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

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

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

id:snoopy_japan

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

2013/02/22 17:29:27
  • id:maya70828
    No.4とNo.5の回答ってわざわざ回答に書かなくていいんじゃないの?
    コメントで十分かと。

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

トラックバック

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

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

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません