Notes on using Tweet Web Intent
I,Introduction
I wanted to set up a button that can share article pages with SNS.
However, using the Twitter official share button makes the page heavy. So, I don’t want to use it.
Therefore, I used a function to share web pages using Twitter’s URL.
The http error 400 sometimes appeared when I accessed the page sharing url (http error number 400 is displayed when the request format is incorrect).
In conclusion, it was caused by not encoding URL of multi-byte character string such as Japanese.
In the process of solve it, I looked up Twitter’s web page sharing function, so I wrote down this article.
[Because there was a change in the code used on this site, this paper was updated only for the part of PHP code. 2018/09/01]
II,Twitter’s Web page sharing function
There are several web page sharing functions provided by Twitter corp.
1,Official widget
Twitter corp offers various widgets from Twitter Publish.
And you can also get the code to use for sharing web pages from Tweet Button — Twitter Developers.
If you use Twitter’s functions, in usually, using official widget is the best practice for you.
2,Tweet Web Intent
(1) What is it like ?
Twitter corp offers some methods that can be used for sharing web page as another method for the rich method using JavaScript.
One of those methods is Tweet Web Intent.
You can tweet about a web page which you want to share by accessing a specific addresses.
Please try accessing the above address.
This is the tweet screen about the specified URL.
You will see the screen of the web page sharing.
(2) How to use
This function is simple, it is described in the official-commentary.
https://twitter.com/intent/tweet?url=sharing-url&text=comment&via=from who&hashtags=hashtags
As mentioned above, specify the parameter directly set after the address.
(3) Problem
Using this method, it is easy because you can implement with only A tag.
However, if you use multibyte characters such as Japanese in request URL, encoding is necessary in usually.
(recent browsers correspond to Japanese URLs).
(i) Correct
https://twitter.com/intent/tweet?url=https://sysrigar.com/&text=hello-twitter-world&via=jskny_tw&hashtags=sysrigar
Correct
(ii) When 400 pages are displayed
https://twitter.com/intent/tweet?url=https://sysrigar.com/&text=ようこそジャパリパークへ&via=jskny_tw&hashtags=sysrigar
Incorrect (If you use internet explorer 11, this page will be shown.)
As you can see, if you use a multibyte character string without encoding in URL, a 400 error will be displayed.
(Advanced browsers such as Chrome will work fine, but IE will show this page.)
(4) Solution
Let’s encode the URL in case of using multibyte character.
(i) In case of PHP
PHP provides functions for URL encoding of multibyte character strings.
That is function urlencode.
(ii) In case of using WordPress
In this site, I write code as follows.
<?php
// URL encoding of Japanese string only
// 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);
// If it is decoded on Twitter, URL may not be recognized as a correct URL.
// For that reason, I changed % to %25(%25 is url-encoded %).
$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>This makes it easier to tweet, including article title, account id , hashtags and etc.
Originally, I used return value of get_the_title as specified URL but error 400 was displayed.
Therefore, I use urlencode and encode it.
III,Finally
I checked code on Chrome and it worked ! (^^)
But I checked on Internet Explorer, error number 400 was displayed. (;_;)
I think that encoding multibyte strings is still necessary.
最近のコメント