ウェブ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

2012.09.24 [月] Facebook「Like Box」をカスタマイズした。

最終更新:-0001.11.30Webサイト制作Tips
【2013年4月8日追記】
外部からのCSSが効かない仕様になったようですので、fb.wallを使って対処しました。
それでも、Facebook「Like Box」をカスタマイズしたかった。」書きました。

【2013年2月20日追記】
いつの間にか、CSSが効くようになっていましたが、新たに修正が必要だったりしましたので、Facebook側で何かが変わったのでしょう(T_T)

【2013年1月30日追記】
最近、likeboxで検索してこのページに来られる人が多かったので何事かと思っていましたが、どうやらカスタマイズしたCSSが効いていないようで、仕様の変更か何かあったみたいです。解決策がみつかったら追記します。

Facebookが話題になり始めた頃、トライデントコンピュータ専門学校Webデザイン学科のFacebookページを制作しました。このウェブDeブログや学生のブログ、学科の話題などをまとめて紹介しています。

Facebookpage_002.jpg


そして、Facebookページの記事を、ブログやWebサイトにプラグインとして配置できる「Like Box」を設置しています。設置の仕方は簡単で、「Like Box」のページに行って、必要事項を記入してCodeを発行します。HTML5, XFBML, IFRAME, URLから好きな形式を選んで、パーツを設置したい場所に貼り付けます。

ところが、設置は簡単なのですが、縦長になってしまうため見栄えがあまり良くありません。Borderの色など設定できるのですが、レイアウト、文字のサイズ・色、写真の配置などの細かい設定はありません。CSSで調整しようと試みましたが、<iframe>のため外から調整が効きません。ということで、下の図のように変更すべく、調べました。

Facebookpage_001.jpg


参考サイト
Facebookの「Likebox」を自由にカスタマイズ(ウルトラエル)
Facebookページをアピール出来るソーシャルプラグイン・Likebox(いいね!ボックス)をオリジナルデザインに変更する方法(かちびと.net)

1.まずは、FacebookページのIDを調べます。Webデザイン学科のFacebookページはURLが設定されているので、IDを調べる方法を探します。

FacebookページIDを簡単に確認する方法(HAPPY*TRAP)
http://graph.facebook.com/[ユーザーネーム(ユニークURL)]
ということなので、

http://graph.facebook.com/trident.webdesign

で確認できました。

2.APIキーを取得するため、Facebookアプリを新規で作成します。
https://developers.facebook.com/apps/

アプリの名前を決めて、
Facebookpage_003.jpg


セキュリティチェックをすると、
Facebookpage_004.jpg


App IDと書いてありますが、これがAPI Keyとなります。
Facebookpage_005.jpg


3.表示したい場所にコードを埋め込み、ページID、(いいね!している人の)アイコンの表示数、記事の表示の有無(1で表示)、幅、高さを設定します。

<div id="fb-root"></div> <script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script> <script type="text/javascript">FB.init("APIキー");</script> <fb:fan profile_id="ページID" stream="1" connections="アイコン表示数" width="" height="高さ" css="http://XXXXXX.com/XXXX/style.css?1"></fb:fan>

そして、効かせたいCSSファイルのURLパスを記入します。拡張子.cssの後ろの?1は、キャッシュが強いのでうまくCSSの変更ができないということで、更新ごとに数字を変えていきます。?1...2...3.....9と。※2桁は効きませんでした。
CSSのプロパティは、Firebugや要素の検証を使用して探して書き換えていきます。!importantもそんなに使いませんでした。

4.最後にこのコードを、HTMLの<body>のすぐ後ろに入れAPP IDを入れて完成。

<script src="http://connect.facebook.net/ja_JP/all.js"></script>
<script type="text/javascript">
FB.init({
appId : 'APP ID入れる',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
</script>

「いいね!」を「Like!」など英語にしたい場合は、ja_JPをen_USに変えます。
もっと簡単にサクサク〜っと変更できると思っていたんですが、かなり手間取ってしまいました。
検索フォーム
プロフィール

担当: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年生進級展2018「線の群生」終了しました。
1年生進級展「WWW(Welcome to Web World)」を開催しました。
1年生進級展「お母さんの2度見展」を開催中です。
「うぇ~~~~~~~ぶ2016」終了しました。ご来場ありがとうございました!
「うぇ〜〜〜〜〜ぶ!!」終了。ご来場ありがとうございました!
<コンテスト>
信州アプリコンテスト0 [ゼロ] 2019 KDDI賞受賞!
第5回 ソレコン☆ポスコン特別賞受賞
「第1回 専門学校 HTML5作品アワード」技術賞を受賞しました!
NCF2017でグランプリを受賞しました!
信州アプリコンテスト0 [ゼロ] KDDI賞受賞!
NCF2014(スマホアプリ開発テーマ2) 準グランプリ獲得!
最優秀賞!HTML5スマートアプリ&クリエイティブコンテスト
NCF2013グランプリ受賞!!!
<Webサイト制作>
ミス・ユニバース・ジャパン岐阜大会公式Webサイトを作成しました。
建設業入職者増加プロジェクト発表会
Webサイト制作発表会2014
99eagle Webサイトリニューアル公開
99eagle Webサイト公開
「Bloom*Block」Webサイト公開
セントレア「日本の四季 キルト展」Webサイト公開
かっぱ商店街サイト制作
ココストア共同企画「アサココ!」公開
<技能五輪全国大会>
第56回技能五輪全国大会(ウェブデザイン職種)敢闘賞受賞!
第53回技能五輪全国大会(ウェブデザイン職種)その3
第52回技能五輪全国大会が開催されました。
銀メダル・銅メダル獲得【第51回技能五輪全国大会】
第49回技能五輪全国大会結果発表 敢闘賞受賞
第48回技能五輪全国大会結果発表(銀賞・敢闘賞受賞)
第47回技能五輪閉会式 & 結果発表
第46回技能五輪
<若年者ものづくり競技大会>
第14回若年者ものづくり競技大会
第11回若年者ものづくり競技大会 2日目&結果
第9回若年者ものづくり競技大会2日目(競技日)
第8回若年者ものづくり競技大会2日目
第7回若年者ものづくり大会
第6回若年者ものづくり大会2日目
第5回若年者ものづくり大会
第4回若年者ものづくり競技大会閉会式
月別アーカイブ
タグリスト 改

トライデントコンピュータ専門学校Webデザイン学科業界研究WCAN技能五輪ウェブデザイン職種若年者ものづくり競技大会ウェブデザインWebサイト2013映画ECCコンピュータ専門学校ポートフォリオ名古屋学生ブログWebデザインWinter2009Webサイト制作2011WordPress1年生進級展技能五輪全国大会JavaScript礒田優かっぱ商店街入学式アクアリングオープンキャンパスa-blog2014cmsWordpressライトニングトーク矢野りんWebNagoya卒業制作展CSS体験入学合同企業展テンプレート作成面白法人カヤックCGイラスト学科若年者ものづくり大会Web制作会社瀬川大勝卒展卒業制作Autumnホームページ・ビルダーアクセス解析石黒雄介SummerIIJ2010大阪HCD第48回技能五輪全国大会html5杉本拓也inウェブデザイン技能競技大会GIOHTML5mini佐藤歩2015閉館日学生インタビューココストアAdobeJapanあいちカレーラーメンコンテストFlash名古屋駅東京研修2012ウェブデザイン技能競技会企業訪問セントレアプロジェクトWebデザインギャラリー夏季閉館日トライデント祭りBananaAd愛知県制作合宿NEXTCentOSSpringラーメン水野裕太フォトアルバムgifアニメサイバーエージェント上村水月99eagle専門学校COMMUNICATIONグリッドレイアウト学生マール夏休みdisplay:gridGridLayout成田篤紀Google情報デザインWebワークショッププレゼンテーション田中睦翔CSS3情報デザインフォーラムウェブデザイン技能検定ブログパーツ北濱大輔Webクリエイター能力認定試験林田実樹2018jQuery人間中心設計particle和みCalendar飯田淳介幕張メッセ熊谷佳紀謹賀新年Yahoo!Japan5T(ファイヴティー)アップルップルフロントエンドエンジニアAdventマークアップエンジニアスマートフォンlegend要素愛知県選手団UXinput要素fieldset要素Forumたこ焼きform要素label要素textarea要素option要素1年生作品展うぇーぶまぼろしAWARDスマホアプリNTTドコモ東海output要素select要素長屋めぐみcanvas堀尾真衣カリキュラムSEO空気人形CMSjbstyle名古屋開府400年祭MarkupiPhone結果発表トライデント合同企業展笈瀬本通り写真カメラモンキーワークスワークショップF-site豊田市美術館グループ制作Apple企業課題茂森仙直2008鷹野雅弘StoreWebリテラシーWordCamp導入授業ディプロスアサココ!情報デザイン基礎DTPWORLDイラストマップトライデントFICCアンティー・ファクトリー静岡ポートフォリオサイトコミュニケーションデザインワークショップ阿部淳也真鍋大度岩手県ウェブアクセシビリティ作品集モリサワレイアウトLikeBox名古屋市科学館就職活動知多みるく戸田芳裕ナゴヤドーム中日ドラゴンズ名商連WEBサイト制作者のためのHCDの理解in名古屋CSSNiteAnalytics卒業式会社訪問メ~テレビジュアルエディタ産学協同PluginWordFes塚本碧2017Runstant信州アプリコンテスト[ゼロ]Webデザイナーサーティファイ鈴木優太ドラマ株式会社LIG水野怜美エイチーム久保怜也進級展アプリコンテスト学習出張講座沖縄初期設定ウェブDeBLOG情報デザイン教育勉強会北川パーヤンWorld)おかだよういちペルソナ/シナリオ法ヨウイチ長谷川恭久ウェブリテラシー協会第一回セミナースーパーエレメンツtoSalsaイラストコンテストデュエル・マスターズ浅野智ペルソナ&シナリオ法森川眞行会社見学鎌倉箱根合宿横浜中華街慶華飯店新横浜ラーメン博物館AndThen横浜デジタルアーツ専門学校3校合同発表会クリ博就職フェスタ日本電子専門学校WasThereWebデザインスペシャルデーNIKE小野裕子ストリートビューJIHYEJAPANインターネットクリエイティブアワードYahoo!カラーHEOブランディングホ・ジヘAutumin世界のCMフェスティバルITホワイトボックス藤井英一ナゴヤデザインウィーク2009イークリエイトUNIQLOCK是枝裕和監督人喰いの大鷲トリコPHP勉強会大富豪スコアシート東京ゲームショウ2009HCDプロセス韓国ロゴ公募FITCCREAMごはんとFlash教育勉強会#infoedu期末テストコピーライティング夢プロジェクト2009・成果報告会マークアップ演習マクロマリオネットwonderflKyotodotFesFlash-Gamesゆるキャラ映画のオープニング閉会式脆弱性なんと読む?山崎デザイン事務所志維ITCIRCUS柴乃櫂人広島弁iPhone4TOCAndrioid名古屋グランパスチタハン10WEBサイト制作者のためのHCD(人間中心設計)の理解シナリオペルソナ名古屋メディアボンドアクセシビリティサーバーIA金シャチ商店街商店街1→10design細川太郎タロヲAWARDS笈瀬本通愛知商業高校GAUltimateD3.js名チャリ名駅経済新聞名古屋サイト改善研究会スクラップブック中級編商店サイト制作プチ・フレーズポスターデザイン・コンペディションCODE名古屋クリエイターフットサルグラフィクデザイン出身高校三蔵みの治商店TwitterYORKE.ビジュアルデベロップメント名古屋おもてなし武将隊武豊アニメーションフェスティバルTAFFWCAN46武将都市ナゴヤ求人新世界道頓堀NCF2017Webアプリ堀川友章WWW(Welcomeギレン総帥浜松安藤福みつ餃子大沢たかおネスカフェゴールドブレンドofunoplusContents松坂屋美術館技能五輪予選WEBサイト制作者のためのHCDの理解伊藤頼子プロトコル分析Tableスタジオジブリ・レイアウト展知多半島フナ犬フォントおじさんミス・ユニバース・ジャパン岐阜大会ポートピア名古屋プロ野球安藤志維堀川友章関口浩之IA2010キックオフセミナー第4回アックゼロヨン・アワードCollegeFLEXFLASHCBCNightTBSSakae新入生オリエンテーションわたし、定時に帰ります。LIGMAX祐司PhotoshopCS6愛知県美術館アンドリュー・ワイエス髙橋茜音STUDIOデザイナーのためのプログラミング入門PHP佐藤可士和中村勇吾西村真里子線の群生2020新卒プレゼン演習WCAN×CSSNite広告批評アートアニメーション武豊町TAFF'09ActionScript基礎HTML+CSS基礎企業見学CS4サムライTEXTUREDesignデッサン造形基礎日本総合ビジネス専門学校株式会社MTGデザイン鳥取砂丘冬休みライフスタイルHPデザインデザインコンテスト仙直茂森2019ソレコン☆ポスコンコンテスト01CONTESTウェブデザイン部門足立丈也、平子卓哉、増田隼也カンファレンスeat信州アプリコンテストゼロ落合祐介THEWEB杉浦麻紀茜音丹下紘希松本渚株式会社スタメンXRAY2008Winter株式会社アンティー・ファクトリーSIGGRAPH鳥取VideopuppetryASIAWebDirectionEast'08デザインのへそQubibiArtlessNamW+KTokyo(+CRUZ)Stefan髙橋HelveticaSagmeisterFINALFANTASYVRカルタOculus旭食品サンプル製作所食品サンプル学科富岡聡電信柱エレミの恋ウサビッチカナバングラフィックスGOActionScript第56回黒い太陽ウルトラ展ヤノベケンジライブペイントインターネットスキル認定普及協会ヱヴァンゲリヲン新劇場版:破西田幸司国家検定コマ撮りアニメソバットシアターescalatorアニメーションMozorama新城高校animationモーション演習冨田伴成増田悟CG・イラストコンテスト後期青山高校アイディグラフィックス学生参加CMS特集東京ゲームショウ2018今井佳子グラフィックデザイン入賞ガンダム出前授業沖縄県pictureあけおめBlogUTZOOMLabuat平成31年「ヤノベケンジ-ウルトラ」展GENOウィルスメーカー・ブランドワークスコーポレーション株式会社サイバーエージェントTokyoCOMPLETECHILDRENADVENTVIIFigmaツール桝田草一牧野史門UIデザインセキュリティコーヒー用品cyma斉藤洸貴CALENDARUNIQLOEC事業第56回技能五輪全国大会sourceカスタマイズセミナーsrcset荒俣宏NextDoor前川元成山村浩二デコクレ□□□switch日本ファルコムファルコム音楽フリー宣言音楽ゲームLPO株式会社アクアリング本州最南端串本八鬼山熊野古道那智の大滝大門坂アロチ本家和歌山中華そば熊野三山マカベン名古屋マークアップ勉強会河地芳明AO入試中村健太道家陽介ランチ石原愛実tableテーブル宇野剛志丸高丸田屋青山敬司山田拓生加藤ひとみ西岡克真IA/UXプラクティス平野秀幸津田直明制作実績坂本貴史カークスヴィルAnimation柏木祥太スパルタキャンプ岩出本店名古屋市営地下鉄青空学区AO特別授業沼田啓助concrete5プログラムクイズNTTドコモ東海支社NCF2013駅麺通り美術大学涼麺list-style-typeモテ声ボーダーlist-itemdisplay芸術大学クイズ麺屋ココイチフジ家55Resurgenceさかなや麺やOKカレーラーメンIndependenceDay:高橋雅人HTML5スマートアプリ&クリエイティブコンテストKDDIDesignergoogleGWDF81教室parseInt()parseFloat()栗山聡一CodePen備忘録トライデント合同企業説明会JSBin卒業研究制作展最優秀賞ジョルテjsdo.itCodeply10日でおぼえるLinuxサーバー入門教室JSFiddlePlunker結団式アイチータバイドゥアクセシビリティからはじめる、WebサイトのUXデザイWebアクセシビリティVelocity.js建設経営者倶楽部ワクワク建設タウン熊﨑彩平野健太郎第53回ScrollMagicScrollmagicワイヤーフレーム木村哲朗うぇ~~~~~~~ぶウェブアートデザイナー仕事夏麺フェア八木智章竹中民男UIクリスマスポートフォリオアイデア帳アクティビティシナリオ源賢司UXデザインDmm.comKaizenPlatform14グロースハッカーグロースハック岡田陽一高校採用担当者の心に響く3DCG東京コスモ松田洋樹CGスペシャリストFlexibleBoxFlexbox味仙森田霞レスポンシブWebデザインHTMLbutton要素datalist要素keygen要素WebディレクターWeb制作のおしごと麺の匠オリエンタル第52回技能五輪全国大会Webプログラマーoptgroup要素アイテムカンパニーネイルサロンマウア授業紅茶専門店Liyn-an2016坂本邦夫原一浩type属性親孝行新年のご挨拶WF1でBLOG職業実践専門課程出席率学位新入生2015年度HighlighterSyntaxCrayonインターンシップスマートフォンサイトUI図鑑合宿懇親会NCF2014名古屋駅麺通り合同制作CSS3&jQueryで作る専門士合同制作合宿晴れやか嵐が如くDTPの勉強部屋ablogcmsWCAN2017SpringProxy伊達千代北岡弘至3JAPANWORLDCUPMagnumトライデントカレッジ佐藤洋介ぬいぐるみのラパンKtaistyleCustomSmilies卒業制作・研究発表会2011英国王のスピーチUntitled!!!!!!!!学校ターミナルバルサマンプロジェクションマッピングSyntaxHighlighterプラネタリウムv4.0.1ライアン・ウッドワードES2015鈴木神戸国際展示場ES6マーサ・グレアム5月11日愛知淑徳大学みつけもの恵那市岩村ドラゴンゲートDRAGONGoogleロゴゴールデンウィークGATE絵文字服部友厚大西健太田中稚妃呂梅澤朝樹横浜デジタルアーツLazyLoadSlimbox2for株式会社エイチーム衣台高校尾鷲高校中部国際空港株式会社夏休みの課題CODEポスターデザイン・コンペティションブラザー工業株式会社ノートPC貸与GoogleAnalytics石井研二カメラワークウェブリテラシー協会JISキルト展日本の四季中部国際空港GAINAX鈴木雄太愛知県立芸術大学スタジオディテイルズ円JOY!map卒業・修了制作展SUBARU放課後のプレアデスFLV8341-3:2010XFLAVER3.0名古屋市中村区キルターズフェスティバル2011山川綾那笈瀬本通商店街神戸ECMAScriptみんなのICT再進学驛麺通りFacebook学園祭佐藤ねじ情報系就職東京たこ焼きパーティWeb制作合宿Muse画像をチェックボタンにする張山大祐JQueryInstagramインスタグラムいな世醐りょう木下健太郎Three.js第51回技能五輪全国大会Webデザイン演習学生作品集Monacaジムナストコロン日清食品グループプラネタリアン水曜日のカンパネラタカガールサイトあいちトリエンナーレ2013そこにいない。展田代豊たにぐちまことプレゼンRhizomatiksinspiredPARTYPerfumeby第50回結果ドコモWebプログラミング初級講座2011年度マイクロソフトdocomoFutureHTMLCollectionappendChild()Station迎春敢闘賞ゲーム大賞アマチュア部門東京ゲームショウお母さんの二度見展Ohanaメールマガジンツインメッセ静岡静岡県ロゴマークNodeListNHNベースキャンプ名古屋SHOWGAMETOKYO料理Facebookページ長野IllustratorSVG東京ゲームショウ2012第7回若年者ものづくり競技大会Teamイマジンカップ美大BloosumBloom*Block芸大marker尾花大輔小林信次

メールフォーム

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

東京コスモ
トライデントコンピュータ専門学校
教務課のびのび日記
Pagetop