[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，把網址打進去，大致上都可以知道原因。

Lin on NYTimes Front Pages

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

恭喜!!!

[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());
        }
    }

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



順便有圖有真相一下。

[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，不然不會動。