ツイートボタンを押してもツイートできないサイトの3つの理由

ツイートボタンを押してもツイートできないサイトの3つの理由

ツイートボタンを押してもツイートできない

たまにツイートボタンを押してもテキストの内容が正しく表示されないサイトがある。

テキストの内容が正しく表示されない理由は大きくわけて3パターンに分類される。

JavaScriptでエラーが発生している

JavaScriptでエラーが発生した場合、エラーが発生した行より下のコードが処理されないため、これが原因で正しくツイートできていないことがある。

下記のサンプルは意図的に途中でJavaScriptエラーを発生させているためページのタイトルがツイートに含まれていない。

// <a href="https://twitter.com/share" target="_blank" id="tw">Tweet</a>
var test = 1 + ;
var tw = document.getElementById('tw');
var text = document.title;
tw.href += '?text=' + text;

ツイートボタンを押しても正しくツイートできないサンプル1

HTMLだけ貼り付けられている

下記のようにHTMLだけ貼り付けられている場合、遷移先はリンクが貼り付けられているURLしか取得できない。

ほかのサイトからコードをコピーしてよくわからずに再利用しているサイトに多く見受けられる。

ツイートボタンを押しても正しくツイートできないサンプル2

エンコードされずにtextに追加されている

エンコードせずにtextパラメーターに値を入れると遷移先が正しく表示されないことがある。

例えば%が含まれると遷移先が正しく表示されない。
例えば%が含まれると遷移先が正しく表示されない。

// <a href="https://twitter.com/share" target="_blank" id="tw">ツイート</a>
var tw = document.getElementById('tw');
var text = '勇気100%';
tw.href += '?text=' + text;

ツイートボタンを押しても正しくツイートできないサンプル3

textパラメーターに%が含まれていてもencodeURIComponentでエンコードすればツイートするページが正しく表示される。
textパラメーターに%が含まれていてもencodeURIComponentでエンコードすればツイートするページが正しく表示される。

// <a href="https://twitter.com/share" target="_blank" id="tw">ツイート</a>
var tw = document.getElementById('tw');
var text = encodeURIComponent('勇気100%');
tw.href += '?text=' + text;

ツイートボタンを押しても正しくツイートできないサンプル4

スマートフォンだとurlパラメーターが必要

サンプル1から4にはurlパラメーターが含まれていない。

urlパラメーターが含まれていないとurlがツイートに含まれないため必ず追加しておく必要がある。

// <a href="https://twitter.com/share" target="_blank" id="tw">ツイート</a>
var tw = document.getElementById('tw');
var text = encodeURIComponent('勇気100%');
tw.href += '?text=' + text + '&url=' + location.href;

スマートフォン向けサイトではurlパラメーターの指定が必要