Cách thêm Lịch sự kiện Facebook vào trang web WordPress

Gần đây, một độc giả hỏi chúng tôi làm thế nào để thêm lịch sự kiện Facebook vào trang web WordPress của họ?

Các Sự kiện trên Facebook giúp bạn kết nối với cộng đồng của mình. Tuy nhiên, khách truy cập trang web của bạn có thể bỏ lỡ các sự kiện quan trọng đó nếu bạn không quảng bá chúng trên trang web của mình.

Trong bài viết này, chúng tôi sẽ hướng dẫn bạn cách thêm lịch sự kiện Facebook trong WordPress để tối đa hóa phạm vi tiếp cận của bạn.

Tại sao cần Thêm Lịch sự kiện Facebook trên trang web của bạn?

Thêm lịch Sự kiện Facebook vào trang web của bạn cho phép khách truy cập dễ dàng tìm hiểu về các sự kiện sắp tới của bạn. Người dùng của bạn có thể đánh dấu mình là quan tâm hoặc đi đến trang sự kiện trên Facebook.

Đây là một cách tuyệt vời để có được nhiều người theo dõi hơn trên Facebook và xây dựng sự gắn kết cộng động. Nó cũng giúp bạn tiết kiệm thời gian và công sức vì tự động lấy các sự kiện từ Facebook.

Bạn sẽ không cần phải thêm thủ công các sự kiện vào trang web của mình bằng plugin lịch WordPress. Bạn có thể tạo các sự kiện Facebook và tự động hiển thị chúng trên trang web của bạn.

Lưu ý: Bạn sẽ cần một Facebook page, không phải trang cá nhân. Page này cần có ít nhất 1 sự kiện.

Trong hướng dẫn này, chúng tôi sẽ giới thiệu với bạn hai cách để thêm lịch sự kiện Facebook vào trang web WordPress.

Phương pháp đầu tiên yêu cầu nhập một số đoạn code trên trang web của bạn, tuy nhiên nó khá dễ thực hiện. Điểm trừ duy nhất là phương pháp này không bao gồm các tùy chọn tùy chỉnh.

Phương pháp thứ hai là phương pháp chúng tôi khuyên dùng cho người dùng muốn tùy chỉnh hiển thị lịch sự kiện và có quyền kiểm soát tốt hơn đối với những gì được hiển thị. Dưới đây là một ví dụ về hiển thị lịch sự kiện Facebook tùy chỉnh mà chúng tôi đã thực hiện:

Phương pháp 1. Thêm sự kiện Facebook vào trang web của bạn mà không cần Plugin

Nếu bạn không thích sử dụng plugin, bạn hoàn toàn có thể thêm các sự kiện Facebook vào trang web WordPress mà không cần đến chúng.

Phương pháp này liên quan đến việc thêm một số đoạn code vào trang web của bạn. Nếu chưa biết cách dán code trong WordPress, bạn có thể thử cách thứ hai ngay bên dưới, dù sao phương pháp này cũng không cho phép bạn tùy chính sự kiện theo ý mình.

Để sử dụng phương pháp này, bạn sẽ cần sử dụng một công cụ Facebook được thiết kế cho các developer. Nó được gọi là Facebook Page Plugin. Đừng để cái tên làm bạn bối rối. Đây không phải là một plugin WordPress.

Đầu tiên, hãy truy cập công cụ Page Plugin và nhập URL page Facebook của bạn.

Facebook sẽ hiển thị bản xem trước feed page của bạn. Tiếp theo, bạn cần xóa từ ‘timeline‘ trong trường Tabs và thay vào đó là ‘events’. Bạn cũng có thể đặt chiều rộng và chiều cao cho feed sự kiện của bạn tại đây

Bây giờ, bạn sẽ thấy các sự kiện của bạn được liệt kê trong hộp xem trước. Chỉ cần nhấp vào nút ‘Get Code‘ bên dưới phần xem trước.

Thao tác này sẽ đưa ra bật lên một cửa sổ, bạn cần chuyển sang tab iFrame và sao chép doạn code nhúng.

Tiếp theo, đi đến khu vực quản trị trang web WordPress của bạn và chỉnh sửa bài đăng hoặc trang nơi bạn muốn hiển thị các sự kiện trên Facebook.

Trên màn hình chỉnh sửa bài đăng, nhấp vào biểu tượng (+) để thêm một khối mới và sau đó tìm khối HTML trong các khối Formatting.

Tiếp theo, bạn cần dán đoạn code sao chép từ công cụ Facebook Page Plugin vào khối này:

Sau đó, bạn có thể lưu bài viết của bạn hoặc xuất bản nó. Bây giờ bạn có thể truy cập bài đăng hoặc trang của bạn để xem sự kiện facebook hiển thị trên trang của bạn ra sao

Để thay đổi cách hiển thị này, bạn sẽ cần quay lại công cụ Facebook Page Plugin và tạo lại code. Tuy nhiên, bạn chỉ có thể thay đổi một vài thứ ít ỏi.

Nếu bạn muốn tùy chỉnh cách hiển thị các sự kiện của mình và kiểm soát tốt hơn các tùy chọn, chúng tôi khuyên bạn nên sử dụng plugin Custom Facebook Feed Pro mà chúng tôi sẽ giới thiệu trong phương pháp tiếp theo.

Phương pháp 2. Sử dụng Plugin Custom Facebook Feed Pro

Đối với hướng dẫn này, bạn sẽ cần cài đặt và kích hoạt plugin Smash Balloon Custom Facebook Feed Pro. Để biết thêm chi tiết, hãy xem hướng dẫn từng bước của chúng tôi về cách cài đặt plugin WordPress.

Sau khi bạn đã cài đặt plugin, bạn sẽ cần kết nối nó với tài khoản Facebook của mình.

Kết nối tài khoản Facebook của bạn với Smash Balloon

Thông thường với Smash Balloon, bạn có thể tự động kết nối tài khoản của mình. Để thực hiện việc này, bạn chỉ cần truy cập Facebook Feed » Settings, sau đó nhấp vào nút ‘Connect a Facebook account‘.

Tuy nhiên, do những thay đổi API Facebook gần đây, phương pháp này hiện không hoạt động.

Bạn sẽ cần phải tự tạo Facebook Access Token để hiển thị các sự kiện của mình. Điều này bao gồm một vài bước khác nhau, nhưng may mắn là Smash Balloon có một số công cụ để giúp bạn dễ dàng thao tác.

Trước tiên, bạn cần truy cập trang Facebook for Developers và đăng ký tài khoản developer bằng cách sử dụng thông tin đăng nhập Facebook thông thường của bạn.

Nếu bạn đã có tài khoản developer, chỉ cần nhấp vào liên kết ‘My Apps‘ ở trên cùng bên phải và sau đó nhấp vào nút Add a New App.

Nếu bạn chưa tạo ứng dụng nào trước đó, thì chỉ cần nhấp vào nút ‘Create App‘ để tiếp tục.

Một cửa sổ mới bật lên và bạn cần nhấp vào tùy chọn ‘For Everything Else‘:

Tiếp theo, bạn sẽ cần nhập tên hiển thị cho ứng dụng của mình và sau đó nhấp vào nút ‘Create App ID

Bạn có thể được nhắc nhập mật khẩu Facebook và Captcha. Sau đó, bạn sẽ thấy bảng điều khiển ứng dụng của mình:

Ở phía bên trái bảng điều khiển của bạn, bạn cần nhấp vào Settings » Basic.

Bây giờ, chỉ cần nhấp vào nút ‘Show’ bên cạnh ‘App Secret‘. Bạn cần nhập Facebook password nếu được yêu cầu.

Tất cả những gì bạn cần làm cho bước này là sao chép App ID và App Secret vào các ô trong Bước 13 trên trang Smash Balloon này :

Bây giờ chúng ta sẽ tạo mã thông báo truy cập. Trước tiên, bạn cần truy cập trang Facebook Graph API explorer

Ở phía bên phải, đảm bảo tên ứng dụng của bạn được chọn trong danh sách ‘Facebook App‘. Sau đó, hãy tiếp tục và nhấp vào nút ‘Generate Access Token‘:

Thao tác này sẽ hiển thị một cửa sổ bật lên, trong đó bạn chỉ cần nhấp vào nút ‘Continue As‘ để tiếp tục.

Bước tiếp theo ở đây là thêm quyền cụ thể vào mã thông báo truy cập của bạn. Để làm điều này, tất cả những gì bạn cần làm là sao chép và dán pages_read_user_contentvào dòng ‘Add Permission‘ và sau đó nhấp vào nó khi nó xuất hiện trong một cửa sổ bật lên nhỏ, như thế này:

Khi bạn đã thêm quyền đó, cửa sổ đó sẽ trông như bên dưới:

Bây giờ bạn sẽ cần phải nhấp nút Generate Access Token lần nữa. Bạn sẽ thấy một cửa sổ bật lên như bên dưới. Chỉ cần nhấp vào nút ‘Continue As…‘:

Facebook sau đó sẽ yêu cầu bạn chọn trang bạn muốn sử dụng. Chọn trang mà bạn muốn hiển thị các sự kiện từ đó. Nên nhớ bạn chỉ được chọn 1 trang ở đây mà thôi. Sau khi chọn hộp bên cạnh trang bạn đã chọn, nhấp vào nút ‘Next‘.

Tại đây, tất cả những gì bạn cần làm là nhấp vào ‘Done‘. Facebook sẽ đưa ra thông báo về việc gửi ứng dụng của bạn để xem xét, vì ứng dụng sẽ chỉ ở trong chế độ phát triển.

Tiếp theo, bạn chỉ cần nhấp vào nút ‘Get Access Token’ lần cuối. Bây giờ, Facebook cung cấp cho bạn mã thông báo truy cập tạm thời.

Mã thông báo này chỉ có thể được sử dụng để thực hiện yêu cầu API đầu tiên của bạn. Đây là lý do tại sao bạn cần sử dụng trang tài liệu của Smash Ballon để thực hiện yêu cầu API đó và nhận mã token .

Chỉ cần sao chép và dán nó vào hộp ở bước 23 trên trang Custom Facebook feed Pro của Smash Ballon.

Sau khi sao chép và dán mã vào hộp, nhấp vào nút ‘Extend my token’. Bạn sẽ thấy mã token của mình trong một hộp lớn:

Hãy mở trang này trong một tab riêng biệt, hoặc sao chép và dán nó ở một nơi an toàn, vì bạn sẽ cần nó ngay trong bước kế tiếp.

Bây giờ chúng ta có tất cả thông tin chúng ta cần, hãy kết nối blog WordPress của bạn với Facebook.

Chỉ cần truy cập Facebook Feed » Settings trong dashboard WordPress của bạn và nhấp vào nút ‘Manually connect account’

Bạn sẽ thấy một danh sách thả xuống, bạn chỉ cần chọn tùy chọn ‘Page‘:

Tiếp theo, nhập tên trang, ID trang (phần cuối của URL trang Facebook của bạn) và mã token mà bạn đã tạo trước đó. Sau đó, nhấp vào nút ‘Connect Account‘.

Sau khi làm như vậy, bạn sẽ thấy trang được kết nối được liệt kê trong cài đặt Facebook Feed Pro tùy chỉnh của bạn:

Bước cuối cùng ở đây là nhấp vào nút ‘Make Primary Feed‘:

Bạn sẽ thấy ID Facebook và Mã Facebook Access Token ở trên đã được tự động bổ sung

Đừng quên nhấp vào nút Save Settings sau khi thực hiện việc này.

Thiết lập Facebook Events Calendar Feed của bạn

Tiếp theo, chúng tôi sẽ thiết lập Facebook feed để nó chỉ hiển thị các sự kiện, không phải tất cả các bài đăng. Để làm điều này, bạn sẽ cần phải đi đến trang Customize » General .

Tại đây, bạn cần cuộn trang xuống phần Post Types. Khi bạn đến phần đó, bạn cần bỏ chọn tất cả các hộp trừ Events.

Bây giờ bạn có thể thêm Events feed của mình vào bất kỳ bài đăng hoặc trang nào trên trang web của bạn. Bạn thậm chí có thể thêm nó vào sidebar hoặc footer của mình bằng cách sử dụng một widget.

Chúng tôi sẽ tạo một trang cho các sự kiện Facebook của chúng tôi. Chuyển đến Pages » Add New để tạo một trang mới.

Trên màn hình chỉnh sửa bài đăng, nhấp vào biểu tượng (+) để thêm một khối mới. Tìm khối Custom Facebook Feed trong phần Widgets hoặc bằng thanh tìm kiếm.

Sau đó, bạn sẽ thấy Facebook events feed của mình trong block editor. Bạn có thể xem trước trang của bạn để xem thử nó hiển thị ra sao trên trang của bạn.

Nếu bạn đang sử dụng classic editor, bạn có thể thêm feed vào trang của mình bằng cách sử dụng shortcode [custom-facebook-feed]. Chỉ cần nhập đoạn shorcode đó ở bất cứ nơi nào bạn muốn các sự kiện xuất hiện:

Bạn cũng có thể sử dụng shortcode đó để thêm feed Facebook của mình vào slider hoặc bất kỳ khu vực hỗ trợ widget nào khác.

Để thực hiện việc này, hãy truy cập Appearance » Widgets trong dashboard WordPress của bạn. Thêm một tiện ích văn bản vào slider của bạn, sao chép và dán shortcode vào đó:

Tùy chỉnh cách thức hiển thị Events Feed Facebook của bạn trong WordPress

Bạn có thể thay đổi cài đặt mặc định để làm cho sự kiện Facebook trông thật đẹp mắt trên trang web của bạn.

Sử dụng Custom Facebook Feed Pro, bạn có thể thay đổi tất cả các loại chi tiết, bao gồm thông tin được liệt kê với sự kiện của bạn và cách thức các sự kiện được tạo kiểu.

Để bắt đầu, hãy truy cập Facebook Feed » Customize và nhấp vào liên kết ‘Post Types‘ hoặc cuộn xuống phần đó của trang. Ở đó, bạn sẽ thấy các tùy chọn khác nhau cho feed sự kiện của bạn.

Chúng tôi khuyên bạn nên sử dụng ‘Events page‘ làm nguồn sự kiện của bạn. Theo cách đó, chúng sẽ xuất hiện theo thứ tự khi nào sự kiện sẽ diễn ra, không theo thứ tự khi bạn thêm chúng.

Nếu bạn muốn, bạn có thể thay đổi Event Offset để ngừng hiển thị các sự kiện sau khi chúng bắt đầu. Chẳng hạn, bạn có thể xóa các sự kiện của mình 1 giờ sau khi chúng bắt đầu hoặc cứ để theo mặc định là 6 giờ.

Đảm bảo bạn nhấp vào nút Save Changes ở cuối trang sau khi thực hiện thay đổi.

Bước tiếp theo là quyết định bố trí cho lịch sự kiện của bạn. Để chọn tùy chọn này, hãy đi tới TCustomize » Post Layout và chọn những tùy chọn bạn thích.

Nếu bạn cuộn xuống trang, bạn sẽ thấy các tùy chọn để hiển thị / ẩn các chi tiết khác nhau.

Đừng quên nhấp Save changes để lưu lại những thay đổi của bạn.

Bạn cũng có thể muốn tùy chỉnh cách bài viết sự kiện hiển thị trên trang web của bạn. Để thực hiện việc này, hãy đi tới phần Customize » Style Posts trong cài đặt feed của Facebook.

Bạn có thể chuyển đổi giữa kiểu thông thường hoặc hình hộp với các góc tròn

Khi bạn đã chọn một kiểu, bạn có thể tiếp tục cuộn xuống trang để có thêm tùy chọn như màu văn bản, kích thước và định dạng.

Khi bạn hài lòng với cài đặt của mình, hãy đảm bảo bạn nhấp vào nút Save Changes ở cuối trang.

Chúng tôi hy vọng bài viết này đã giúp bạn tìm hiểu cách thêm lịch sự kiện Facebook trong WordPress. Bạn có thể muốn xem thêm bài viết về các dịch vụ email marketing tốt nhất của chúng tôi để quảng bá trang web của mình.

Nếu bạn thích bài viết này, vui lòng đăng ký YouTube Channel của chúng tôi để xem thêm các video hướng dẫn. Bạn cũng có thể tìm thấy chúng tôi trên TwitterFacebook.