twitterシェアを自作ボタンで設置するにはどうすればよいでしょうか。

Question

お世話になっております。

自社サイトのtwitterシェアボタンの飛び先がおかしくなっていました。

下記サイトを見て設置したのですが、
シェアボタンをimgタグで書いているのですが、
twitterの横長ボタンで上書き表示されてしまいます。

▽Twitterのツイートボタン設置方法まとめ2018年版
http://www.promeshi.com/archives/2845


自作ボタンのサイトも見たのですが、
textに全角文字が入ると、飛び先がうまく設定できない状態です。

▽SNSのボタン読み込みを高速化する方法なら自作ボタンが一番速くなる
http://www.promeshi.com/archives/2476


どうすれば、twitterのシェアボタンを、自作ボタンで設置することができますでしょうか。

どうぞ、ご回答よろしくお願いします。

Accepted Answer

ECマスターズの田中です。

> 横長になるキャプチャを添付しています。
ソースと共に確認いたしました。
この方法では、ボタンの表示も含めて
Twitter公式の内容に変更してしまいます。

> 上記ソースの、どこにURLと、テキストを入れればいいのでしょうか。
こちらは、「Wordpress」というシステムで（あるいはPHPの使える環境で）
ページを作っている場合にのみ使える書式となりますが、
いただいたページを確認した所、
Wordpressが使われている様子はございませんでした。

つまり、上記２つの方法はご利用いただけませんので、
現在のページに設置されたボタンをもとにご案内させていただきます。

> textに全角文字が入ると、飛び先がうまく設定できない状態です。
本来、URLとして正しい書式である、
「URLエンコード」を行った後の文字列を
textとしてご記載いただきますようお願いします。
URLエンコードの際は、下記URLのようなWebサービスをご利用ください。

URLエンコード・デコード
https://tech-unlimited.com/urlencode.html

Answer

ECマスターズの田中です。

> twitterの横長ボタンで上書き表示されてしまいます。
その場合、実際に横長ボタンで上書き表示されている様子を
確認させていただく必要がございますので、
確認できるURLを、返信または「投稿内容について報告する」リンクより
お知らせいただきますようお願いします。

> どうすれば、twitterのシェアボタンを、自作ボタンで設置することができますでしょうか。
http://baseviews.com/wordpress/wordpress-tag-url-encode.html
上記ページを参考にして、リンク先を
https://twitter.com/share?url=&text=
にご設定いただくといかがでしょうか。
一度お試しいただきますようお願いします。

Answer

田中様

ご返信ありがとうございます。

「投稿内容について報告する」リンクから、URL等を送りさせていただきました。

また、横長になるキャプチャを添付しています。


>https://twitter.com/share?url=&text=
上記ソースの、どこにURLと、テキストを入れればいいのでしょうか。


お手数おかけしますが、よろしくお願いいたします。###HR######IMG0405e37a7d98246b252b18b5f4ab0c450.jpegIMG0######BR###

Answer

田中様

ご回答ありがとうございます。
教えていただいたサイトで、エラーなくシェアボタンが動きました。

ありがとうございました。
今後ともどうぞ、よろしくお願いします。