MORIAWASE

好きなもの、好きなだけ、盛り合わせ

今日の人気記事です!

ツイッターの自作シェアボタンのコードエラーはこれが原因!

   

僕はワードプレス(テーマはStinger5)でサイトを運営しているんですが、よくカスタマイズしたい欲にかられます。

簡単なカスタマイズだったり、自分で一生懸命考えたカスタマイズだったり、これまでたくさんのカスタマイズを試してきました。

そして、誰かが公開しているカスタマイズを参考にすることも多く、中にはコピペするだけでOKのカスタマイズもありました。

 

どれも良いカスタマイズでしたが、その中でも、ちゅんこさんの「自作シェアボタン」のカスタマイズは素晴らしかったですね。

コピペでOKだし、デザインも良いし、サイトも高速化できる。まだ導入していない方は、導入をおすすめします。

しかし、一点だけ気になることが。それは、コードをコピペした時のエラーです。実は、ずっと気になってたんですよね。

なぜかコードがエラーになる

先に言っておくと、このエラーによるダメージはまったくありません。シェアボタンとしてしっかり機能します。

実際のエラー画面がこちら。普通は赤文字にならないので、どこかでエラーが発生していることになります。

twitter-share-button-1

 

カスタマイズをした時はまだ知識がなく、「シェアボタンとして機能するから大丈夫だろう」と放置プレイしてたんですが…

やっぱり気になるよね!

ということで、久しぶりにコードを見てみたら、あっけなく原因発見。お前かよ…「related」

あ、もちろん、カスタマイズは自己責任なので、すべての責任は僕にあるわけです。放置プレイしていた僕が悪いのです。

エラーの原因

エラーの原因はツイッターのシェアボタンのコードでした。このコードの中に、余計だと思われるものがありました。

それは、「related」の直後にある「」です。これを削除したらエラーが消えたので、おそらく必要ないはずです。

twitter-share-button-7

 

改めてチェックしてみると、確かにコードがおかしいですね。「chef_moriawase」の文字の色が青になっていません。

twitter-share-button-4

 

ちゅんこさんのサイトはどうなんだろう…?と思ってみたら、公開されているコードと同じでした。

こちらも同じく、アカウント名である「shufulife」の文字が青色になっていません。

twitter-share-button2

 

確信を得るために、他のサイトのシェアボタンも確認してみました。おぉ、「related=」の直後の「」がないですね。

twitter-share-button-3

 

確信を得ることができたので、本番環境で反映させてみました。うん、しっかり文字が青色になっていますね。

twitter-share-button-5

relatedとは?

ちなみに、この「related」は、シェア(拡散)した後に、おすすめユーザーとして表示させることができるオプションみたいなものです。

@アカウント名を表示させる「via」と同様に、絶対に必要なものではないですが、あった方がいいですね。こんな感じで表示されます。

twitter-share-button-6

まとめ

いやー、気になっていたエラーだったので、解決して何よりです。

それにしても、このカスタマイズをしている方はたくさんいるはずなのに、何もエラーが出なかったんだろうか…?

そして、コードを公開してからしばらく時間が経っているのに、そのままだということは、こういうコードの書き方もあるんだろうか…?

 

なんだか、何を信じればいいのかわからなくなりましたが、エラーが消えたので良しとします。

僕と同じような悩みをお持ちの方…も、少ないと思いますが、そんな方に参考にしていただければ嬉しいです!

 - WordPress・カスタマイズ

この記事が気に入ったらいいね!しよう

最新情報をお届けします