#49 Twitterのシェアボタンにいろんな値を入れたい【ぴよぴよコーダーの開発日記】

Twitterのシェアボタンって、ブログとかだと、だいたいページタイトルとってくるじゃないですか。実装的にもそれが一番簡単だし、ページタイトルって一番大事な部分だから。でも、いろんな値を表示させたいと要望があったので、備忘録的に紹介します。

ページタイトルを取ってくる　

コードはこちら　document.titleでtitle拾ってくる

<a href="javascript:void(0)" target="_blank" class="sns-button">
<img src="twitter.png" alt="Share on Twitter">
</a>

$(function(){
	const twKey = "https://twitter.com/share?text=";
	const twValue = encodeURIComponent(document.title);
   
	$(".sns-button").attr("href", twKey + twValue);
});

descriptionをとってくる

でも、たまに、titleじゃなくてdescriptionのほうを入れてほしいっていう要求がある。そんな場合はこちら

コードはこちら　document.getElementsByName('description')[0].contentで拾える。name属性がdescriptionの最初の1個取得ってことか。

$(function(){
	const twKey = "https://twitter.com/share?text=";
    const twValue = document.getElementsByName('description')[0].content;
	$(".sns-button").attr("href", twKey + twValue);
});

参考：JavaScript で title と meta description の値を取得する

og:descriptionをとってくる

さらに、descriptionが140文字超えちゃうから、og:descriptionを表示させたいと要求を受ける。ちなみに、descriptionは200文字以上がいいと言うことは、過去の記事に書きました。

さて、og:descriptionって取得できるのかなってググったらできたので紹介します。

$(function(){
　　const twKey = "https://twitter.com/share?text=";
   let twValue = '';
   let metaDiscre = document.head.children;
   let metaLength = metaDiscre.length;
   for(let i = 0;i < metaLength;i++){
       let proper = metaDiscre[i].getAttribute('property');
       if(proper === 'og:description'){
           let dis = metaDiscre[i];
           twValue = dis.getAttribute('content');
       }
   }

	$(".sns-button").attr("href", twKey + twValue);
});

headの子要素を取得して、子要素の配列の数だけfor文で回して、その中のproparty属性を探して、proparty属性がog:descriptionだったら、URLにセットさせるというやり方。

参考：headタグ内のmeta情報を取得・書き換えを行う。Javascript・jQuery！

ハッシュタグ込みの任意の文字列を表示させる

最後に、ブログなどのシェアボタンじゃなくて、キャンペーンなどで、ハッシュタグ込みの任意のメッセージを表示させたいときの方法です。

任意の文字列には改行などもいれることができます。

コードは、下記

<a href="https://twitter.com/share?text=%E3%81%93%E3%81%AE%E5%A4%8F%E3%81%AF+%23%E3%82%AD%E3%83%A3%E3%83%B3%E3%83%9A%E3%83%BC%E3%83%B3%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB%EF%BC%81%E5%90%9B%E3%81%AB%E6%B1%BA%E3%82%81%E3%81%9F%EF%BC%81%0D%0A%0D%0A%E8%A9%B3%E7%B4%B0%E3%81%AF%E3%81%93%E3%81%A1%E3%82%89%0D%0A%E2%87%92" target="_blank" class="sns-button"><img src="twitter.png" alt="Share on Twitter" title="Share on Twitter"></a>

何を書いてあるのかわからないと思いますが、https://twitter.com/share?text=　の後ろに、任意の文字列を入れています。読めないと思いますが、この文字の作り方は、エンコードで作ります。

URLエンコード・デコード　のサイトに行って、下記のように左に表示させたい文字を入れて変換ボタンを押す。

右側にエンコード後の文字列が表示されるので、https://twitter.com/share?text=の後ろに張り付ける。

ここでの注意点は、ハッシュタグと後続の文字列との間に空白を入れること。Twitterは空白や一部の記号はハッシュタグとして認識しないので、空白を入れないと最後の文字までハッシュタグとして認識されてしまうので入れましょう。