Facebook like-box 和 timeline 動態大小改變 (HTML & CSS)

請將以下兩個CSS的語法，複製貼上於自己所屬的CSS Style之中：

Facebook Like-Box 註冊網址：
https://developers.facebook.com/docs/plugins/like-box-for-pages
依照網頁中的指示操作，應是是很淺顯易懂的，這邊就不多加贅述。

CSS 第一個：
.fb-comments, .fb-comments iframe[style], .fb-like-box, .fb-like-box iframe[style] {width:  100% !important;display:block;z-index:2000;position:relative}

CSS 第二個：
.fb-comments span, .fb-comments iframe span[style], .fb-like-box span, .fb-like-box iframe  span[style] {width: 100% !important;display:block;z-index:2000;position:relative}

再來將自己從Facebook developer中，取得的like-box API code置入自己想要顯示的HTML網頁<body>之中。

<div class="fb-like-box"        data-href="自己的紛絲頁短網址"         data-width="293"         data-height="350"        data-colorscheme="light"         data-show-faces="false"         data-header="false"         data-stream="true"         data-show-border="false"></div>

執行結果：
由於CSS3的設定，like-box已經不會再只是僵硬的顯示293 * 350的尺寸；而是以自己所屬的parent的大小變動，做出動態的大小改變。

留言

張貼留言

這個網誌中的熱門文章

7-ELEVEN 電子發票明細查詢方式

圖片
想必大家都會有想要知道，自己的消費明細到底有那些。例如：剛剛在7-ELEVEN中買了那些東西。 但是，往往現在台灣的電子式發票都只有小小的一張，未必會有消費明細列舉如下圖： 除非你很明確的有在計算你買的項目是多少錢，否則從圖中是無法直接知道你剛才買了甚麼，你只會知道你花了多少錢(如圖，74元)。 不過沒關係。大家的智慧型手機中，一定都會有QRcode相關的掃描解讀APP。各位可以透過這些APP，輕鬆地知道你的消費明細，方法如下： 1. 打開你愛用的Bar-code或是QRcode掃描器。 2. 掃描電子發票中，左下角紅框中的QRcode。 3. APP解讀出信息會類似下圖。 4. 從文字中即可知道你所購買的所有品項囉!!
閱讀完整內容

Java 使用 regular expression 正則表達，過濾特殊字元，反斜線處理重點

最近，挑戰我比較不熟悉的正則表達。發現返斜線常常是我會忽略的地方，所以特意嘗試了，並得出下列心得： 當我想要去在我的string中，過濾掉單引號(') 雙引號(") 左右中括號([ ]) 左右大括號({ }) 斜線(/) 以及反斜線(\) 時要怎麼做? 下面是java做validation的範例 e.g. Pattern(regexp = " [^'\"{}\\[\\] \\\\ /] *", message = "名稱不得有'或\"或\\字元") 在 [ ] 裡面的^表示negative的意思，\" 是為了跳脫 " 這個字元(因為這是java字串的特殊字元)。 \\是為了跳脫\這個字元(理由同上)，所以 \\[ 是為了跳脫 [ 這個regular expression裡的特殊字元。 若要使用「反斜線」呢，理所當然就是 \\\\ (四個反斜線) 以下，是我過去常需要使用，因此蒐集而來的string過濾正則： for e-mail : Pattern.compile( "^[_A-Za-z0-9-\\+]+(\\.[_A-Za-z0-9-]+)*@[A-Za-z0-9-]+(\\.[A-Za-z0-9]+)*(\\.[A-Za-z]{2,}) quot; ) for 只允許有文字、數字(不可以有space): Pattern.compile(^[A-Za-z0-9]+$) for 不可以有空格: Pattern.compile("[^\\s*\t\r\n]+$); for 手機號碼(台灣)Pattern.compile("^09\d{2}-?\d{3}-?\d{3}$); for 繁體中文: [\u4E00-\u9FA5]漢字, [\uFE30-\uFFA0]全形字元
閱讀完整內容

Ubuntu GUI中，無法啟動WIFI連結解決方法

圖片
最近常發現，我的Ubuntu常常開機後，WIFI無法正常開啟使用。開啟右上角工作列的WIFI圖示，永遠都沒有裝置被掃描到。最後我找到一個快速解決的方式，希望對各位也有用處。 Step 1. 打開你的Terminal變且sudo su進入最高權限身份 Step 2. 輸入  gedit /etc/NetworkManager/NetworkManager.conf 開啟檔案編輯此檔。 Step 3. 將底下的managed= false 改成 true後，除存關閉編輯器 Step 4. 最後輸入指令 service network-manager restart，右上角的圖片就會有啟動反應囉！
閱讀完整內容