Wednesday, February 29, 2012

[FB] Like Button@Blogger 相關問題

最近發現有些人在問他Facebook按讚的按鈕掛掉了,但是找不到原因,語法也沒錯,所以很納悶。

剛好這問題我之前blogger範本被我手滑換掉的時候也遇過,所以順便來回一下。

首先,可以先確認一下自己的Facebook Social Plugins語法是否正確,你可以參考Facebook Like Button的範例語法,若你是一年前拿的語法,跟現在的語法也許有出入了,這邊可以先確認一下。

然後,確認自己的html內有掛上適當的Open Graph Tags,也就是meta內那堆og:title ...etc ,FB Like會需要下列tags:
og:title -
在Blogger範本這樣寫
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<meta expr:content='data:blog.title' property='og:title'/>
<b:else/>
<meta expr:content='data:blog.pageName' property='og:title'/>
</b:if>
og:type - 我是打website <meta content='website' property='og:type'/>
og:image - 自己塞張圖片連結上去...
og:url - Blogger上可使用<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
og:site_name - <meta expr:content='data:blog.title' property='og:site_name'/>
fb:admins / fb:app_id - 照舊
如果看不懂可以看我blog的原始檔去對照。

這樣應該就可以用了,如果還是不行,可以用Facebook Debugger,把網址打進去,大致上都可以知道原因。

Wednesday, February 15, 2012

Lin on NYTimes Front Pages

nytimes

林書豪投出關鍵一球,尼克隊六連勝,New York Times也快速的上了頭版新聞 At the Buzzer, It’s All Lin

恭喜!!!


Friday, February 10, 2012

[C#] ASP.NET Html Reducing 網頁瘦身

最近抽空在看如何讓網頁讀取更快速,其中一個小部分是縮小HTML本身的檔案大小,這項還蠻簡單可以達到的,也不需要裝什麼額外的套件,於是就先實作了這塊,我在專案內測過了大部分的頁面,效果還不錯,大約可以減少25%~30%的檔案大小,但是需要注意的是,一些JavaScript會用<--(多行)-->包起來,這種語法就需要修掉,不然其內的js就會被當作註解砍掉了(這其實也可以另外抓出來處理就是)

總之,跟大家分享這個還不錯的方式,我是直接在 master page 去 override Render ,所以只要有吃 master page 就會受到影響,使用上請各自看情況去運用吧,語法如下。

//html reduce
    protected override void Render(System.Web.UI.HtmlTextWriter writer)
    {
        Regex REGEX_BETWEEN_TAGS = new Regex(">\\s+<", RegexOptions.Compiled);
        Regex REGEX_COMMENT = new Regex("\\<![ \\r\\n\\t]*(--([^\\-]|[\\r\\n]|-[^\\-])*--[ \\r\\n\\t]*)\\>", RegexOptions.Compiled);
        Regex REGEX_EXTRA_SPACE = new Regex("\\s+", RegexOptions.Compiled);
        Regex REGEX_COMMENT_SINGLE = new Regex("\\/\\/\\s.*\\r\\n", RegexOptions.Compiled);
        using (HtmlTextWriter htmlwriter = new HtmlTextWriter(new System.IO.StringWriter()))
        {
            base.Render(htmlwriter);
            string html = htmlwriter.InnerWriter.ToString();

            html = REGEX_COMMENT_SINGLE.Replace(html, string.Empty);
            html = REGEX_BETWEEN_TAGS.Replace(html, "><");
            html = REGEX_COMMENT.Replace(html, string.Empty);
            html = REGEX_EXTRA_SPACE.Replace(html, " ");

            html = html.Replace("//<![CDATA[", "//<![CDATA[" + Environment.NewLine);
            html = html.Replace("//]]>", "//]]>" + Environment.NewLine);

            writer.Write(html.Trim());
        }
    }

若有更好或更完善的做法也請跟我說,感謝。

HtmlReduce

順便有圖有真相一下。



Tuesday, February 7, 2012

[JS] 用JavaScript抓取Enter事件並按下按鈕

有個需求是要在條碼機讀到資料時,就查詢該筆資料....

條碼機送出的資料是一串文字加一個 enter ,原本網頁要做到 enter submit form 是很簡單的,沒記錯 action 設一下就好,但是有的時候不能改 form action,只好用 js 去克服了,原本寫在 .net 上的版本我是在 textbox 上加 onkeypress 去觸發事件,但是拿到blog上我就改用jQuery以方便展示了。



上面是demo,下面是語法。

HTML部分
<input id="tbSearch" type="text" name="tbSearch"> 
<input id="btnSearch" type="button" value="按我" onclick="showtxt()"> 
<div id='showhere'></div>

JavsScript部分
$('.tbSearch').keypress(function(e) {
        var key = window.event ? e.keyCode : e.which;
        if (key == 13)
            $('btnSearch').click();
    });

    $(document).ready(function () {
        $('#tbSearch').focus();
    });

    $('#tbSearch').keypress(function(e) {
        if(e.which == 13) {
            $('#btnSearch').focus().click();
        }
    });

    function showtxt() {
        $('#showhere').text($('#tbSearch').val());
    }


記得要引用jQuery,不然不會動。