Hướng dẫn how do i add a google calendar to html? - làm cách nào để thêm lịch google vào html?
|
Cập nhật vào ngày 18 tháng 2 năm 2022 Bài viết này giải thích cách chọn, tùy chỉnh và nhúng lịch Google vào trang web của bạn. Hướng dẫn áp dụng cho máy tính để bàn trên bất kỳ trình duyệt nào. Cách nhúng Lịch Google trên trang web của bạnSử dụng Lịch Google miễn phí để quản lý và chia sẻ lịch công khai trên trang web của bạn. Bắt đầu: Cài đặtĐể nhúng một lịch, đăng nhập vào lịch Google. Tiếp theo, đi đến bảng điều khiển bên trái và di chuột qua lịch bạn muốn nhúng. Chọn ba chấm xuất hiện. Trong hộp tùy chọn mở rộng, chọn & NBSP; Cài đặt và chia sẻ.three dots that appear. In the expanded option box, select Settings and sharing. Sao chép mã hoặc chọn thêm tùy chọnCuộn xuống phần Lịch tích hợp. Theo sử dụng mã này để nhúng lịch này vào một trang web, hãy sao chép mã nhúng. Kích thước mặc định là lịch 800 x 600 pixel với bảng màu mặc định của Google.Use this code to embed this calendar in a web page, copy the embed code. The default size is an 800 by 600 pixel calendar with Google's default color scheme. Chọn Tùy chỉnh để thay đổi cài đặt.Customize to change settings. Tùy chỉnh giao diệnSau khi chọn Tùy chỉnh, chỉ định màu nền mặc định để phù hợp với trang web của bạn, múi giờ, ngôn ngữ và ngày đầu tiên trong tuần. Đặt mặc định lịch thành tuần, tháng hoặc chế độ xem chương trình nghị sự.Customize, specify the default background color to match your website, the time zone, the language, and the first day of the week. Set the calendar default to Week, Month, or Agenda view. Agenda View rất hữu ích cho một cái gì đó như menu quán cà phê hoặc lịch trình dự án nhóm. view is useful for something like a cafeteria menu or team project schedule. Bạn cũng có thể chỉ định các yếu tố nào hiển thị trên lịch của bạn như tiêu đề, biểu tượng in hoặc nút điều hướng. Kích thước mặc định là 800 x 600 pixel. Kích thước đó là tốt cho một trang web kích thước đầy đủ mà không có gì khác trên đó; Tuy nhiên, nếu bạn đang thêm lịch của mình vào blog hoặc trang web với các mục khác, bạn sẽ cần điều chỉnh kích thước. Mỗi khi bạn thực hiện thay đổi, trang web sẽ hiển thị bản xem trước trực tiếp. HTML trên lịch của bạn cũng thay đổi. Khi bạn hài lòng với các thay đổi của mình, hãy đi đến đầu màn hình và theo mã nhúng, sao chép (Ctrl+C hoặc Command+C) HTML.Embed code, copy (Ctrl+C or Command+C) the HTML. Dán HTML của bạnDán (Ctrl+V hoặc lệnh+V) Mã vào phần có liên quan của HTML cho trang web của bạn.Ctrl+V or Command+V)the code into the relevant section of the HTML for your webpage. Lịch được nhúngXem trang cuối cùng của bạn để hiển thị lịch trực tiếp. Bất kỳ thay đổi nào bạn thực hiện đối với các sự kiện trên bản cập nhật lịch của bạn tự động. Nếu nó không hoàn toàn theo kích thước hoặc màu sắc bạn có trong tâm trí, hãy quay lại Lịch Google và điều chỉnh cài đặt, nhưng bạn sẽ phải sao chép và dán lại mã HTML. Trong trường hợp này, bạn đang thay đổi cách lịch xuất hiện trên trang của bạn chứ không phải các sự kiện. Cảm ơn vì đã cho chúng tôi biết! Nhận tin tức công nghệ mới nhất được gửi mỗi ngày Đặt mua Email bị hỏng có nghĩa là ít chuyển đổi hơn, giống như những người thêm sự kiện của bạn vào lịch của họ. Yike. Ngăn chặn lỗi email và bảo vệ danh tiếng thương hiệu của bạn với các bản xem trước email Litmus và hơn thế nữa. Để đảm bảo rằng khách thực sự xuất hiện, có thể hữu ích khi bao gồm một liên kết thêm vào lịch vào lịch trong các email sự kiện của bạn. Cùng với đó, người đăng ký có thể thêm các sự kiện vào lịch riêng của họ, giúp việc tránh xung đột lịch dễ dàng hơn và cho phép họ thiết lập lời nhắc riêng của họ. Theo truyền thống, điều này được thực hiện với một tập tin ICS, còn được gọi là Icalendar. Đây là một định dạng lịch phổ biến thường sử dụng tiện ích mở rộng tệp .ICS và được hầu hết các lịch chấp nhận rộng rãi. Không bị nhầm lẫn với Apple Apple Ical, nơi chia sẻ một cái tên tương tự, mặc dù các tệp icalendar cũng hoạt động ở đó. Để rõ ràng, chúng tôi sẽ gọi đây là một tệp ICS hoặc lịch trong suốt bài đăng trên blog này. Một số lịch cũng có thể thêm các sự kiện từ các liên kết web mà chúng tôi sẽ gọi là liên kết lịch. Dành thêm thời gian để hiển thị động cho liên kết bổ sung vào lịch phù hợp với mỗi ứng dụng email cụ thể của người đăng ký có thể giúp sự kiện của bạn trở nên dễ dàng hơn với họ. Nói cách khác, dễ dàng hơn và nhanh hơn cho người đăng ký của bạn để thêm sự kiện của bạn vào lịch của họ. Chúng tôi sẽ hướng dẫn bạn qua lịch mà bạn nên quan tâm, tạo các tệp và liên kết lịch thực tế, và mã hóa các tệp và liên kết này vào email sự kiện của bạn để có trải nghiệm thuê bao email tốt nhất. Mục lục
Bước 1: Chọn lịch nào để nhắm mục tiêuBước 2: Tạo các liên kết và tệp lịch Tệp lịch ICS Bước 3: Mã thêm các liên kết lịch vào lịch của bạn vào email của bạn Quyết định cách hiển thị nút Thêm vào lịch của bạn Tạo các nút và liên kết CTA của bạn Nhắm mục tiêu đúng đối tượng với liên kết lịch phù hợp
Ở đây, một biểu đồ tiện dụng nhanh chóng tóm tắt lịch nào chấp nhận thêm phương thức lịch để giúp bạn chuẩn bị cho bước tiếp theo. "Thêm vào lịch trình của Lịch theo lịch Bước 2: Tạo các liên kết và tệp lịchTệp lịch ICS Tệp lịch ICSLiên kết lịch Bước 3: Mã thêm các liên kết lịch vào lịch của bạn vào email của bạn Quyết định cách hiển thị nút Thêm vào lịch của bạn Liên kết lịchBước 3: Mã thêm các liên kết lịch vào lịch của bạn vào email của bạn Quyết định cách hiển thị nút Thêm vào lịch của bạn Đây là lý do tại sao nó thực hành tốt để tạo tệp lịch ICS ngoài các liên kết lịch.
Bước 3: Mã thêm các liên kết lịch vào lịch của bạn vào email của bạnTrước khi chúng tôi nhận được phần thực sự thú vị (mã hóa!), Bạn cần quyết định cách bạn sẽ trình bày thêm liên kết lịch của mình. Quyết định cách hiển thị nút Thêm vào lịch của bạnNhư chúng tôi đã đề cập trước đó, theo truyền thống, có nhiều liên kết lịch cùng với nút Tệp ICS. Khi sử dụng các nút động làm nút Thêm vào lịch, bạn có hai tùy chọn khác nhau:
Nếu bạn có thể cá nhân hóa liên kết bổ sung vào lịch cho mọi thuê bao, bạn có thể tự hỏi tại sao bạn lại muốn xem xét hiển thị các liên kết lịch khác. Chỉ hiển thị một liên kết không có tính đến những người như, tôi cũng vậy. Tôi thường sử dụng email công việc của mình để đăng ký email để tôi có thể thấy chúng trông như thế nào trong Outlook. Nhưng tôi đã muốn thêm sự kiện vào lịch gmail cá nhân của tôi. Đây có thể là một điểm ma sát cho mọi người nếu chỉ cung cấp một liên kết lịch. Tùy chọn thứ hai để hiển thị nhiều liên kết lịch là một cách tuyệt vời để giải quyết vấn đề này. Nó phức tạp hơn một chút so với việc chỉ ẩn và hiển thị các nút CTA dựa trên sở thích của khách hàng email, nhưng nó cung cấp trải nghiệm người dùng tốt nhất theo ý kiến của tôi, khi bạn gặp người đăng ký trong hộp thư đến của họ, nhưng vẫn phù hợp với bất kỳ quy trình làm việc nào họ có thể có. Tạo các nút và liên kết CTA của bạnVì vậy, bây giờ cho phần thú vị: Mã hóa nút Tệp ICS làm mặc định. Bắt đầu với điều này bởi vì nó hoạt động ở mọi nơi bất kể ứng dụng email, ứng dụng hoặc thiết bị nào mà người đăng ký của bạn đọc từ đó. Đầu tiên, hãy lấy tệp ICS bạn đã tạo trong bước 2 bằng công cụ tạo sự kiện Icalendar. Sau đó, tải nó lên các máy chủ của công ty bạn, Hệ thống quản lý nội dung (CMS) hoặc thư viện truyền thông của nhà cung cấp email. Bây giờ nó có thời gian xây dựng nút. Có rất nhiều cách khác nhau để xây dựng một nút; Bạn có thể kiểm tra hướng dẫn cuối cùng của chúng tôi về các nút chống đạn cho một vài trong số chúng. Ngày nay, chúng tôi là một fan hâm mộ của nút có thể truy cập của Mark Robbins, vì vậy, đây là một ví dụ về việc bạn có thể sử dụng: Add to your Calendar Sau đó, tạo các URL cho các liên kết lịch ứng dụng của ứng dụng email khác mà bạn dự định sử dụng và đặt chúng dưới nút bạn vừa tạo: Cuối cùng, bọc toàn bộ mọi thứ trong một thẻ để bạn có thể nhắm mục tiêu nó để cá nhân hóa: Nhắm mục tiêu đúng đối tượng với liên kết lịch phù hợpĐối với mỗi ứng dụng email mà bạn muốn nhắm mục tiêu, bạn sẽ phải tạo một phiên bản mới của khối nội dung bạn đã tạo ở trên nhưng với liên kết lịch phù hợp của ứng dụng email được nhắm mục tiêu làm nút thêm vào lịch CTA và sau đó chuyển các liên kết lịch bổ sung bên dưới. Cuối cùng, sử dụng CSS để nhắm mục tiêu ứng dụng email cụ thể và hiển thị cho họ nội dung dành riêng cho khách hàng của họ trong khi ẩn nội dung mặc định. Mẹo chuyên nghiệp: Đặt mỗi CSS nhắm mục tiêu vào khối kiểu riêng của nó khi thêm chúng vào khối kiểu chính đã được biết là gây rối với việc nhắm mục tiêu. Vậy bạn có thể nhắm mục tiêu ứng dụng email nào?
Bạn cũng có thể nhắm mục tiêu ứng dụng khách trên máy tính để bàn cho Outlook, nhưng dù sao đi nữa sẽ sử dụng nút mặc định, bạn không cần phải nhắm mục tiêu đến một lần. (Wahoo!) Bây giờ đến Nitty Gritty về cách nhắm mục tiêu vào từng ứng dụng email (và xem ghi chú cập nhật của chúng tôi cho Yahoo và AOL). GmailVăn phòng 365 Bạn cũng có thể nhắm mục tiêu ứng dụng khách trên máy tính để bàn cho Outlook, nhưng dù sao đi nữa sẽ sử dụng nút mặc định, bạn không cần phải nhắm mục tiêu đến một lần. (Wahoo!) Gmail tự động thay đổi docType thành. Điều này được đặt liền kề với một phần tử kế thừa lớp và ID từ thẻ. Vì vậy, sử dụng các mục sau để nhắm mục tiêu trong Gmail: Khối kiểu để ẩn mặc định và hiển thị nút Gmail trông giống như vậy: Outlook.com và Office 365Khối cho Outlook.com (Ứng dụng Web Outlook hoặc OWA) và Office 365 trông giống như khối Gmail với các sửa đổi nhỏ: lớp và chu kỳ của nút và URL liên kết để tính đến máy khách được nhắm mục tiêu mới. Có thể có một số nhầm lẫn vì Office 365 có cả máy tính để bàn và máy khách webmail. Tuy nhiên, việc nhắm mục tiêu chỉ áp dụng cho máy khách WebMail Outlook để đảm bảo nút chính cho các liên kết máy khách trên máy tính để bàn đến tệp ICS trong khi ở máy khách webmail, đó là URL đến liên kết lịch. Cả Outlook.com và Office 365 WebMail đều có tiền tố tên lớp với X_ nhưng không làm điều này trên bộ chọn thuộc tính. Vì vậy, khối của bạn có thể được nhắm mục tiêu với: Càng và nó chỉ áp dụng cho khách hàng WebMail Outlook. Do đó, khối kiểu cho máy khách WebMail Outlook trông như thế này: Yahoo và AOLYahoo từng có liên kết lịch, nhưng khi thử nghiệm cuối cùng của chúng tôi, liên kết sẽ đưa bạn đến một trang lịch để thêm một sự kiện nhưng không có chi tiết sự kiện nào được thực hiện nữa. Điều này có thể là do một sự thay đổi tại Yahoo. Vì cả AOL và Yahoo đều thuộc sở hữu của Verizon, họ có thể đang hợp lý hóa các ứng dụng email để mang họ nhiều hơn với nhau. Mặc dù bạn vẫn có thể nhắm mục tiêu cụ thể Yahoo và AOL, nhưng giờ đây họ chỉ hỗ trợ tệp ICS. Vì vậy, hãy tiết kiệm thời gian của mình và chỉ cần sử dụng mã bổ sung mặc định vào lịch lịch được chia sẻ ở đầu bước 3 trong bài đăng trên blog này cho đến khi thông báo thêm. Xem các liên kết bổ sung vào lịchVì vậy, trong khi mã trên là đẹp, bạn có thể tự hỏi nó trông như thế nào khi được thực hiện trong một email thực tế. May mắn cho bạn, chúng tôi đã mã hóa nó trong Litmus Builder để bạn có thể thấy nút thêm vào lịch và các liên kết trông giống như trực tiếp và cách chúng hiển thị trên các ứng dụng và thiết bị email khác nhau. Bây giờ hãy cung cấp cho khách sự kiện của bạn điều trị email đặc biệt này!
Bài đăng trên blog này ban đầu được xuất bản vào ngày 8 tháng 5 năm 2019, bởi Jaina Mistry. Nó đã được cập nhật vào ngày 5 tháng 2 năm 2021, để rõ ràng và với thông tin mới. |
