facebookのアプリIDの作り方



内藤です。

facebookのアプリIDの作り方を説明しますね。

facebookのアプリIDは、ブログにfacebookのフォローボタンを付けたりするのにも必要になります。

以前にも記事で書いていましたが、facebookの開発ページも大分変わってしまって、表示画面が違っていますので、新たに記事にします。

1 https://developers.facebook.com/appsにアクセス

まずは、Facebookにログインした状態でこちらにアクセス

2 アプリ作成

「+ Create New App」をクリックします

アプリ名、または、サイト名を入力し、カテゴリを選択して、「アプリケーションを作成」をクリックします

セキュリティチェックで、表示されている文字を入力します。
(相変わらず分かりにくい…)

3 セッティング

アプリが出来上がると、ダッシュボードに表示されますので、「Settings」をクリックします

メールアドレスを入力し、 「 + Add Platform」 をクリックします


Websiteを選択します


サイトのURLを入力して、「Save Changes」をクリックして保存します

4 公開設定

アプリを公開して使えるようにします

Status & Review から、 右側に表示されている 「No」ボタンを 「Yes」に切り替えます。


5 アプリID 取得

あとはダッシュボードに戻り、アプリIDをコピーすれば使うことができます

やってみてくださいね

なるべく簡単にヘッダーを作る動画解説

なるべく簡単にできるヘッダーの作り方の動画解説です

windowsもMacも使えて、インストール不要のソフトを使っています。

pixlr(ピクセラー)
Photo editor online

参考にしてみてくださいね

初心者にもできるアメブロカスタマイズ」では、

● ヘッダーの簡単な作り方
● 文字に縁をつける
● 画像の縁をぼかす
● 人物を切り抜く
● 画像に効果をつける

なども動画解説しています。


記事の下に「読者になる」ボタンをいれて読者を増やす



内藤です

アメブロの芸能人ブログの記事下には、「読者になる」ボタンが顔つきで表示されています



記事下にあることでクリックしてもらいやすいですが、顔写真を載せることでさらに読者登録を促すこともできますね。

1.まずは使用する顔写真のURLを取得

アメブロの管理画面の左上にあるプロフィール写真から、画像URLを取得します。


画像の上で右クリック ⇒ 画像URLをコピー


2.フリープラグイン用コード

こちらの「コピーした画像URL」の部分に、先ほどコピーした画像URLを貼り付けます。また、「アメブロID」の部分に自分のアメブロIDを代入します。 http://ameblo.jp/inakadenetlifeならば、inakadenetlife。

<!– jQuery –>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

<script>
$(document).ready(function(){
var page_url = location.href;
var entries=$(".skinArticleHeader h1 a");
for(i=0;i<entries.length;i++){
var url=entries[i];
title = entries.eq(i).text();
$(".articleText").eq(i).append(‘<div class="readerLeadModOuter"><div class="readerLeadMod"><div class="readerLeadModInner"><div id="readerLeadModImg"><img width="60" height="60" alt="" src="コピーした画像URL"></div><div class="readerLeadModCnt"><dl><dt>読者になろう</dt><dd><p>ブログの更新情報が受け取れて、アクセスが簡単になります</p></dd><dd class="readerLeadModRegistBtn"><a href="http://blog.ameba.jp/reader.do?bnm=アメブロID" rel="nofollow">読者になる<i></i></a></dd></dl></div></div></div></div>’);
}});
</script >

コピーした時に ‘ や ” が全角になっている場合は半角に直してください

※JQueryに関する記述がある場合は、こちらは不要

<!– jQuery –>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

コード全体をコピーし、フリープラグインに貼り付けます。

3.フリープラグインを使用する機能に移動

フリープラグインを既に使用している場合は、この作業は不要になります。

サイドバーの配置設定から、フリープラグインを使用しない機能から、使用する機能へ移動させます。

CSSで表示設定

これだけだと表示はされるものの、体裁ががたがたですので、CSSで表示を調整します。

以下をコピーし、「CSSの編集」でCSSの一番最後に追加します。
※「CSS編集用デザイン」を利用している必要があります

/*記事下読者*/
.readerLeadModOuter {
text-align: center;
}

.readerLeadMod {
margin: 20px auto;
width: 380px;
border: 1px solid #f0f0f0;
text-align: left;
overflow: hidden;
background-color: #fff;
}

.readerLeadMod .readerLeadModInner {
padding: 10px;
}

.readerLeadMod #readerLeadModImg {
float: left;
width: 60px;
height: 60px;
}

.readerLeadMod #readerLeadModImg img {
margin: 0;
padding: 0;
}

.readerLeadMod .readerLeadModCnt {
margin: 0;
padding: 0;
margin-left: 68px;
position: relative;
min-height: 60px;
height: auto !important;
height: 60px;
}

.readerLeadMod .readerLeadModCnt dl {
margin: 0;
padding: 0;
padding-bottom: 27px;
}

.readerLeadMod .readerLeadModCnt dl dt {
margin: 0;
padding: 0;
margin-bottom: 5px;
line-height: 1.2;
}

.readerLeadMod .readerLeadModCnt dl dd {
margin: 0;
padding: 0;
color: #999;
font-size: 10px !important;
font-family: “hiragino kaku gothic pro”,meiryo,”ms pgothic”,”arial”,sans-serif;
}

.readerLeadMod .readerLeadModCnt dl .readerLeadModRegistBtn {
height: 24px;
margin: 0;
position: absolute;
bottom: 0;
left: 0;
}

.readerLeadMod .readerLeadModCnt dl .readerLeadModRegistBtn a {
font-size: 11px !important;
padding: 0 12px 0 31px;
display: inline-block;
border-radius: 2px;
color: #666;
text-align: center;
text-decoration: none;
line-height: 22px;
height: 22px;
overflow: hidden;
border: 1px solid #ccc;
background-color: #fbfbfb;
border-radius: 2px;
background-position: 0 0;
cursor: pointer;
}

.readerLeadMod .readerLeadModCnt dl .readerLeadModRegistBtn a:hover {
background-color: #f0f0f0;
}

.readerLeadMod .readerLeadModCnt dl .readerLeadModRegistBtn a i {
position: absolute;
top: 6px;
left: 12px;
display: block;
width: 14px;
height: 11px;
background-image: url(“http://stat100.ameba.jp/blog/img/user/ico_readerLead.1.000.png”);
background-repeat: no-repeat;
}



7

確認

これで記事の下に挿入されるようになります。
※ただし、パソコンで見たときのみになります。



試してみてくださいね


読者登録しているブログで読みたいブログだけ、チェックリストに表示させる

内藤です

アメブロで読者登録すると、マイページのチェックリストに更新情報が流れますよね。

でも、読者登録沢山して本当に読みたいブログの更新情報が埋もれていませんか?

本当は読者登録しなくていいんだけど、、、というブログもきっとあると思います(笑)

それ自体が本当は変な話ではあると思いますが、そいう状況の方って少なくないと思います。

それで、チェックリストに流れる更新情報の横にある▼マークから 「この人の更新情報を表示しない」をクリックすると、そのブログの更新情報が流れなくなります。

これは、そのブログの読者を解除するわけではなく、ただチェックリストに表示させないというものです。

読者を増やすのは、いろんな効果がありますから、読者が多いのは一概に悪いこととは言えません。
ただ、入ってくる情報が多すぎるのは、必要な情報までをも埋もれさせてしまうことになります。

今情報過多な時代ですから、選ぶということも求められています。

読者登録したブログが、全て読みたいブログ なのが理想ですが、参考にしてみてくださいねー

※追記)
非表示にしたブログの更新情報を再び表示させたい場合は

チェックリストのところにある「つながり」をクリックし

該当するブログの「更新情報を表示する」をクリックすればOKです

アメブロのヘッダー上の余白ズレについて



先日1月16日から、アメブロの仕様でヘッダー上に余白ができています。

一時的なものなのかわかりませんが、ヘッダーやメニューバーがずれる可能性があります。

この余白をなくすには
CSSに

.skinFrame {
padding-top: 0px;
}

を追加します

やってみてくださいね