ウェブDeBLOG | トライデントコンピュータ専門学校 Webデザイン学科

トライデントコンピュータ専門学校 Webデザイン学科の最新情報を紹介しています。学生へのインタビュー記事から学生作品の解説、Webデザイン・マークアップ・プログラミングの授業風景、プロジェクト発表会、名古屋のWeb制作会社情報、イベント参加レポートやWeb制作の技術解説などWeb制作に関連する記事を掲載しています。トライデントコンピュータ専門学校は、いま話題の名古屋駅からユニモール地下街を歩いて3分です。 

2013.04.07 [日] それでも、Facebook「Like Box」をカスタマイズしたかった。

【2016年4月17日追記】
Facebookのページプラグインが便利になりレイアウトしやすくなりました。もうすでにサポートが終了していることもあり、fb.wallを外しました。ページプラグインに関しては、下記から行ってください。
https://developers.facebook.com/docs/plugins/page-plugin

【2014年1月19日追記】
昨年の10月にまた、Facebookの仕様が変わり「いいね!」の数が取得できなくなっています。
fb.wallでundefined people likes thisとか出る件 | IT屋のPC+ビジネスハック
の記事に対処法が書かれています。
上記記事を参考に変更すると、いいね!の上限数に限りが出てきますので、
fb.wallメモ最終版 | 永遠少年症候群
に修正方法が紹介されています。またこの記事で利用してる「fb.wall」も開発が「neosmart STREAM」に移行しているようですのでご注意ください。このブログでは「fb.wall」が完全に動かなくなってから対応を検討しようと思います。

【本文ここから】
よく仕様の変わるFacebookですが、昨年末あたりからLike boxをCSSを使ってカスタマイズすることができなくなりました。今でも、以前書いた「Facebook「Like Box」をカスタマイズした。」の記事へLike Box, カスタマイズなどで検索して訪問していただくのですが、今は残念ながら反映されません。
デフォルトだと、やはりウォールの右側が空いてしまいますし、アイコンも下図右のように小さく調整したいです。

fb-box0407.jpg

ということで、いろいろと検討した結果、デフォルトのLike BoxとjQueryのプラグインfb.wallを組み合わせることにしました。
上の背景に色が入っているところは、Facebook Developersで作ります。Show Faces(いいねしてる人のアイコン), Show stream(ページのウォール), Show header(ヘッダー「Facebookもチェック」)のチェックを外してページタイトルと「いいね!」ボタンのみでCodeを出力します。

fb-box0407_002.jpg
を表示させたい部分に埋め込み、head内にも出力されたjavascriptを入れておきます。

色や線は、
.fb_iframe_widget, .fb_iframe_widget span,
.fb_iframe_widget span iframe[style]{
background-color: #F4F4F4;
overflow: hidden;
width: 100% !important;
}
のようにCSSで変更できます。

次にFacebookページのウォールを表示させるために、fb.wallを使用します。
fb.wallのサイトにLive Demoがありますので、自分のFacebookページが取得できるか確認してください。
アクセストークンはとりあえず、「Connect and create access token」を押せば勝手に作ってくれます。コードも書きだしてくれるので、まずはそれを使いましょう。

設置準備としてはサイトから、jquery.neosmart.fb.wall.jsをダウンロードしてhead内に追加します。jQueryも忘れずに先に読み込ませておきます。

そして、各種設定のためのjavascriptを書き込みます。
設定の方法などは、
【参考:】jQueryでFacebookをもっと便利に、fb.wallを詳しーく解説 | Webデザイン日々独学
をそのまま流用させてもらっています。

アクセストークンについては前回作った、Developerアプリページを確認して、Access Token Tool をクリックすると、App Tokenが取得出来ます。アクセストークンには複数種類があり、App Tokenは、有効期限が切れないようです。
【参考:】Facebookのアクセストークンのいろいろ | wktcoder

そして、先ほどのLike Boxの下にを追記し、表示されればOKです。さらにデベロッパーツールを使って、classを調べればfont-sizeやレイアウトもカスタマイズできます。

ずっと崩れていて気になっていたFacebookページのLike Boxがこれで整えれました。
嵐の週末を、ほぼこれに費やすなんて、なんてこったい。
関連記事
Tag : Facebook Like Box
Comment







(編集・削除用)


管理者にだけ表示を許可
Trackback
https://tridentwebdesign.blog.fc2.com/tb.php/379-85bdb60c
検索フォーム
プロフィール

担当:Webデザイン学科+

名古屋駅から歩いて6分、トライデントコンピュータ専門学校のWebデザイン学科を紹介します。

トライデントロゴ

質問などはLINEでどうぞ。

友だち追加数
Instagram
Webデザイン学科実績
<プレゼン>
WCAN 2016 Springに参加してきました。
WCAN 2015 Winterに参加しました。
建設業入職者増加プロジェクトの発表会に参加
WCAN 2015 Summerに参加してきました。
WCAN 2013 Winterに参加
WCAN(秋)に参加しました。
無事、発表が終わりました【WordFes Nagoya 2013】
WCAN 2013 Summerに参加してきました。
WCAN 2011 Winter LT&LOGO
学生がライトニングトークで話しました。
<展示会>
1年生進級展「WWW(Welcome to Web World)」を開催しました。
1年生進級展「お母さんの2度見展」を開催中です。
「うぇ~~~~~~~ぶ2016」終了しました。ご来場ありがとうございました!
「うぇ〜〜〜〜〜ぶ!!」終了。ご来場ありがとうございました!
<コンテスト>
「第1回 専門学校 HTML5作品アワード」技術賞を受賞しました!
NCF2017でグランプリを受賞しました!
信州アプリコンテスト0 [ゼロ] KDDI賞受賞!
NCF2014(スマホアプリ開発テーマ2) 準グランプリ獲得!
最優秀賞!HTML5スマートアプリ&クリエイティブコンテスト
NCF2013グランプリ受賞!!!
<Webサイト制作>
ミス・ユニバース・ジャパン岐阜大会公式Webサイトを作成しました。
建設業入職者増加プロジェクト発表会
Webサイト制作発表会2014
99eagle Webサイトリニューアル公開
99eagle Webサイト公開
「Bloom*Block」Webサイト公開
セントレア「日本の四季 キルト展」Webサイト公開
かっぱ商店街サイト制作
ココストア共同企画「アサココ!」公開
<技能五輪全国大会>
第53回技能五輪全国大会(ウェブデザイン職種)その3
第52回技能五輪全国大会が開催されました。
銀メダル・銅メダル獲得【第51回技能五輪全国大会】
第49回技能五輪全国大会結果発表 敢闘賞受賞
第48回技能五輪全国大会結果発表(銀賞・敢闘賞受賞)
第47回技能五輪閉会式 & 結果発表
第46回技能五輪
<若年者ものづくり競技大会>
第11回若年者ものづくり競技大会 2日目&結果
第9回若年者ものづくり競技大会2日目(競技日)
第8回若年者ものづくり競技大会2日目
第7回若年者ものづくり大会
第6回若年者ものづくり大会2日目
第5回若年者ものづくり大会
第4回若年者ものづくり競技大会閉会式
学生ブログリンク
タグリスト 改

トライデントコンピュータ専門学校Webデザイン学科WCAN業界研究技能五輪ウェブデザイン職種ウェブデザインWebサイト若年者ものづくり競技大会2013映画名古屋ECCコンピュータ専門学校ポートフォリオ学生ブログWinter2009WebデザインWebサイト制作WordPress2011JavaScript技能五輪全国大会礒田優かっぱ商店街オープンキャンパスcms1年生進級展Wordpressa-blog卒業制作展Webライトニングトーク矢野りん入学式Nagoya2014ホームページ・ビルダーアクセス解析瀬川大勝若年者ものづくり大会面白法人カヤックAutumnCGイラスト学科石黒雄介テンプレート作成アクアリングSummer第48回技能五輪全国大会HCDGIOin2010IIJ2015大阪卒展あいちカレーラーメンコンテスト卒業制作FlashAdobeJapan東京研修mini合同企業展ココストアWeb制作会社名古屋駅CSS体験入学2012ウェブデザイン技能競技会html5杉本拓也上村水月成田篤紀99eagleプロジェクトウェブデザイン技能競技大会セントレア専門学校愛知県企業訪問SpringBananaAdラーメン情報デザインGoogleWebワークショップウェブデザイン技能検定CSS3情報デザインフォーラム学生HTML5jQuery閉館日プレゼンテーション人間中心設計マール田中睦翔CentOSブログパーツ水野裕太gifアニメWordFes長屋めぐみselect要素まぼろしcanvasparticleレイアウトoutput要素うぇーぶスマホアプリ作品集1年生作品展NTTドコモ東海fieldset要素Forumたこ焼きWebデザインギャラリーUXスマートフォンNEXT和みCalendarAdventlegend要素input要素textarea要素COMMUNICATIONlabel要素form要素5T(ファイヴティー)option要素CSSNiteカリキュラムSEOCMSjbstyle名古屋開府400年祭Markup空気人形iPhoneカメラ写真ワークショップモンキーワークス結果発表F-site豊田市美術館グループ制作Apple企業課題茂森仙直2008鷹野雅弘Store情報デザイン基礎WordCamp導入授業ディプロスアサココ!DTPWORLDトライデント合同企業展笈瀬本通り阿部淳也ポートフォリオサイト名古屋市科学館就職活動卒業式会社訪問静岡FICC岩手県Like塚本碧真鍋大度アンティー・ファクトリーメ~テレビジュアルエディタWEBサイト制作者のためのHCDの理解in名古屋中日ドラゴンズ名商連トライデントイラストマップナゴヤドーム知多みるく堀尾真衣Plugin産学協同Analytics戸田芳裕Boxコミュニケーションデザインワークショップフォトアルバム謹賀新年制作合宿熊谷佳紀林田実樹北濱大輔幕張メッセ初期設定進級展サイバーエージェント佐藤歩Runstant学生インタビュー株式会社LIGサーティファイ水野怜美Yahoo!JapanWebクリエイター能力認定試験グリッドレイアウトdisplay:gridGridLayoutスーパーエレメンツ醐りょう山崎デザイン事務所長谷川恭久マークアップ演習イラストコンテストデュエル・マスターズインスタグラムコピーライティング教育勉強会ロゴ公募FITCごはんとFlash#infoedu小野裕子ヨウイチCREAM情報デザイン教育勉強会鎌倉日本電子専門学校横浜デジタルアーツ専門学校会社見学森川眞行新横浜ラーメン博物館横浜中華街箱根合宿3校合同発表会クリ博就職フェスタペルソナ/シナリオ法マクロマリオネットおかだよういちいな世ペルソナ&シナリオ法浅野智驛麺通りウェブDeBLOG閉会式是枝裕和監督芸大ナゴヤデザインウィーク2009人喰いの大鷲トリコ東京ゲームショウ2009ITホワイトボックスPHP勉強会大富豪スコアシート美大UNIQLOCKモーション演習animationescalatorCG・イラストコンテスト第4回アックゼロヨン・アワードギレン総帥LPONodeList世界のCMフェスティバルYahoo!KyotodotFesドラマwonderflFlash-Games慶華飯店InstagramゆるキャラHCDプロセスブランディングストリートビューtoJAPANインターネットクリエイティブアワードカラーWorld)料理Autumin映画のオープニングThenプロトコル分析Day:WEBサイト制作者のためのHCDの理解伊藤頼子ビジュアルデベロップメントサーバーIAYORKE.技能五輪予選Resurgence知多半島タカガールサイト日清食品グループ水曜日のカンパネラスタジオジブリ・レイアウト展unoplusプラネタリアン松坂屋美術館アクセシビリティ名古屋メディアボンドITCIRCUS柴乃櫂人広島弁IndependenceAndrioid名古屋グランパスチタハン10WEBサイト制作者のためのHCD(人間中心設計)の理解iPhone4シナリオタロヲ商店街金シャチ商店街細川太郎北川パーヤンペルソナ1→10designジムナストコロンプロ野球Monaca情報系学園祭ウェブデザイン部門浜松学生作品集福みつ餃子IA2010キックオフセミナー夢プロジェクト2009・成果報告会ThereアニメーションAndWasSalsaウェブリテラシー協会第一回セミナー再進学沖縄トライデント祭り大沢たかお求人新世界ネスカフェゴールドブレンド鈴木優太ポートピア名古屋フナ犬カンファレンス道頓堀夏休み武豊アニメーションフェスティバルTAFFWCAN46名古屋おもてなし武将隊武将都市夏季閉館日ナゴヤNIKE後期出身高校CS4サムライDesignデッサン造形基礎WebリテラシーD3.jsTEXTURE中村勇吾NightCollegeFLEXTOC2017佐藤可士和SakaeAWARDSHTML+CSS基礎ActionScript基礎VIIFANTASYFINALADVENTCHILDRENノートPC貸与HPデザインCOMPLETEアートアニメーション武豊町夏休みの課題スクラップブックプレゼン演習西村真里子WCAN×CSSNiteTAFF'09広告批評FLASHTableHelveticaSagmeisterStefanNCF2017デザインのへそXRAY2008WinterWebDirectionEast'08W+KTokyo(+CRUZ)QubibiWebアプリ安藤志維丹下紘希友章ArtlessNam信州アプリコンテスト[ゼロ]アプリコンテスト久保怜也関口浩之フォントおじさんPHPデザイナーのためのプログラミング入門ofMAXContents愛知県美術館アンドリュー・ワイエスASIASIGGRAPHミス・ユニバース・ジャパン岐阜大会Videopuppetry鳥取デザイン鳥取砂丘出張講座尾鷲高校食品サンプルお母さんの二度見展ActionScript旭食品サンプル製作所学習富岡聡学科WEBヱヴァンゲリヲン新劇場版:破西田幸司ウルトラ展ヤノベケンジES6黒い太陽ECMAScript国家検定インターネットスキル認定普及協会ライブペイントカナバングラフィックスウサビッチWebプログラミング初級講座グラフィックデザイン今井佳子ガンダム入賞HTMLCollection堀川appendChild()アイディグラフィックス学生参加ソバットシアターコマ撮りアニメ電信柱エレミの恋マイクロソフトCMS特集クイズWWW(WelcomeTHEES2015デザインコンテストワークスコーポレーション「ヤノベケンジ-ウルトラ」展01GENOウィルスデコクレスタジオディテイルズセキュリティ鈴木雄太山川綾那Tokyo梅澤朝樹衣台高校株式会社エイチームLabuatBlogUTZOOM山村浩二服部友厚Proxy学校ターミナルWCAN2017Springv4.0.1CONTESTカスタマイズセミナーSyntaxHighlighterCALENDARUNIQLOゲーム日本ファルコム□□□switch音楽ファルコム音楽フリー宣言荒俣宏佐藤洋介Mozoramaポスターデザイン・コンペディションFlexibleBoxNTTドコモ東海支社NCF2013list-style-typedisplayHTML5スマートアプリ&クリエイティブコンテストモテ声ボーダーlist-item岡田陽一美術大学カレーラーメン麺やOK麺屋ココイチ高橋雅人UXデザイン芸術大学AWARDDmm.comKDDIジョルテparseInt()DesignergoogleparseFloat()備忘録東京コスモ栗山聡一3DCGGWDF81教室Flexbox卒業研究制作展最優秀賞味仙CGスペシャリストトライデント合同企業説明会10日でおぼえるLinuxサーバー入門教室松田洋樹フジ家55源賢司就職東京佐藤ねじ採用担当者の心に響く木下健太郎たにぐちまことプレゼンThree.jsポートフォリオアイデア帳みんなのICT平野健太郎バイドゥUIWeb制作合宿たこ焼きパーティウェブアクセシビリティモリサワFacebook田代豊RhizomatiksPlatformグロースハックグロースハッカーKaizenアクティビティシナリオさかなや晴れやか嵐が如く第51回技能五輪全国大会Webデザイン演習PerfumebyinspiredPARTYそこにいない。展14高校あいちトリエンナーレ2013concrete5道家陽介datalist要素keygen要素八木智章button要素HTMLオリエンタル第52回技能五輪全国大会竹中民男Scrollmagicoptgroup要素アイテムカンパニーネイルサロンマウア授業紅茶専門店Liyn-anWebアクセシビリティScrollMagicVelocity.jstype属性麺の匠親孝行森田霞マークアップエンジニアインターンシップHighlighterWF1でBLOGCrayon2015年度新入生スマートフォンサイトUI図鑑CSS3&jQueryで作る夏麺フェアNCF2014新年のご挨拶飯田淳介名古屋駅麺通りアップルップル木村哲朗フロントエンドエンジニアアイチータ結団式本州最南端串本八鬼山那智の大滝大門坂アロチ本家和歌山中華そば熊野三山熊野古道マカベンランチクリスマス中村健太石原愛実宇野剛志名古屋マークアップ勉強会tableテーブル丸高丸田屋青山敬司山田拓生加藤ひとみ第53回ワクワク建設タウン愛知県選手団アクセシビリティからはじめる、WebサイトのUXデザイ建設経営者倶楽部西岡克真Animation柏木祥太スパルタキャンプ岩出本店名古屋市営地下鉄青空学区AO特別授業熊﨑彩仕事Muse放課後のプレアデスキルターズフェスティバル2011河地芳明SUBARUGAINAXキルト展日本の四季中部国際空港笈瀬本通商店街名古屋市中村区ウェブリテラシー協会Slimbox2forJISXFLAVER3.0FLV8341-3:2010沼田啓助愛知県立芸術大学制作実績坂本貴史英国王のスピーチUntitled!!!!!!!!トライデントカレッジ2016津田直明卒業制作・研究発表会2011平野秀幸カークスヴィル円JOY!map卒業・修了制作展IA/UXプラクティス絵文字ぬいぐるみのラパンKtaistyleCustomSmiliesAO入試LoadGAUltimate商店サイト制作愛知商業高校名チャリjsdo.it中級編名駅経済新聞プチ・フレーズ三蔵CODE名古屋クリエイターフットサル笈瀬本通Syntaxグラフィクデザインみの治商店Twitter涼麺名古屋サイト改善研究会増田悟CodePenJSBinGoogleAnalytics横浜デジタルアーツプログラムクイズLazy大西健太田中稚妃呂石井研二カメラワークCodeplyCODEポスターデザイン・コンペティション小林信次中部国際空港株式会社ブラザー工業株式会社JSFiddlePlunker株式会社アクアリングablogcmsDTPの勉強部屋出席率NHN学位イマジンカップTeam尾花大輔Bloom*BlockBloosum専門士合同制作合宿2011年度合宿懇親会合同制作ドコモStationFuturedocomo職業実践専門課程レスポンシブWebデザイン長野IllustratorSVG結果第50回画像をチェックボタンにする張山大祐JQueryFacebookページワイヤーフレームTOKYO東京ゲームショウ2012第7回若年者ものづくり競技大会GAMESHOWうぇ~~~~~~~ぶベースキャンプ名古屋ウェブアートデザイナー迎春敢闘賞GATEDRAGONドラゴンゲートゴールデンウィークGoogleロゴライアン・ウッドワードマーサ・グレアム5月11日愛知淑徳大学みつけものMagnum北岡弘至伊達千代JAPANWORLDCUP3恵那市岩村プロジェクションマッピングバルサマン原一浩プラネタリウムOhanaゲーム大賞アマチュア部門東京ゲームショウメールマガジンロゴマークツインメッセ静岡静岡県Web制作のおしごとWebディレクターWebデザイナー鈴木坂本邦夫WebデザインスペシャルデーWebプログラマー神戸神戸国際展示場駅麺通り

メールフォーム

名前:
メールアドレス:
件名:
本文:

東京コスモ
トライデントコンピュータ専門学校
Pagetop