Blog

twigのテンプレートで設置したtwitterボタンが動かない場合の対処法

2014.07.22Cat:javascript PHP デザイナー

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

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

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

“Uncaught SyntaxError: Unexpected token >”

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

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

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

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

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

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

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

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

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

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

 

回避方法としては、

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

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

 

修正後コード

 

Author Profile

ninomiya
ninomiya
Webデザイナー兼コーダーです。 イラストを描くのも好きです。 SVGとCanvasを使ったWEBアプリにも興味があります。 よろしくお願いいたします。
» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ