網頁

2014年10月27日 星期一

Google+學習筆記-Share info

在FB上分享內容有很多的方式也蠻完整的,但google+針對未登入並分享的機制就沒那麼完整,只知道不使用google+提供的button下,能用link的方式只有

https://plus.google.com/share?url=(urlencode link)

仔細查找,是看到文件https://developers.google.com/+/web/snippet/有提到,部分原文如下:
========================================
使用摘要程式碼時,請務必遵守《Google 服務條款》的規定。
1. Schema.org 微型資料 (建議使用)
如果網頁有加上 schema.org 微型資料的註解,則 +Snippet 會採用任何 schema.org 類型 所顯示的 nameimage 和 description 屬性。
<body itemscope itemtype="http://schema.org/Product">
  <h1 itemprop="name">Shiny Trinket</h1>
  <img itemprop="image" src="{image-url}" />
  <p itemprop="description">Shiny trinkets are shiny.</p>
</body>
2. Open Graph 通訊協定
如果網頁包含適用於標題、圖片和說明的 Open Graph 屬性,系統就會予以採用,以產生 +Snippet。
<meta property="og:title" content="..." />
<meta property="og:image" content="..." />
<meta property="og:description" content="..." />
3. 標題與「description」中繼標記
如果網頁的 <head> 元素包含 <title> 和 <meta name="description" ... /> 標記,則 +Snippet 會採用標題,並使用 Description 中繼標記的 content 屬性產生摘要說明。至於縮圖圖片,則系統會透過分享框嘗試尋找網頁上的適用圖片。
<title>...</title>
<meta name="description" content="..." />
4. 網頁內容的最佳猜測 (不建議使用)
如果網頁都沒有提供前述資料,則 Google 會剖析網頁,嘗試找出最適用的標題、說明和圖片。
========================================

雖然文件https://developers.google.com/+/web/snippet/中寫會用Schema.org,但實際使用發現要是有找到<title>還是會優先使用,所以最快的方式是在head中提供title,縮圖可以使用itemprop="image"加在img tag中。另外,description不管怎加似乎都不放不進去,這是目前覺得奇怪之處。

參考網址:
https://developers.google.com/+/web/snippet/
Getting started with schema.org

2014年10月25日 星期六

jqplot學習筆記-x軸文字超出範圍

jqplot是很好用的chart library,但最近遇到個問題,如下圖:

可以看到x軸的日期超出了黃線外,看半天它的說明文件都不了解,解法異常簡單,他在init時會如下使用:
$.jqplot('xxx',....

將id為xxx的div(或其他你自己設定的目標)的style設定max-width即可,像我的範圍是1196,就設定最大1160。如下:
<div id="xxx" style="max-width: 1160px;"></div>

這樣就行了。

參考網址:
jqPlot Options
jqPlot-core
jqplot, remove outside border