備忘録
ツイートボタンが設置されたWebサイトをローカル環境で表示すると、ツイートボタンが表示されずに「ツイート」というテキストのみが表示されます。サーバーにアップロードすれば正常に表示されますが、デザインやレイアウトはローカル環境で確認してからアップロードしたいですよね？
今回はローカル環境でもツイートボタンを表示させる方法をサクッと書きます。
通常の記述
<a href="https://twitter.com/share" class="twitter-share-button"
data-url="http://google.com" data-lang="ja">ツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];
if(!d.getElementById(id)){js=d.createElement(s);
js.id=id;js.src="//platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js,fjs);
}}(document,"script","twitter-wjs");</script>
これが公式のツイートボタンですが、これだとローカルでは表示されません。色々調べたんですが、URLの関係でScriptがうまく動かないようです。
ローカルでも表示される記述
<a href="https://twitter.com/share" class="twitter-share-button"
data-url="http://google.com" data-lang="ja">ツイート</a>
<script src="http://platform.twitter.com/widgets.js"></script>
Script部分を古いバージョンのツイートボタンのものに変更すると、ローカルでもサーバー上でも表示されます。
ただ公式ではもう使われていないコードなので、サーバーにアップロードするときは念のため公式のScriptに変更するのが無難かと。
古い方も新しい方も記述しといて、アップロード時に古いコードを削除しとけばOKです。
関連するかもしれない記事
