Tweet Web Intentを使う際の注意点

1,はじめに

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

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

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

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

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

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

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

2,Twitterのページ共有機能

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

(1)公式のウィジェット

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

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

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

(2)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に対応しています。)。

(I)正しく動作する場合

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

サンプル

正常動作

(II)400ページが表示される場合

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

サンプル

IEは時代遅れ

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

(エ)解決方法

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

(I)PHPの場合

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

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

(II)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を使用し、エンコードしています。

3,まとめ

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

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

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

以上

4,参考文献

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA