テンプレートエンジンのtwigを使ったシステム上でテンプレートを組んでいたところ、

twitterのボタンでエラーが起こってしまい、動作しないという現象に見舞われてしまいました。

Chromeの要素の検証で調べてみたところ、

“Uncaught SyntaxError: Unexpected token >”

というエラーが起きていました。

そこで、テンプレートから出力されたhtmlを見てみたところ、

とテンプレートで記述していたところが、

というコードで出力されていました。

最後の「}} (document, ‘script’, ‘twitter-wjs’) 」のところが、「>(document, ‘script’, ‘twitter-wjs’) 」

となってしまっていたため、エラーが発生していたようです。

twigでは、変数などの値を出力するときに

のように、”{{“と”}}”で出力する変数などを囲う記述法を使うのですが、

twitterボタンのscriptに含まれている”}}”の部分がtwigでタグとして判断されてしまい、

出力してほしいものとは別のコードが出力されてしまったのが原因でした。

 

回避方法としては、

今回のように「}}」が連続して記述されている必要がない場合、

「} }」のように、間にスペースを入れるだけで回避できます。

 

修正後コード

<a href="https://twitter.com/share" class="twitter-share-button">Tweet</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);} }(document, 'script', 'twitter-wjs');</script>

1 2

<a href="https://twitter.com/share" class="twitter-share-button">Tweet</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);} }(document, 'script', 'twitter-wjs');</script>