Tweet Web Intentを使う際の注意点

2018年3月13日カテゴリー：Web系, 技術系コメント : 0

１，はじめに

記事のページをSNSで共有できるボタンを設置したいと思いました。

しかし、Twitter公式の共有ボタンを使うと、ページが重くなるため、やりたくありませんでした。

そこで、Twitterのリンクでウェブページを共有できる機能があることを知り、これを使用しました。

ですが、ページ共有のリンクを試してみたところ、httpエラー400が表示されることがありました（httpエラー番号400は、要求の形式が正しくない場合に表示されます）。

結論から言うと、日本語等のマルチバイト文字列のURLエンコードをしていなかった事が原因でした。

これを解決するついでに、Twitterのウェブページ共有機能について調べたので、まとめました。

〔本サイトで使用しているコードに変更があったため、記事のPHPコードの部分に限り内容を更新しました。 2018/09/01〕

２，Twitterのページ共有機能

Twitter社が提供しているウェブページの共有機能はいくつか存在します。

（１）公式のウィジェット

Twitter社は、Twitter Publishから各種ウィジェットを提供しています。

そして、ウェブページの共有を目的とする場合に使用するコードも、Tweet Button — Twitter Developersから入手することが出来ます。

普通にウェブサイトにTwitter関連の機能を使用したい場合は、これを使用するのが一番いいです。

（２）Tweet Web Intent

（ア）概要

Twitter社は、上記のような、JavaScriptを使用したリッチな方法以外にも、ウェブページの共有に使用できる方法を提供しています。

その中の一つとして、Tweet Web Intentがあります。

これは、共有したいURLやそれに付随するメッセージなどを付けたアドレスにアクセスすることで、そのURLについてTweetをすることが出来る、というものです。

サンプル

上記のアドレスにアクセスしてみてください。

指定したURLについてのTweet画面

ウェブページの共有のツイート画面が表示されたはずです。

（イ）使用方法

この機能の使い方は、シンプルで、解説にもある通り、

https://twitter.com/intent/tweet?url=共有したいURL&text=説明文とか&via=誰からか&hashtags=ハッシュタグ

のように、アドレスの後ろにパラメーターを直接指定します。

（ウ）問題点

Aタグだけで実装ができるため楽です。

しかし、日本語のようにマルチバイトで構成される文字列をURLという形式で扱う際は、エンコードが原則として必要です（最近のブラウザは、日本語URLに対応しています。）。

（Ｉ）正しく動作する場合

https://twitter.com/intent/tweet?url=https://sysrigar.com/&text=hello-twitter-world&via=jskny_tw&hashtags=sysrigar

サンプル

正常動作

（ＩＩ）４００ページが表示される場合

https://twitter.com/intent/tweet?url=https://sysrigar.com/&text=ようこそジャパリパークへ&via=jskny_tw&hashtags=sysrigar

サンプル

IEは時代遅れ

確認して頂ければ、わかる通り、マルチバイト文字列をエンコードをしないで指定すると、４００エラーが表示されます（Chrome等の先進的なブラウザでは正常に動作しますが、IEではエラーが表示されます）。

（エ）解決方法

URLのエンコードをしましょう。

（Ｉ）PHPの場合

PHPには、マルチバイト文字列をURLエンコードするための関数が用意されています。

それがurlencodeという関数です。

（ＩＩ）WordPressで使用するとき

このサイトでは、次のように実装しました。

<?php
// 日本語の文字列のみをURLエンコード
// FROM : https://zakkiweb.net/a/25/
function z_mb_urlencode( $str ) {
	return preg_replace_callback(
		'/[^\x21-\x7e]+/',
		function( $matches ) {
		return rawurlencode( $matches[0] );
		},
		$str);
}

$doubleEncodeUrl = get_permalink();
$doubleEncodeUrl = z_mb_urlencode($doubleEncodeUrl);
// Twitter の投稿画面でデコードされてしまうと、URLとして認識されないことがあるので、
// % をエンコードされた状態である%25にし、Twitter上でデコードされた際に日本語URLとはならないようにしている。
$doubleEncodeUrl = str_replace("%", "%25", $doubleEncodeUrl);
?>

<a class="twitter" href="https://twitter.com/intent/tweet?url=<?= $doubleEncodeUrl; ?>&text=<?= rawurlencode(get_the_title()); ?>&via=jskny_tw&hashtags=sysrigar" target="_blank">Tweet</a>

これにより、記事のタイトルを含めてツイートしやすくすることが出来ます。

元々は、get_the_titleの戻り値をそのまま指定していたので、エラー400が表示されました。

そこで、urlencodeを使用し、エンコードしています。

３，まとめ

Chromeで確認してよーし動いたぜ！

そう一息ついて、Internet Explorerで動作確認をしたら、エラー番号400が表示されたという。

マルチバイト文字列をエンコードするのは、まだまだ原則の事柄だなと思いました。

以上

４，参考文献

作成者 : jskny

Sysrigar

Tweet Web Intentを使う際の注意点

１，はじめに