再：アメブロフリープラグインの外部化；ポシェ（Poche）を使う編.

スクリプトコードの中身を外部化する；ポシェ（Poche）を使って.

こんにちワ　o(^-^)o

以前、Fc2ブログを使ってアメブロのフリープラグインのスクリプトコードを外部化する方法を書きました。
アメブロフリープラグインの外部化；Fc2ブログを使う編

というファイルアップロードサービスを使ってアメブロのフリープラグインのコードを外部化する方法をメモっておきたいと思います。

以前は、わてくちめ、こういった外部化はDropboxを使ってたんですが、なんせ無料版は今年2017 年 3 月 15 日でリンクが無効

になってしまうとのこと。

このポシェはDropboxの変わりにもなりますので是非参考にして下さい。

おおまかにいうと、①スクリプトファイルの作成と②ポシェでの作業、それと、③フリープラグイン（アメブロ）への設置の３つになります。
なお、これは自分の場合、OSはWindows7、ブラウザはGoogle Chromeを使っての作業です。

1.スクリプトファイルの作成

下図のような、アメブロの記事下に設置する「ライクボックス」

を例にしたいと思います。

上のフェースブックから提供されたコードは以下のようなものです。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("div.articleText").append('<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2F%25E3%2581%2582%25E3%2582%2593%25E3%2581%25AA%25E3%2581%2593%25E3%2581%25A8%25E3%2581%259D%25E3%2582%2593%25E3%2581%25AA%25E3%2581%2593%25E3%2581%25A8%25E3%2581%25A9%25E3%2581%2586%25E3%2581%25A7%25E3%2582%2582%25E3%2581%2584%25E3%2581%2584%25E3%2581%2593%25E3%2581%25A8%2F1402967886616315&width=600&height=598&colorscheme=light&show_faces=true&header=true&stream=true&show_border=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:600px; height:598px;" allowTransparency="true"></iframe>');
}
); </script>

上の赤字部分をコピーして、パソコンの「メモ帳」を使ってスクリプトファイル（.jsファイル）を作って行きます。

スクリプトファイル作成

上に書いたコードの赤字部分を「メモ帳」に以下のように貼り付けます。

次に、このファイルに半角英数字で名前を付けて保存します（今回はLIKEBOX02）。この時、エンコードを「UTF-8」、ファイルの種類（T）を「JavaScript(*.js)」にして保存して下さい。

なお、ハイフンやドットをファイル名に使うとアップできない場合もあるみたいなので、半角英数字のみで題名を付けるようにしたほうが無難だと思います。

2.ポシェ（Poche）にアップしてURLを取得

ポシェ（Poche）にログインして「アップローダー」をクリックします（↓）

次に「ファイルを選択」をクリックします（↓）。

そして①で作ったスクリクトファイルをクリックして、「ほいホイ」ボタンをクリックします（↓）。

するとアップロードされて以下のような画面に切り換わりますので、「ファイルブラウザで確認する」をクリックします（↓）。

つぎに切り換わった画面の、先程アップしたファイル名（この場合はLike02.js）をクリックします（↓）。

すると以下のような画面に切り換わりますので、画面上部アドレスバーのコードをコピーします。

コピーしたコードが以下のものです。ちゃんと末尾が.jsになってればOKです。

http://hana.poche.jp/wantan/Like02.js

次に、コードを差し替えて「フリープラグイン」に貼り付けて行きます。

3.コードを差し替えてフリープラグインに貼り付け

フェースブックから提供されたコードの中の<script type="text/javascript">～～</script>で囲まれた箇所を以下のように差し替えます。

↓

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="
http://hana.poche.jp/wantan/Like02.js"> </script>

※青字のsrc="～～"を追記して下さい。
あとは、このコードを「フリープラグイン」に貼り付ければOKです。あ、それと補足ですが、アメブロの場合はJavaScriptになってますので、type="text/javascript"を削除しちゃって以下のようにしてもOKです。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="http://hana.poche.jp/wantan/Like02.js"> </script>

※平成29年1月6日現在、上記の方法で、このブログにもFacebookのライクボックスを記事下に表示させてます。

※補足：この件に関して以下のようなアドバイスをFacebookでWebに詳しい松本章次さま

より頂きました。

たとえばポシェ( http://poche.jp/ )

とかいかがですか？
ここなら、FAQに明確に外部呼出OKって書いてありますし。
20MBしかありませんが、JS置き場なら十分ですよね。
利用料は年間2000円なんですが、なぜか半年ごとに無料利用期間が半年ずつ伸びるので、数年使ってますが一度も利用料を払ってません。
というか、払いますって連絡したこともあるんですが「いいです」って払い方すら教えてくれません^^;

ポシェ( http://poche.jp/ )

◯思うこと
DropboxやGoogle Drive以外のストレージサービスを色々探してみたんですが、いいのが見つかりませんでした。
ポシェが、こんなストレージとして使えることが分かって嬉しいです。

☆ブィブィ ('-^*)/

ちょっとした「Webお役立ち情報」とかを主に書いてます。

ネットで調べて、「わかったこと」を備忘録の代わりのメモ帳のようにして使ってます。

再：アメブロフリープラグインの外部化；ポシェ（Poche）を使う編.