disable weird scroll bar in IE7

just a note for disabling the weird scrollbar in IE7

add the following css


html {
    overflow:auto;
}

facebook sharer 使用詳解 之 description, title 和 image

(本文最後檢閱日期 - 27th August, 2015)

facebook sharer 使用詳解是本部落格的人氣文章
謝謝各位的支持

若各下新接觸facebook sharer(後稱sharer) 的話
您在跟著本文實作時或會遇到一些困難,
這時不妨先到上述連結了解一下sharer是怎樣運作

今天繼續說明如何設定sharer其他重要的屬性

---

og:description

設定方法為 <meta name="og:description" content="blar blar blar" />
sharer 會先看看html裡有沒有設這個meta
  有:用這個meta 裡的content 屬性
  沒有:在html 裡找第一個多於120字(不包括120)的 <p>

兩個都找不到的話, 那description就會設為空白
這就是為甚麼通常share 出去的description 怪怪的原因

---

og:image

設定方法為 <meta name="og:image" content="http://absolute.image.path"/>

可設多張, 多copy一次就可

圖的url一定要absolute path 而且是published url

聽起來好像好簡單，那你就錯了

不要相信debugger裡og:image的結果, 那是騙你的
用來參考倒是可以的, 一切要以真正sharer 的結果為準

長氣點說多次, 若遇上甚麼問題, 請參閱facebook sharer 使用詳解

這裡sharer 會這樣做:

先看HTML裡有沒有設og:image

    有:圖片是否大過200x200? (不包括200)

      是:sharer會用這個圖

      否:sharer不會使用這圖片, 請繼續看下去

    否: 忽略此圖片, 並找找網頁裡有哪些 *有夠大 的<img>,

      如有: 放入thumbnail list 讓用家選擇

      沒有: 這個分享不會顯示任何thumbnail

* : 夠大的定義目前還未測試出來, 總之是大圖片

除了og:image 已證實必定要大過200x200外 (deleted on 18th June, 2015 -- its not always true)

其他由HTML extract出來的暫時都未太清楚甚麼size才會當做thumbnail,
簡單來說夠大的都會有機會

測試所得, sharer會比較喜歡找放在開頭的圖

---

og:title

這個是最簡單最正常的屬性

設法為<meta name="og:title" content="bi li ba la"/>

sharer 會先看有沒有設og:title

  有:用這個為title
  沒有:
     sharer會找<title>當title
     若<title>都沒有的話就會直接把網址當成title

文章如能幫到各下的話, 請留個comment讓小弟知道
謝謝

solution of strange extra width on 100% width input on iphone

given the following html and css:

html:

<div class="formWrapper">
 <input id="myName" type="text"/>
 blar..
 blar...
 blar....
</div>

css:

#myName {
 width:100%;
 border: 1px solid white;
}

as the css speaks, it draws a white border gracefully in many browsers such as chrome, Firefox, and android 4.0.4 browser.

however it fails in iphone, it adds some extra width to it.

with some research, there is a messy but a good solution below:
first, we need to add a wrapper to our textfield

<div class="formWrapper">
 <div class="border"><input id="myName" type="text"/></div>
 blar..
 blar...
 blar....
</div>

next, we add border to this wrapper instead of <input >

#myName {
 width:100%;

 /*we remove all styles on input*/
 margin: 0px;
 padding: 0px;
 border: 0px;
}

.border {
 border: 1px solid white;
}
 

and now it looks nicely in iphone and other browsers~~
this method works in chrome, firefox, safari and also works in IE6 IE7 & IE8

leave me a comment if it helps you~