「いいね!」ボタンや「ツイート」ボタンがローカル環境で表示されないのを回避する方法

Posted by localpocky on 13.2012 ブログ作成   0 comments   0 trackback
Tag :Facebook Twitter




121013 SocialButtons EyeCatch

■2012/10/27 追記:
2012/10/25 現在、下記の方法ではローカル環境で Facebook の「いいね!」ボタンが表示されなくなってしまったようです。せっかく見つけた方法だったのに、残念…。

Web ページに設置する、
Facebook の「いいね!」(Like) ボタン や、Twitter の「ツイート」(Tweet) ボタン。

ボタンを貼り付けるのは、とっても簡単。
下記の公式ページから HTML コードを取ってきて貼り付けるだけで完了です。

Like Button - Facebook開発者

Twitter / Twitterボタン


ローカル環境で表示させたいと思ったこと、ありませんか?


ところが、この「いいね!」や「ツイート」ボタン。
HTML ファイルをローカル環境に置いた状態で開くと、なぜかボタンが表示されないんですよね…。

121013 SocialButtons Before

同じコードのままで Web サーバーにアップロードすれば、ちゃんとボタンが表示されます。

121013 SocialButtons After

ある事情から、どうしてもアップロード前のローカル環境上でこれらのボタンを表示させたかったのですが、いろいろ調べてみても「ローカルでは表示されない。アップロードすれば正しく表示される」という答えばかり…。


ローカル環境で表示させる方法を見つけた!


試行錯誤の上、「いいね!」や「ツイート」ボタンをローカル環境でも表示できる方法を見つけたので、シェアします。

【補足】
自分が確認したのは、ボタンが「表示される」ところまでです。
ボタンを押したときに「正常に動作する」かは未確認です。ご了承ください。


「いいね!」ボタンをローカル環境でも表示させる方法


Facebook の JavaScript SDK のソースコード(通常は <body> タグのすぐ後に配置します)のうち、以下の部分に「http:」を追加します。

<!-- 変更前 -->
js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1&appId=xxxxxxxxxx";
<!-- 変更後 -->
js.src = "http://connect.facebook.net/ja_JP/all.js#xfbml=1&appId=xxxxxxxxxx";


「ツイート」ボタンをローカル環境でも表示させる方法


公式サイトから取得できるコードは、<script> のコードが新しいバージョンになっています。これを、古いバージョンのコードに差し替えます。

<!-- 変更前 (新しいバージョンのコード) -->
<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>
<!-- 変更後 (古いバージョンのコード) -->
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>


自分の環境では、この方法でローカル環境と Web サーバー上の両方で「いいね!」と「ツイート」ボタンが表示されるようになりました。

何かのお役に立てば幸いです!


このブログの更新情報を、
RSSフィード RSSFacebookページ FacebookページGoogle+ページ Google+ページTwitter Twitter で流しています。
もし記事を気に入ってくださいましたら、ご覧いただけるとうれしいです!





同じカテゴリの関連記事

  • お名前
  • タイトル
  • メールアドレス
  • URL

  • password
  • 管理者にだけ表示を許可する

trackbackURL:http://nishi248.blog60.fc2.com/tb.php/1084-af8ff6ac

プロフィール

localpocky

Author:localpocky
電車好きを返上して、にわかに興味が出てきたのが野鳥。姿を見たり鳴き声を聞くと和みます。好きな鳥はハクセキレイ。カワセミを一度この目で見てみたいです。
読書は1週間に1冊のペース。図書館も愛用しています。
2007年にMacにスイッチ。iPhoneも活躍中。
ささやかな楽しみは、手挽きのミルで豆を挽いてコーヒーを入れること。自分で入れたコーヒーはおいしい!
ブログの紹介など → こちら

HSタグクラウド

カレンダー

07 | 2017/08 | 09
- - 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31 - -

検索フォーム

トラックフィード

track feed リンク元サイト