javaScriptでURIエンコードしてaタグのテキストリンクを作る

お絵かき掲示板にツイートボタンをつけました。
アイキャッチ画像が投稿したイラストになるのは、今のところPOTI-boardだけで、その他の掲示板は、固定されたOGPイメージの表示になりますが、お絵かき掲示板の個別スレッドのリンクを観てもらう事はできます。

以下は、お絵かき掲示板にツイートボタンを設置するために試行錯誤した記録です。ツイートボタンのカスタマイズ方法を探している方はこんな記事を読む暇があったら
ツイートボタンのカスタマイズまとめ。 - freefielder.jp
にいますぐ移動する事をおすすめします。(ダメじゃん
twitterのツイートボタンを作るためのリンクshareとintent/tweet

ツイートボタンをaタグで作成するための基本的な情報…なのですが、URIエンコード済みである事が前提なので、テキストがShiftjisだと文字化けします。

urlの途中に、&が入っていると正しく動作しません。Bracketsの右クリック拡張のURIエンコードを使えば対応できる場合もありますが…。

また、人から見るとURIエンコードされたURLは、文字化けした文字列になるので可読性がよくありません。
seesaaブログに「twitterにつぶやくボタン」を簡単に設置する方法 | kira-ism
URIエンコードができて、aタグでリンク。文字化けしないしURLに&が入っていてもURIエンコードされているので機能します。
<a href="javascript:window.location='https://twitter.com/intent/tweet?status='+encodeURIComponent('No.$LOGNO $TITLE by $NAME #お絵かき掲示板')+' '+encodeURIComponent('https://pbbs.sakura.ne.jp/cgi/relm/relm.cgi?mode=res&no=$LOGNO')+' (via @satopian)';" onclick="window.open(this.href, 'relmtweet$LOGNO', 'width=650, height=470, personalbar=0, toolbar=0, scrollbars=1, sizable=1'); return false;" rel="nofollow" class="twitter-link">
<span class="icon-twitter"></span>tweet</a>
ところが…ブラウザ側の問題なのか
href属性値にスクリプトは書けません(といっておく)
という事なのか、IE11とSafariでは動作しない事がわかりました。

ツイートボタンのカスタマイズ Javascript

javascript:window.locationで始まるリンクは動作しない?
ChromeとFirefoxでは動作するので、もしかするとレガシーなブラウザでは動作しないだけなのかもしれないのですが…。

URIエンコードをして、それをaタグのリンクにするには…。

URIエンコードはできるか?
できる。
それを文字列とつなげたら?
動かない。

文字列と変数を一緒に書く方法がわからなかったので、文字列も変数にして、変数+変数+変数のようにしてみました。
<script>
tweetmessage=encodeURIComponent('No.$LOGNO $TITLE by $NAME #お絵かき掲示板');
tweeturl=encodeURIComponent('https://pbbs.sakura.ne.jp/cgi/relm/relm.cgi?mode=res&no=$LOGNO');

//リンクのタグ
twlink1="<a target=\"_blank\" href=\"https://twitter.com/share?text=";
twlink2="&url=";
twlink3="&\""
twlink4="<span class=\"icon-twitter\"></span>tweet</a>"
tweettags=twlink1+tweetmessage+twlink2+tweeturl+twlink3+twlink4;

document.write(tweettags);
</script>

ツイートボタンのカスタマイズ Javascript

やった…動いた…と思ったのですが…。

ツイートボタンのカスタマイズ Javascript

左から1番めのようになりました。
twitterの鳥アイコンが2つならんでしまいます。

ツイートボタンのカスタマイズ Javascript

デベロッパーツールで問題の箇所を確認してみたりもしたのですが…。
なぜtwitterのアイコンが二重になるのか、さっぱり…。
<script>
(function(){
var url = encodeURIComponent('https://pbbs.sakura.ne.jp/cgi/relm/relm.cgi?mode=res&no=$LOGNO'); //ページURL。一応エンコード
var title = encodeURIComponent('No.$LOGNO $TITLE by $NAME #お絵かき掲示板'); //ページタイトル。同上。
document.write( '<a target="_blank" href="https://twitter.com/intent/tweet?&text=' + title + '&url=' + url + '"><span class="icon-twitter"></span>tweet</a> <a target="_blank" class="fb btn" href="http://www.facebook.com/share.php?u=' + url + '"><span class="icon-facebook2"></span>share</a>' );
})();
</script>

JavaScriptを使った原始的な方法ならばこんな感じ。ボタンを表示したい場所に以下のコードを書きます。を参考にして、書き換えたものですが99%コピペですね…。

functionとdocument.writeを組み合わせたらいいのかな…となんとなく思ってはいたのですが、そのものズバリの答え…でした。

Chrome、Firefox、IE11で動作する事を確認しました。
javaScriptが実行された結果HTMLに出力されるのはaタグのテキストリンクなので、facebookのシェアボタンにも使ってみました。

ツイートボタンのカスタマイズ Javascript

facebookのシェアのリンクも動作しているみたいです…。みたい…というのはfacebookのアカウントが無いので、おそらく動くはずの書き方をしただけだからです…。

ツイートボタンを設置したお絵かき掲示板はこちら。

この記事へのコメント

コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。