Thứ Sáu, 18 tháng 3, 2016


Chào các bạn!

Đã lâu mình không viết bài trở lại, chắc cũng 3 tháng rồi :D nhưng traffic của blog vẫn đều đều ~400 bạn truy cập/ngày. Cảm ơn các bạn đã tin tưởng và ủng hộ blog, mình hứa sẽ cho ra thêm nhiều bài viết hay và bổ ích.

Gần đây mình có nhận được một yêu cầu của một bạn theo dõi blog, bạn ấy muốn làm một chương trình C# để thay đổi giờ hệ thống.
Hôm nay mình sẽ hướng dẫn các bạn viết ra chương trình đó. Nghe có vẻ rất dễ đúng ko?




Để thay đổi System Time bạn phải can thiệp vào hệ thống, trong C# bạn có thể dùng cách P/Invoke hàm SetSystemTime() theo WIN32 API có sẵn.
Đầu tiên bạn chuẩn bị cho mình một struct như sau:
private struct SYSTEMTIME
{
public ushort Year;
public ushort Month;
public ushort DayOfWeek;
public ushort Day;
public ushort Hour;
public ushort Minute;
public ushort Second;
public ushort Milliseconds;
}

Struct này tương tự theo cấu hình của class DateTime mà giờ hệ thống đang sử dụng :D
Sau đó các bạn thêm extern method này vào:
//Method set giờ hệ thống

[DllImport("kernel32.dll", SetLastError = true)]
private extern static uint SetSystemTime(ref SYSTEMTIME lpSystemTime);

//


Đây là method sử dụng thư viện động "lõi hệ thống 32" (kernel32.dll) của windows, và gây những tác động lên nó. Lưu ý để sử dụng DllImport thì bạn cần thêm namespace sau:
using System.Runtime.InteropServices; 

Namespace này dùng để chứa class DllImport - dùng chỉ ra rằng những phương thức này được tiếp cận bởi những DLL không được chương trình quản lý với dạng 1 điểm đầu vào tĩnh (static entry point)

Sau khi using namespace, thêm method, các bạn bắt đầu gọi method đó. Các bạn có thể tạo 1 button để xử lý sự kiện onClick cho button đó để gọi hàm :D
private void submit_btn_Click(object sender, EventArgs e)
{
//Tạo instance
SYSTEMTIME s = new SYSTEMTIME();

//Gán các giá trị (ở đây mình gán ngẫu nhiên)
s.Year = (ushort)2009;
s.Month = (ushort)12;
s.DayOfWeek = (ushort)3;
s.Day = (ushort)4;
s.Hour = (ushort)5;
s.Minute = (ushort)6;
s.Second = (ushort)7;
s.Milliseconds = (ushort)8;

//Gọi extern method đã thêm ở trên và xem kết quả :D
SetSystemTime(ref s);
}

Các bạn có thể dùng 1 Control DateTimePicker để lấy số liệu nhập vào, phân tích ra và gán cho giờ hệ thống
//Lấy dữ liệu của control DateTimePicker xuống lưu vào biến
DateTime result = dateTimePicker1.Value;

SYSTEMTIME s = new SYSTEMTIME();

//Phân tích ra và lưu vào struct
s.Year = (ushort)result.Year;
s.Month = (ushort)result.Month;
s.DayOfWeek = (ushort)result.DayOfWeek;
//v.v...

Cuối cùng các bạn build chương trình ra, tìm đến thư mục */obj/Debug. Chạy file thực thi *.exe với quyền admin (Run as administrator). Lưu ý phải chạy với quyền admin thì mới thành công, vì các hàm của WIN32 API cần quyền admin để thay đổi/can thiệp vào dll hệ thống


LƯU Ý

Một số bạn khi thay đổi ngày thì chương trình chạy ok, nhưng khi thay đổi giờ thì chương trình chạy sai. Đó là do hàm SetSystemTime() của Win32 API nhận vào giá trị UTC, rồi tự convert lên Local Time (+7). Nên chương trình mình sẽ sai. Các bạn tham khảo giải pháp Work around của mình. Các bạn nào có ý hay hơn hay inbox cho page mình nhé :D 


_______________________________________________________________________

Đừng nên làm những chương trình thay đổi giờ hệ thống như thế này, bởi vì nó sẽ:

1) Làm phiền người sử dụng, nếu 1 chương trình mình dùng mà làm thay đổi giờ hệ thống máy tính thì cực kì khó chịu
2) Có thể làm break các ứng dụng khác, làm thay đổi thông tin trial của một số phần mềm.

Chúc các bạn thành công!

Thứ Năm, 10 tháng 3, 2016

Styling Broken Images

Những hình ảnh lỗi xấu xí.

This image is broken! Ugly, isn’t it?

Nhưng chúng không nhất thiết phải như vậy. Chúng ta có thể sử dụng CSS thiết lập kiểu dáng vào phần tử <img> để cung cấp một trải nghiệm tốt hơn so với mặc định.
Read More

Thứ Bảy, 5 tháng 3, 2016

Shop trên Facebook là một tính năng được Facebook thử nghiệm đã lâu và hiện tại đã trở thành tính năng chính thức. Bất kỳ ai cũng có thể tạo Page và tích hợp Shop vào để kinh doanh online. Trong bài viết này, tôi sẽ hướng dẫn các bạn cách tích hợp và thiết lập cơ bản cho shop.

Tạo Shop trên Facebook

Nếu bạn chưa có Page thì nhấn vào đây để tạo trước nhé!

Thêm Shop vào Page của bạn


Để có thể thêm Shop thì kiểu Page của bạn bắt buộc phải thuộc danh mục "Doanh nghiệp địa phương", "Cửa hàng", "Công ty" hoặc "Tổ chức".

Tạo Shop trên Facebook

Nếu Page nằm trong danh mục được hỗ trợ thì các bạn sẽ thấy liên kết "Thêm phần cửa hàng" dưới góc phải ảnh bìa của trang (ngay dưới nút Chia sẻ).

Thêm Shop vào Page Facebook

Các bạn nhấn vào nút đó thì một hộp thoại như hình dưới hiện lên:

Thêm Shop vào Page Facebook

Nhấn tiếp, Facebook sẽ hỏi bạn chọn đơn vị tiền tệ nào cho Shop. Các bạn có thể để mặc định (VNĐ) hoặc chọn Đô la Mĩ nếu muốn:

Thiết lập đơn vị tiền tệ cho Shop

Sau khi nhấn nút Lưu thì trang của bạn sẽ chính thức có thêm một tab mới là "Cửa hàng" (hoặc Shop nếu bạn dùng Facebook tiếng Anh).


Những thiết lập cơ bản cho Shop trên Facebook

Sau khi Shop của bạn được tạo, việc đầu tiên cần làm là thêm mô tả cho Shop. Mô tả này sẽ giúp mọi người biết bạn cung cấp mặt hàng gì. Hãy giới thiệu thật ngắn gọn và tổng quan!

Thêm mô tả cho Shop

Khi bạn đã có Shop thì nên sử dụng nút Kêu gọi hành động là "Mua ngay", nút này sẽ được Facebook trỏ vào Shop tại trang của bạn.

Thêm nút kêu gọi hành động

Công việc cuối cùng đó là thêm các sản phẩm vào Shop của bạn và bắt đầu kinh doanh trên Facebook thôi!


Chúc các bạn kinh doanh phát đạt!

Thứ Ba, 1 tháng 3, 2016

Get Full Size Thumbnail Blogger

Khi chia sẻ một liên kết lên Facebook thì thumbnail (hình thu nhỏ) sẽ được Facebook nhận diện tự động bằng cách quét trang hoặc do chính chúng ta chỉ định.

Trong Blogspot (Blogger) thì chúng ta sử dụng mã như sau:
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>

Và Facebook Bot sẽ thu được kết quả giống như này:
<meta property="og:image" content="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSgi2Pd1b9SKSZEKYInC5SMtRpUf6O9M33Lh1PAcdkzSNftwLXNYDBIDHa6ubPcb6oWy1jg_zqqej95AHYkpVIfb5DT5OxNSIQmuNGOp3LJzEY3ThFbjnkyrdaThZpGYnR-3aagwBncLFG/s72-c/get-free-xyz-domain.png" /> 

Vấn đề ở đây là ảnh thumbnail do Blogspot tạo tự động luôn được resize về kích cỡ 72x72, trong khi kích cỡ thumbnail chuẩn của Facebook khuyến cáo là 600x315.

Thumbnail

Sau khi tìm kiếm, tôi nhận ra có vẻ ngay cả Google và StackOverflow cũng chưa có câu trả lời cho vấn đề này. Do đó, tôi quyết định tự trả lời câu hỏi này.

Phân tích cấu trúc link ảnh của Blogspot


Vì dùng Blogger đã lâu, tôi phát hiện ra một điều khá thú vị trong một lần xem mã nguồn một template blogspot được chia sẻ trên mạng. Đó là các liên kết hình ảnh trong Blogspot có thể resize được bằng cách thay đổi vài kí tự trong URL.

Cụ thể, với URL trong đoạn mã trên:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSgi2Pd1b9SKSZEKYInC5SMtRpUf6O9M33Lh1PAcdkzSNftwLXNYDBIDHa6ubPcb6oWy1jg_zqqej95AHYkpVIfb5DT5OxNSIQmuNGOp3LJzEY3ThFbjnkyrdaThZpGYnR-3aagwBncLFG/s72-c/get-free-xyz-domain.png

Chú ý những ký tự sau: s72-c

Các bạn có nhớ tôi đã nói ở trên là thumbnail trong Blogspot được resize về cỡ 72x72 không? Ta có thể nhận ra mấy kí tự này có liên quan gì đó. Thử thay thành s200-c thì thấy:

Thumbnail

Nó đã to lên đúng không? Như vậy s200 tương đương với width=200px; height=200px. Nhưng như thế thì ta chỉnh kiểu gì cũng chỉ nhận được ảnh vuông??

Không sao, sau khi vọc vạch thêm chút thì tôi phát hiện ra điều thú vị tiếp theo trong cấu trúc ảnh của blogspot - ta có thể resize kích cỡ bất kỳ bằng cách sử dụng định dạng: wXXX-hYYY-c

Trong đó: XXX là chiều dài, YYY là chiều rộng. Tính theo đơn vị Pixel (px).

Như vậy, để có kích cỡ chuẩn của thumbnail khi chia sẻ lên Facebook. Ta sẽ sử dụng: w600-h315-c

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSgi2Pd1b9SKSZEKYInC5SMtRpUf6O9M33Lh1PAcdkzSNftwLXNYDBIDHa6ubPcb6oWy1jg_zqqej95AHYkpVIfb5DT5OxNSIQmuNGOp3LJzEY3ThFbjnkyrdaThZpGYnR-3aagwBncLFG/w600-c-h315/get-free-xyz-domain.png

Tạo thumbnail chuẩn cho Blogger

Với những gì ta đã biết ở trên thì áp dụng vào Blogspot như nào? Blogspot sử dụng biến data:blog.postImageThumbnailUrl để tự động lấy ra thumbnail từ ảnh đầu tiên trong bài viết. Chúng ta cũng không thể sử dụng JavaScript để replace các ký tự để tạo link ảnh chuẩn.

Nhưng ta có thể tùy chỉnh các ký tự bổ sung bằng cách:
<meta expr:content='"XXX" + data:blog.postImageThumbnailUrl' property='og:image'/> 

Sau khi render ra HTML sẽ có dạng:
<meta property="og:image" content="XXXhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSgi2Pd1b9SKSZEKYInC5SMtRpUf6O9M33Lh1PAcdkzSNftwLXNYDBIDHa6ubPcb6oWy1jg_zqqej95AHYkpVIfb5DT5OxNSIQmuNGOp3LJzEY3ThFbjnkyrdaThZpGYnR-3aagwBncLFG/s72-c/get-free-xyz-domain.png" /> 

Các bạn có chú ý thấy XXX nằm trước URL không? OK, vậy ta có thể tạo ra một proxy URL như:

http://www.example.com/proxy.php?img=[Thumbnail_URL]

Nói tới đây chắc các bạn đã đoán ra tôi định làm gì rồi đúng không? Việc replace ký tự trong URL thì quá đơn giản:

<?php

if (isset($_GET['img']) && filter_var($_GET['img'], FILTER_VALIDATE_URL)) {

    $img = $_GET['img'];

    if (strpos($img, '/s72-c/') !== FALSE) {

        $img = str_replace('/s72-c/', '/w600-h315-c/', $img);

        header("Location: {$img}");

    }

}

exit;

Và code để nhúng trong template hiện tại của tôi có dạng như sau:

<meta expr:content='"http://junookyo.freevnn.com/?img=" + data:blog.postImageThumbnailUrl' property='og:image'/> 

Đoạn mã này có thể áp dụng cho mọi blog nên bạn có thể sử dụng thoải mái nhé!

Kết quả khi chia sẻ lên Facebook:

Fullsize Thumbnail Blogger

Categories

Sample Text

Được tạo bởi Blogger.

Must Read

Biểu mẫu liên hệ

Tên

Email *

Thông báo *

Popular Posts

Video

Popular Posts

Our Facebook Page