閲覧者が見ているページをtwitterに投稿させるリンクやボタンを自分のサイトに加えたいのですが、TweetMe以外のやり方で何か良い方法をご存知でしょうか。またそのリンクがblankで新規ウィンドウを立ち上げてtwitterに投稿できるのが希望です。

何か良いアドバイスありましたらどうぞよろしくお願い致します!

回答の条件
  • 1人3回まで
  • 13歳以上
  • 登録:2010/03/08 10:09:40
  • 終了:2010/03/08 12:46:20

ベストアンサー

id:GreenStar No.4

GreenStar回答回数192ベストアンサー獲得回数462010/03/08 12:19:29

ポイント100pt

META情報の取得方法は複数あり環境依存もあり! getElementsByTagNameを使ったので対応範囲を広く取ったつもりだが不安は否めない!!

<html>
<head>
<meta name="Author" content="GreenStar" />
<meta name="description" content="ほげほげ" />
<meta name="Keywords" content="キーワード" />
<meta name="description" content="hogehoge" />
<title>タイトル</title>
</head>
<body>
<script type="text/javascript">
<!--
var nodes = document.getElementsByTagName("meta");
var nodesCount = nodes.length;
var twitterLink = "";
for (var i = 0; i < nodesCount; i++) {
    if (nodes[i].name == "description") {
        twitterLink += nodes[i].content + " ";
    }
}
twitterLink = "<a href=\"http://twitter.com/home/?status="
    + encodeURI(twitterLink + document.location)
    + "\" target=\"blank\">"
    + "<img src=\"http://twitter-badges.s3.amazonaws.com/twitter-b.png\" alt=\"Twitter\" style=\"border:0px;\">"
    + "</a>";
document.write(twitterLink);
//-->
</script>
</body>
</html>

下に、いろいろな取得方法があがっているので参考に。

http://www.tagindex.com/kakolog/q4bbs/301/465.html

id:ahsodik

GreenStar さん

解答ありがとうございます。素晴らしいです!!

早速タグを入れさせていただき、何個かブラウザで検証してみました。大半の方が使用しているwinのIEで問題なく動いていたので、こちらを使用させていただきます!!

ありがとうございました!!

2010/03/08 12:44:09

その他の回答(3件)

id:GreenStar No.1

GreenStar回答回数192ベストアンサー獲得回数462010/03/08 10:37:30

ポイント100pt

簡単なものを作ってみた! スクリプトをbodyタグ内の好きな場所に入れるだけ!!

<html>
<title>タイトル</title>
<body>
<script type="text/javascript">
<!--
document.write("<a href=\"http://twitter.com/home/?status=" + encodeURI(document.title + " " + document.location) + "\" target=\"blank\">つぶやく</a>");
//-->
</script>
</body>
</html>
id:ahsodik

大変失礼いたしました。質問再開に致しました。

GreenStarさん

早速の解答ありがとうございました。bodyタグのどこでも好きな場所に入れられるということで、設置も簡単ですし是非こちらのタグを私用したいのですが、、すみません。記述し忘れてしまったのですが、こちらリンクを文字ではなく画像を使用してリンクさせたいのですが、イメージタグを入れるとリンク自体見えなくなってしまいます。画像を使う場合何か特別な記述方法があるのでしょうか。

使用したい画像はこちらになります。Twitter

どうぞよろしくお願い致します。

2010/03/08 11:31:55
id:kyuzansha No.2

kyuzansha回答回数2ベストアンサー獲得回数12010/03/08 10:50:15

ポイント50pt

http://ringoon.jp/2009/10/16/bitly-api-javascript-twitter.html


こんにちは。

上記URLにあります。

追記の別ウィンドウを開くを参考にして修正してみてください。

id:ahsodik

kyuzanshaさん

早速の解答ありがとうございました。ページ拝見させていただきました。今回は一番目に解答していただいた方のbody内に記述するだけで良い方を使用させていただくことにしました。

どうもありがとうございました。

2010/03/08 11:44:48
id:GreenStar No.3

GreenStar回答回数192ベストアンサー獲得回数462010/03/08 11:34:57

ポイント100pt

画像利用バージョン!

<html>
<title>タイトル</title>
<body>
<script type="text/javascript">
<!--
document.write("<a href=\"http://twitter.com/home/?status=" + encodeURI(document.title + " " + document.location) + "\" target=\"blank\"><img src=\"http://twitter-badges.s3.amazonaws.com/twitter-b.png\" alt=\"Twitter\" style=\"border:0px;\"></a>");
//-->
</script>
</body>
</html>
id:ahsodik

GreenStar さん

画像バージョンありがとうございました!!バッチリでございました。

もし、ご存知だったらで良いのですが、ツイッターに投稿する文字列がtitleでなく、そのページのDescriptionにするようなことは可能でしょうか?

2010/03/08 11:42:06
id:GreenStar No.4

GreenStar回答回数192ベストアンサー獲得回数462010/03/08 12:19:29ここでベストアンサー

ポイント100pt

META情報の取得方法は複数あり環境依存もあり! getElementsByTagNameを使ったので対応範囲を広く取ったつもりだが不安は否めない!!

<html>
<head>
<meta name="Author" content="GreenStar" />
<meta name="description" content="ほげほげ" />
<meta name="Keywords" content="キーワード" />
<meta name="description" content="hogehoge" />
<title>タイトル</title>
</head>
<body>
<script type="text/javascript">
<!--
var nodes = document.getElementsByTagName("meta");
var nodesCount = nodes.length;
var twitterLink = "";
for (var i = 0; i < nodesCount; i++) {
    if (nodes[i].name == "description") {
        twitterLink += nodes[i].content + " ";
    }
}
twitterLink = "<a href=\"http://twitter.com/home/?status="
    + encodeURI(twitterLink + document.location)
    + "\" target=\"blank\">"
    + "<img src=\"http://twitter-badges.s3.amazonaws.com/twitter-b.png\" alt=\"Twitter\" style=\"border:0px;\">"
    + "</a>";
document.write(twitterLink);
//-->
</script>
</body>
</html>

下に、いろいろな取得方法があがっているので参考に。

http://www.tagindex.com/kakolog/q4bbs/301/465.html

id:ahsodik

GreenStar さん

解答ありがとうございます。素晴らしいです!!

早速タグを入れさせていただき、何個かブラウザで検証してみました。大半の方が使用しているwinのIEで問題なく動いていたので、こちらを使用させていただきます!!

ありがとうございました!!

2010/03/08 12:44:09

コメントはまだありません

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

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

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

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