デビのブログ

デビのブログ

マークアップのスキルアップに関する覚え書き

Amebaでブログを始めよう!
facebookを更新したときにその情報を外部のホームページに表示する方法
(以下の方法では期限付きアクセストークンでの表示になるため、継続して表示するためにはfacebook開発者登録しておく必要があります)


1.以下のページからzipファイル(jquery.neosmart.fb.wall.zip)をダウンロード
http://www.neosmart.de/social-media/facebook-wall/


デビのブログ


2.zipファイルを解凍し表示したいサーバーにフォルダごとアップロードする
※いらないファイルは削除


3.表示したいファイルのheadに以下を記述

<link href="jquery.neosmart.fb.wall/jquery.neosmart.fb.wall.css" rel="stylesheet" type="text/css"/>

<script src="jquery.neosmart.fb.wall/jquery-1.6.1.min.js" type="text/javascript"></script>

<script src="jquery.neosmart.fb.wall/jquery.neosmart.fb.wall.js" type="text/javascript"></script>

※解凍したフォルダ名を変えずに表示したいファイルと同一階層にアップロードした場合です
フォルダ名を変更した場合やアップロード先を任意の位置にする場合は設定を変える


4.オプションを記述する

上記のページ 内にあるLive Demo部分にfacebookIDを入力し、

「Access Token」部分を一度空にして「Connect and create access token」から仮のTokenを取得。

デビのブログ


REFRESHボタンを押して左側にタイムラインが表示されていることを確認

右側下部の「Live Demo Code」をコピーして表示するファイルにペースト

デビのブログ


5.表示したい部分に以下を記述

<div id="live-demo"></div>

※IDは変更して使用


6.ホームページで表示されるか確認

以上が第一段階

継続的に使用する場合のアクセストークンの取得方法は次回

Safari (サファリ) 2013年 08月号 [雑誌]/日之出出版
¥790
Amazon.co.jp



どんなカスタマイズができるの実例をみながら検証

広告を外す
有料のコースがある
https://premium.ameba.jp/pc/#adpremium
アメブロよくある質問
http://helps.ameba.jp/faq/blog/design/post_344.html

フェイスブックとの連携をする
プロフィールバナーを貼る
 1.フェイスブックのマイページ左上の自分の名前をクリック
 2.アクティビティログ右の設定マークをプルダウン
 3.追加する場所で「Other」を選択
 4.コードが書き出されるのでコピーしてフリースペースに貼る

その他のフェイスブックプラグイン
http://developers.facebook.com/docs/plugins/

css編集
変更があったらしい(過去)
http://ameblo.jp/staff/entry-10982603402.html
アメブロよくある質問(現在)
http://helps.ameba.jp/faq/blog/design/post_414.html
1.ブログデザインをCSS編集用デザインに変更しておく
2.ブログデザインからデザインの変更
3.css編集

レイアウトなど変更するとカスタマイズ内容がリセットされる
印象に残った言葉をツイートする



Android携帯からの投稿