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

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

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

最終更新:2016.04.24Webサイト制作Tips
【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
検索フォーム
Yahoo!基金
台風21号で被災されたみなさま、また、北海道を震源とする地震で被災されたみなさまに、心からお見舞い申し上げます。
プロフィール

担当: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コンピュータ専門学校ポートフォリオWinter学生ブログ2009Webサイト制作Webデザイン技能五輪全国大会WordPressJavaScript2011礒田優かっぱ商店街オープンキャンパスNagoyacmsWordpress卒業制作展a-blog1年生進級展矢野りん入学式アクアリング2014ライトニングトークWeb面白法人カヤックアクセス解析若年者ものづくり大会SummerCGイラスト学科Autumn石黒雄介CSS瀬川大勝ホームページ・ビルダーテンプレート作成HCD体験入学卒展GIOIIJinmini名古屋駅合同企業展あいちカレーラーメンコンテストHTML52015ウェブデザイン技能競技会html5東京研修大阪Flash2010杉本拓也2012卒業制作Adobe第48回技能五輪全国大会ココストアJapanWeb制作会社学生北濱大輔ウェブデザイン技能検定GridLayout99eagledisplay:gridブログパーツCSS3プロジェクトマール愛知県成田篤紀上村水月企業訪問jQueryグリッドレイアウトNEXT人間中心設計プレゼンテーションCOMMUNICATION専門学校CentOS水野裕太gifアニメラーメンBananaAdSpring情報デザインフォーラムウェブデザイン技能競技大会GoogleWebワークショップ情報デザイン田中睦翔佐藤歩閉館日学生インタビューセントレアサイバーエージェントうぇーぶ1年生作品展WordFesまぼろしcanvas戸田芳裕知多みるくスマホアプリナゴヤドームiPhoneselect要素output要素長屋めぐみWebリテラシーparticle中日ドラゴンズNTTドコモ東海鈴木優太PluginカリキュラムレイアウトCMS幕張メッセ熊谷佳紀林田実樹StoreDTPWORLD情報デザイン基礎マークアップエンジニア空気人形WEBサイト制作者のためのHCDの理解in名古屋SEO株式会社LIG名古屋市科学館Yahoo!Japan作品集textarea要素写真AWARD制作合宿カメラワークショップモンキーワークス和みForumUXトライデント合同企業展2008Apple笈瀬本通りイラストマップスマートフォントライデントビジュアルエディタCalendar愛知県選手団legend要素fieldset要素結果発表input要素Box茂森仙直label要素form要素5T(ファイヴティー)Adventたこ焼き名商連Webデザインギャラリー鷹野雅弘進級展option要素水野怜美jbstyle豊田市美術館真鍋大度久保怜也会社訪問Webクリエイター能力認定試験サーティファイ夏季閉館日堀尾真衣トライデント祭りAnalytics岩手県就職活動F-siteWebデザイナー企業課題フォトアルバムFICC名古屋開府400年祭グループ制作ポートフォリオサイト2017アンティー・ファクトリー産学協同Markup出張講座Runstant塚本碧LikeCSSNite謹賀新年夏休みメ~テレWordCamp静岡導入授業コミュニケーションデザインワークショップディプロス卒業式初期設定アサココ!阿部淳也FLAVER3.0ブラザー工業株式会社中級編笈瀬本通商店街中部国際空港株式会社IA2010キックオフセミナーカメラワークSalsa名古屋グランパスウェブリテラシー協会第一回セミナー石井研二夢プロジェクト2009・成果報告会JIS名古屋市中村区名古屋おもてなし武将隊チタハン10浜松ポスターデザイン・コンペディション増田悟名古屋クリエイターフットサルCODE餃子福みつ8341-3:2010小林信次CODEポスターデザイン・コンペティション名古屋サイト改善研究会グラフィクデザイン笈瀬本通武将都市みの治商店武豊アニメーションフェスティバルFLVXWCAN46TAFFナゴヤ三蔵田中稚妃呂1→10design大西健太WEBサイト制作者のためのHCDの理解Ultimatefor技能五輪予選unoplusペルソナ愛知商業高校GATwitter細川太郎タロヲIAYORKE.サーバーアクセシビリティ名古屋メディアボンド金シャチ商店街Loadプロトコル分析商店街伊藤頼子ビジュアルデベロップメント松坂屋美術館スタジオジブリ・レイアウト展プチ・フレーズLazy名駅経済新聞ウェブリテラシー協会フナ犬GoogleAnalyticsネスカフェゴールドブレンド道頓堀Andrioid新世界求人大沢たかお株式会社アクアリングポートピア名古屋iPhone4広島弁シナリオ知多半島Slimbox2柴乃櫂人商店サイト制作横浜デジタルアーツプロ野球名チャリITCIRCUSWEBサイト制作者のためのHCD(人間中心設計)の理解HCDプロセスCHILDRENADVENTVIIFANTASYCOMPLETETokyoBlogUTZOOMLabuatFINALアートアニメーションプレゼン演習ActionScript基礎HTML+CSS基礎造形基礎西村真里子WCAN×CSSNite武豊町TAFF'09広告批評「ヤノベケンジ-ウルトラ」展ワークスコーポレーションウルトラ展ヤノベケンジカスタマイズセミナーCALENDAR黒い太陽ライブペイント西田幸司国家検定インターネットスキル認定普及協会UNIQLO荒俣宏山村浩二デコクレセキュリティGENOウィルス□□□switch日本ファルコムファルコム音楽フリー宣言音楽ゲームデッサンDesignSagmeisterStefanW+KTokyo(+CRUZ)QubibiHelveticaデザインのへそXRAY2008WinterWebDirectionEast'08ArtlessNamTHEWEBウェブデザイン部門カンファレンスCONTEST01丹下紘希HPデザインデザインコンテストSIGGRAPHASIASakaeNightCollegeFLEX佐藤可士和中村勇吾CS4サムライTEXTUREFLASHMAX鳥取砂丘鳥取Videopuppetryデザインアンドリュー・ワイエスデザイナーのためのプログラミング入門PHP愛知県美術館ヱヴァンゲリヲン新劇場版:破ActionScriptコピーライティング小野裕子#infoedu教育勉強会山崎デザイン事務所スーパーエレメンツイラストコンテストデュエル・マスターズ長谷川恭久ロゴ公募FITC閉会式ゆるキャラFlash-Gameswonderfl映画のオープニングマクロマリオネットCREAMごはんとFlashマークアップ演習ヨウイチウェブDeBLOG新横浜ラーメン博物館横浜中華街箱根合宿森川眞行慶華飯店NIKEThereThenAnd会社見学鎌倉浅野智おかだよういちペルソナ/シナリオ法情報デザイン教育勉強会ペルソナ&シナリオ法クリ博就職フェスタ日本電子専門学校横浜デジタルアーツ専門学校3校合同発表会KyotodotFesガンダムグラフィックデザイン今井佳子アイディグラフィックス入賞後期escalatorアニメーションMozorama学生参加CMS特集富岡聡学科旭食品サンプル製作所食品サンプルカナバングラフィックスウサビッチソバットシアターコマ撮りアニメ電信柱エレミの恋animationモーション演習Yahoo!世界のCMフェスティバルITホワイトボックスPHP勉強会JAPANインターネットクリエイティブアワードストリートビューブランディングAutuminカラー大富豪スコアシート東京ゲームショウ2009LPO第4回アックゼロヨン・アワードCG・イラストコンテストギレン総帥UNIQLOCK人喰いの大鷲トリコ是枝裕和監督ナゴヤデザインウィーク2009WasメールマガジンWeb制作のおしごと懇親会合宿合同制作WebディレクターWebプログラマー津田直明2016原一浩坂本邦夫合同制作合宿専門士ワイヤーフレーム仕事UIバイドゥうぇ~~~~~~~ぶウェブアートデザイナー学位出席率職業実践専門課程レスポンシブWebデザイン制作実績坂本貴史駅麺通り涼麺jsdo.itCodeplyクイズIndependence水曜日のカンパネラプラネタリアンResurgenceDay:PlunkerJSFiddle沼田啓助カークスヴィルIA/UXプラクティス平野秀幸河地芳明AO入試JSBinCodePenプログラムクイズ平野健太郎ポートフォリオアイデア帳八木智章竹中民男夏麺フェア飯田淳介ScrollmagicScrollMagic建設経営者倶楽部アクセシビリティからはじめる、WebサイトのUXデザイWebアクセシビリティVelocity.jsフロントエンドエンジニア木村哲朗新入生WF1でBLOGインターンシップスマートフォンサイトUI図鑑2015年度Crayonアップルップル森田霞HighlighterSyntaxワクワク建設タウン第53回Kaizenアクティビティシナリオ源賢司UXデザインPlatformグロースハック採用担当者の心に響く高校14グロースハッカーDmm.com岡田陽一3DCG東京コスモクリスマス熊﨑彩松田洋樹CGスペシャリストFlexibleBoxFlexbox味仙タカガールサイト日清食品グループ安藤WebアプリNCF2017信州アプリコンテスト[ゼロ]志維堀川World)toWWW(Welcome友章アプリコンテストミス・ユニバース・ジャパン岐阜大会TableTOCAWARDS出身高校ofContentsフォントおじさん関口浩之堀川友章安藤志維北川パーヤンWebデザインスペシャルデーOculusVRカルタ東京ゲームショウ2018出前授業GO第56回sourcepicture2018沖縄県青山高校新城高校ホ・ジヘ韓国脆弱性なんと読む?期末テストHEOJIHYE冨田伴成イークリエイト藤井英一D3.jsスクラップブック料理ドラマInstagramインスタグラム芸大美大Webプログラミング初級講座appendChild()HTMLCollectionNodeList醐りょうMonaca学生作品集沖縄ジムナストコロン情報系学園祭いな世驛麺通り再進学マイクロソフト学習山川綾那鈴木雄太スタジオディテイルズ服部友厚株式会社エイチーム梅澤朝樹夏休みの課題ノートPC貸与尾鷲高校衣台高校佐藤洋介ターミナルES2015ES6ECMAScriptお母さんの二度見展SyntaxHighlighterv4.0.1学校ProxyWCAN2017SpringCSS3&jQueryで作る名古屋駅麺通りBloom*BlockBloosumTeamイマジンカップ尾花大輔第7回若年者ものづくり競技大会SHOWGAMETOKYO東京ゲームショウ2012NHNStationツインメッセ静岡静岡県ロゴマークsrcset敢闘賞迎春Futuredocomoドコモ2011年度ベースキャンプ名古屋FacebookページみんなのICTウェブアクセシビリティモリサワFacebook佐藤ねじ東京プレゼンThree.js木下健太郎就職たこ焼きパーティWeb制作合宿結果長野IllustratorSVG第50回JQueryMuse画像をチェックボタンにする張山大祐Ohanaゲーム大賞アマチュア部門英国王のスピーチ卒業制作・研究発表会2011ぬいぐるみのラパンKtaistyleUntitled!!!!!!!!トライデントカレッジ伊達千代DTPの勉強部屋ablogcmsCustomSmilies絵文字中部国際空港GAINAXSUBARU放課後のプレアデス日本の四季キルト展円JOY!map卒業・修了制作展愛知県立芸術大学北岡弘至Magnumライアン・ウッドワードマーサ・グレアム5月11日Googleロゴプラネタリウム鈴木東京ゲームショウ神戸神戸国際展示場ゴールデンウィークGATEプロジェクションマッピングバルサマン3JAPANWORLDCUP恵那市岩村みつけものDRAGONドラゴンゲート愛知淑徳大学たにぐちまこと田代豊岩出本店丸田屋丸高アロチ本家スパルタキャンプ柏木祥太AO特別授業青空学区名古屋市営地下鉄和歌山中華そば熊野三山マカベン名古屋マークアップ勉強会tableテーブル熊野古道八鬼山大門坂那智の大滝本州最南端串本Animation西岡克真HTMLbutton要素datalist要素keygen要素第52回技能五輪全国大会オリエンタルNCF2014新年のご挨拶親孝行麺の匠optgroup要素type属性結団式青山敬司山田拓生加藤ひとみアイチータ授業紅茶専門店Liyn-anアイテムカンパニーネイルサロンマウア宇野剛志石原愛実麺やOK麺屋ココイチフジ家55さかなやカレーラーメン高橋雅人NTTドコモ東海支社NCF2013美術大学芸術大学晴れやか嵐が如くPerfumebyinspiredRhizomatiksPARTYそこにいない。展第51回技能五輪全国大会Webデザイン演習あいちトリエンナーレ2013list-style-typedisplayparseFloat()parseInt()Designergoogle備忘録栗山聡一ランチ中村健太道家陽介concrete5GWDF81教室KDDIHTML5スマートアプリ&クリエイティブコンテストモテ声ボーダーlist-itemジョルテ最優秀賞トライデント合同企業説明会10日でおぼえるLinuxサーバー入門教室卒業研究制作展キルターズフェスティバル2011

メールフォーム

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

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