Posts Tagged ‘サーバー’

アメブロの全ページにフォームを表示する方法

アメブロには、トップページを表示したときだけ
記事の上に表示できる「メッセージボード」
という機能があります。

しかし、こういった表示を
記事ページでもしたい、という要望も
ちらほら見かけます。

以下の手順で実装できましたので
自分もやってみたい!という方は
試してみてください。

<2012年1月9日追記>
トップページとそれ以外のページで
表示内容を変える方法も書きました。
アメブロのトップページとそれ以外で異なるフォームを表示する
<追記ここまで>

方法は、
1. アメブロの中で完結する方法
2. 外部サーバーを利用する方法
の2通りがあります。

なお、アメブロ側で仕様が変わるなどして
使えなくなることもあるかと思いますので
実装できない場合はコメントなどで
ご連絡ください。

1. アメブロの中で完結する方法

フリープラグインに、下記のコードを書きます。
【表示したいHTML】に改行が入っていると
うまく動かないので注意が必要です。

<script language=”javascript”><!–
function displayForm() {
var thisContent =’【表示したいHTML】’
var targetTag = document.getElementsByTagName(‘div’);
for(i = 0; i < targetTag.length; i++){
thisObject=document.getElementsByTagName(‘div’)[i];
if(thisObject.className==’skinMainArea2′){
thisObject.innerHTML = ( ‘<p class=”form_js”>’+ thisContent + ‘</p>’)+thisObject.innerHTML;}}}
window.onload = function(){displayForm();}
// –></script>

上記コードのざっくりとした意味は、
「<div class=”skinMainArea2″></div>というカタマリがあったら
その前に【表示したいHTML】を追加しますよ」
といった感じです。

ただし、フリープラグイン自体に文字数の制限があるので
フォームの内容が長くなる場合は注意が必要です。

2. 外部サーバーを利用する方法

外部サーバーを利用する場合は
文字数制限がないので
気楽に設置ができます。

なお、今回ご紹介するのは
PHPという言語が使えるサーバーを
レンタルしている場合です。

(1) 外部サーバーに以下の2つのファイルを設置する

(a) form_js.php
以下のコードをコピペしてUTF-8で保存します:<?php
$target_file = “./msgbrd.html”;
$arr_search = array(“\n”,”‘”);
$arr_replace = array(“”,”\'”);
$content = str_replace($arr_search, $arr_replace, file_get_contents($target_file));
?>function displayForm() {
var thisContent ='<?php echo $content; ?>’
var targetTag = document.getElementsByTagName(‘div’);
for(i = 0; i < targetTag.length; i++){
thisObject=document.getElementsByTagName(‘div’)[i];
if(thisObject.className==’skinMainArea2′){
thisObject.innerHTML = ( ‘<p>’+ thisContent + ‘</p>’)+thisObject.innerHTML;}}}(b) msgbrd.html
このファイルには表示したいフォーム(またはそれ以外の任意の内容)
を書きます(UTF-8)。
iframeのようにページ丸ごとを表示するわけではなく
ページの一部分に追記するので、
スタイルシートや画像を使う場合は
絶対パスで書いた方がよいと思います。

(2) フリープラグインに以下のコードを貼り付ける

<script language=”javascript”
src=”http://【(1)で設置した外部サーバー】/form_js.php”></script>
<script language=”javascript”><!–
window.onload = function(){displayForm();}
// –></script>

 

もし上記の方法でうまくいかなかったり、
もっと別の方法でやっているよ、という方がいらっしゃったら
コメントなどでご紹介頂けると嬉しいです。

今回参考にさせて頂いたのは以下のブログです。
アメブロシンプルカスタマイズ その46 メルマガフォームを常時表示させる(メッセージボード)|アメブロカスタマイズ(CSS編集用デザイン)で見やすい成果の出るブログ!戦略的カスタマイズで10万円獲得計画 produced by ミスアラ
アメブロカスタマイズ-メッセージボードと記事下にメールフォーム設置|ホームページ作成便利ツール

2017年6月
« 2月    
 1234
567891011
12131415161718
19202122232425
2627282930