Hướng dẫn how to put html code into a website - cách đưa mã html vào website

Nếu bạn muốn quản lý nội dung của người khác từ phương tiện truyền thông xã hội hoặc chỉ làm cho nội dung phương tiện truyền thông xã hội trực quan của riêng bạn hoạt động chăm chỉ hơn cho chiến lược nội dung tổng thể của bạn, bạn cần biết cách nhúng mã HTML vào blog hoặc trang web của bạn.

Hướng dẫn how to put html code into a website - cách đưa mã html vào website

Nhưng hãy đợi một giây ... Trước khi chúng ta vào được sự nitty-gritty của mẹo này, "nhúng" có nghĩa là gì? Và HTML là gì? Nếu bạn không biết cách viết mã, không phải lo lắng - nhúng nội dung bên ngoài là cực kỳ dễ dàng. Hãy dành một giây để phá vỡ những điều cơ bản.

Hướng dẫn how to put html code into a website - cách đưa mã html vào website

Nhúng có nghĩa là gì?

Nhúng có nghĩa là tích hợp nội dung bên ngoài vào một trang web hoặc trang khác. Bạn đã nhúng một cái gì đó khi bạn đặt một khối mã - được gọi là mã nhúng - vào trình chỉnh sửa HTML của một trang web khác. Khi bạn nhấn ‘Lưu, hoặc‘ Xuất bản, thì các phương tiện truyền thông sau đó sẽ xuất hiện trên trang được xuất bản.

Nội dung nhúng được tham chiếu với HTML. HTML là một trong những ngôn ngữ cơ bản nhất được sử dụng trên web để thiết kế và đặt ra các trang web.

Bạn thường thấy mã này khi bạn ở "phần cuối" của bài đăng trên blog của bạn. Có một nơi mà bạn sẽ thêm mã nhúng của bạn.

Mã nhúng là gì?

Mã nhúng là một khối HTML được đặt trong một trang khác và hiển thị một yếu tố trực quan - một video, bài đăng trên phương tiện truyền thông xã hội, biểu mẫu hoặc trang - từ một trang web hoặc nguồn khác. Bạn có thể nhúng video YouTube, bài đăng trên Twitter, GIF và các đối tượng đa phương tiện khác trên một trang web khác.

Hầu hết các trang web xã hội và đa phương tiện có một tùy chọn để tạo mã nhúng ngay trong mỗi bài đăng riêng lẻ. Ở đây, một ví dụ về mã nhúng cho video YouTube HubSpot:

 

Và ở đây, kết quả nhúng.

Bạn muốn làm điều tương tự trên các bài đăng và trang blog của bạn? Hãy cùng đi qua cách bạn có thể tạo mã nhúng cho các trang web xã hội hàng đầu.

  1. Truy cập bài viết xã hội hoặc trang web mà bạn muốn nhúng.
  2. Tạo mã nhúng bằng các tùy chọn Post Post.
  3. Nếu có thể, hãy tùy chỉnh bài nhúng, chẳng hạn như chiều cao và chiều rộng của phần tử.
  4. Đánh dấu mã nhúng, sau đó sao chép nó vào bảng tạm của bạn.
  5. Trong hệ thống quản lý nội dung của bạn, hãy mở trình xem HTML của bạn.
  6. Dán đoạn mã HTML bạn vừa sao chép vào cửa sổ Trình xem HTML của bạn. Sau đó nhấp vào 'OK' hoặc 'Lưu.'
  7. Hoàn thành! Bây giờ bạn đã nhúng nội dung vào trang web hoặc blog của bạn.

Dưới đây, chúng tôi bao gồm các bước này chi tiết hơn cho mỗi nền tảng. Nói chung, bạn sẽ muốn:

  1. Tạo mã nhúng.
  2. Truy cập hệ thống quản lý nội dung của bạn và dán mã nhúng vào trình xem HTML của bạn.
  3. Hoàn thành! Bạn đã nhúng nội dung vào trang web hoặc blog của bạn.

Hãy để đi sâu vào từng bước.

1. Tạo mã nhúng.

Trước khi nhúng nội dung bên ngoài, trước tiên bạn phải tạo mã nhúng cho bài đăng hoặc trang bạn muốn nhúng trên trang web của mình.

Chúng tôi sẽ đi qua cách bạn có thể làm điều đó trên hầu hết các mạng nội dung và xã hội chính.

Nhúng một bài đăng trên Facebook

Để nhúng một bài đăng trên Facebook, hãy làm như sau:

  • Điều hướng đến Facebook trên trình duyệt máy tính để bàn của bạn và truy cập bài đăng mà bạn muốn nhúng.
  • Nhấp vào ba dấu chấm ở góc trên bên phải của bài.
  • Trên menu thả xuống, nhấp vào nhúng.Embed.

Hướng dẫn how to put html code into a website - cách đưa mã html vào website

  • Một cửa sổ bật lên sẽ xuất hiện, nơi bạn có tùy chọn bao gồm các cài đặt nâng cao và truy cập nâng cao. Đối với người mới bắt đầu, chúng tôi khuyên bạn nên để lại các tùy chọn như hiện tại và chỉ cần nhấp vào mã sao chép.Copy Code.

Hướng dẫn how to put html code into a website - cách đưa mã html vào website

  • Hoàn thành! Bạn đã có mã nhúng của bạn.

Nhúng một bài đăng trên Instagram

Bạn muốn nhúng một bài đăng trên Instagram? Quá trình này tương tự như Facebook Facebook. Lưu ý rằng bạn chỉ có thể nhúng các bài đăng từ phiên bản máy tính để bàn chứ không phải ứng dụng di động.

  • Nhấp vào ba dấu chấm ở góc trên bên phải của bài.
  • Một cửa sổ bật lên sẽ đưa ra một số tùy chọn. Nhấp vào nhúng, tùy chọn thứ hai đến cuối cùng.Embed, the second-to-last option.

Hướng dẫn how to put html code into a website - cách đưa mã html vào website

  • Một cửa sổ bật lên sẽ đưa ra mã nhúng của bạn. Bạn có tùy chọn bao gồm hoặc loại trừ chú thích.
  • Sau khi bạn hoàn thành việc tùy chỉnh các tùy chọn của mình, hãy nhấp vào COPY IMPED CODE.Copy Embed Code.

Hướng dẫn how to put html code into a website - cách đưa mã html vào website

  • Hoàn thành! Bạn đã có mã nhúng Instagram của mình.

Nhúng video YouTube

Video YouTube có thể đưa các bài đăng trên blog của bạn lên cấp độ tiếp theo và phần tốt nhất là bạn có thể nhúng tài sản của nó trên các bài đăng trên blog của mình miễn phí.

Để làm như vậy, hãy thực hiện các bước sau:

  • Điều hướng đến video mà bạn muốn nhúng trên trang web của mình.
  • Theo video, bên cạnh nơi có các lượt thích, nhấp vào Chia sẻ.Share.

Hướng dẫn how to put html code into a website - cách đưa mã html vào website

  • Một cửa sổ bật lên sẽ đưa ra một số tùy chọn, bao gồm chia sẻ bài đăng cho các mạng xã hội khác. Nhấp vào nhúng.Embed.

Hướng dẫn how to put html code into a website - cách đưa mã html vào website

  • YouTube sẽ tạo một mã nhúng, mà bạn có thể tùy chỉnh. Bạn có thể bắt đầu video tại một điểm nhất định hoặc ẩn các điều khiển của người chơi.
  • Sau khi chọn các tùy chọn của bạn, nhấp vào Sao chép ở góc bên phải dưới của cửa sổ bật lên.Copy on the lower right-hand corner of the pop-up.

Hướng dẫn how to put html code into a website - cách đưa mã html vào website

  • Hoàn thành! Video YouTube của bạn đã sẵn sàng để được nhúng.

Nhúng một tweet

Nếu bạn nhúng một tweet trên các trang trang web hoặc blog của bạn, bạn có thể tạo sự tham gia cho hồ sơ Twitter của mình mà không cần dựa vào những người theo dõi Twitter của bạn. Khách truy cập trang web cũng có thể tham gia với nội dung Twitter của bạn.

Để nhúng một bài đăng trên Twitter, hãy làm như sau:

  • Trên trình duyệt máy tính để bàn, điều hướng đến bài đăng mà bạn muốn nhúng.
  • Nhấp vào ba dấu chấm ở góc trên bên phải của bài.
  • Một menu thả xuống sẽ xuất hiện. Nhấp vào nhúng tweet.Embed Tweet.

Hướng dẫn how to put html code into a website - cách đưa mã html vào website

  • Twitter sẽ đưa bạn đến một trang bên ngoài trên Publish.twitter.com, nơi bạn có thể tùy chỉnh thêm giao diện của tweet trước khi nhúng nó vào trang web của bạn. Chẳng hạn, bạn có thể đặt nó thành chế độ tối và thay đổi ngôn ngữ hiển thị của tweet.

Hướng dẫn how to put html code into a website - cách đưa mã html vào website

  • Khi bạn đã tùy chỉnh nó, nhấp vào Cập nhật.Update.
  • Nhấp vào sao chép mã.Copy Code.
  • Hoàn thành! Các tweet đã sẵn sàng để nhúng vào trang web của bạn.

Có một cách khác để tạo mã nhúng cho Twitter. Truy cập xuất bản.twitter.com và chèn URL của bài đăng mà bạn muốn nhúng. Twitter sau đó sẽ tạo mã nhúng và bạn có thể tùy chỉnh nó bằng quy trình tương tự như phương thức cuối cùng.

Nhúng một bài đăng Pinterest

Nhúng một bài đăng Pinterest có thể dẫn người dùng trang web trở lại hồ sơ Pinterest của bạn và giúp bạn phát triển Pinterest sau đây. Để bắt đầu, hãy làm như sau:

  • Điều hướng đến bài đăng Pinterest mà bạn muốn nhúng.
  • Nhấp vào ba dấu chấm ngay bên cạnh hình ảnh (hoặc dưới hình ảnh, nếu bạn sử dụng trang web di động).
  • Trên menu thả xuống, nhấp vào nhận mã nhúng pin.Get Pin embed code.

Hướng dẫn how to put html code into a website - cách đưa mã html vào website

  • Một cửa sổ bật lên sẽ xuất hiện với mã nhúng. Bạn có tùy chọn tạo pin nhúng nhỏ, trung bình, lớn hoặc cực lớn.

Hướng dẫn how to put html code into a website - cách đưa mã html vào website

  • Khi bạn tùy chỉnh kích thước, hãy tô sáng mã và nhấp vào lệnh + c hoặc ctrl + C.Command + C or CTRL + C.
  • Hoàn thành! Ghim của bạn đã sẵn sàng để được nhúng.

Nhúng một bài thuyết trình slideshare

Mặc dù các bài thuyết trình Slideshare không phổ biến trong những ngày này, chúng vẫn có thể là một công cụ đa phương tiện tiện dụng để tăng cường các bài đăng trên blog và các trang. Đây là cách để nhúng một bài thuyết trình Slideshare:

  • Chuyển đến bài thuyết trình Slideshare mà bạn muốn nhúng.
  • Nhấp vào Chia sẻ dưới phần trình bày.Share under the presentation.
  • Trong cùng một cửa sổ nơi trình bày xuất hiện, bạn sẽ thấy tùy chọn chia sẻ nó thông qua các kênh xã hội. Mã nhúng sẽ ở bên dưới đó.

Hướng dẫn how to put html code into a website - cách đưa mã html vào website

  • Chọn kích thước của cửa sổ nhúng và slide mà bạn thích bài thuyết trình để bắt đầu.
  • Đánh dấu mã nhúng và nhấp vào lệnh + C hoặc Ctrl + C.Command + C or CTRL + C.
  • Sẳn sàng! Bây giờ bạn có thể nhúng bản trình bày Slideshare vào một trang web hoặc bài đăng.

Nhúng một trang web bên ngoài

Bạn có muốn nhúng một bài viết xã hội mà là một trang web? Bạn có thể nhúng một trang web bên ngoài bằng thẻ iframe HTML.iframe HTML tag.

Tất cả các mã nhúng, bao gồm các mã cho các trang web xã hội, sử dụng các thẻ iframe. Đây là những gì họ trông như thế nào:

 

Bạn có thể sử dụng các thẻ tương tự để nhúng trang web bên ngoài. Đây là cách: làm thế nào:

  • Điều hướng đến trang web mà bạn muốn nhúng vào trang web của bạn.
  • Mở ứng dụng Notepad trên máy tính của bạn. Dán mã sau vào nó:
 

  • Quay trở lại trang web và sao chép URL.
  • Dán toàn bộ URL nơi nó nói URL vào mã iframe của bạn. Don Tiết quên bao gồm https: // ở đầu URL của bạn và đặt liên kết bên trong các dấu ngoặc kép. Ở đây, mã của bạn sẽ trông như thế nào:
 

  • Thay đổi chiều rộng và chiều cao của khung nếu muốn.
 

  • Sao chép toàn bộ dòng mã. Sau đó, trang web đã sẵn sàng để được nhúng trên trang web của bạn.

2. Truy cập hệ thống quản lý nội dung của bạn và dán mã nhúng vào trình xem HTML của bạn.

Mặc dù mọi CMS đều khác nhau, nhưng có lẽ bạn có thể tìm thấy trình xem HTML với các bước tương tự. Chúng tôi sẽ đi qua cách bạn có thể làm điều đó trong CMS Hub và WordPress.

Trung tâm CMS

Trong CMS Hub, bạn thực sự không cần thêm nội dung nhúng của mình bằng Trình chỉnh sửa HTML (mặc dù bạn có tùy chọn). Đây là cách: làm thế nào:

  • Trong bảng điều khiển HubSpot của bạn, điều hướng đến Tiếp thị> Trang web> Blog. Nếu bạn có kế hoạch thêm mã vào một trang trang web, hãy điều hướng đến Marketing> Trang web> Trang web.Marketing > Website > Blog. If you’re planning to add the code to a website page, navigate to Marketing > Website > Website Pages.

Hướng dẫn how to put html code into a website - cách đưa mã html vào website

  • Tìm bài đăng hoặc trang mà bạn muốn thêm mã nhúng vào. Di chuột qua nó, sau đó nhấp vào Chỉnh sửa.Edit.

Hướng dẫn how to put html code into a website - cách đưa mã html vào website

  • Nhấp vào mô -đun nơi bạn muốn thêm mã nhúng. Một thanh tùy chọn sẽ xuất hiện gần đỉnh màn hình. Ở phía bên phải, nhấp vào chèn.Insert.
  • Chọn nhúng từ menu thả xuống.Embed from the drop-down menu.

Hướng dẫn how to put html code into a website - cách đưa mã html vào website

  • Một cửa sổ bật lên sẽ xuất hiện. Dán mã iframe vào thanh văn bản.

Hướng dẫn how to put html code into a website - cách đưa mã html vào website

  • Nhấp vào chèn.Insert.
  • Hoàn thành! Bạn có thể chỉnh sửa chiều rộng và chiều cao của nội dung nhúng để tùy chỉnh nó thêm.

Để truy cập Trình chỉnh sửa HTML, hoàn thành các bước 1-3 ở trên. Trên thanh Tùy chọn hàng đầu, bấm nâng cao> Mã nguồn. Sau đó, bạn có thể dán mã nhúng của bạn theo cách thủ công. Lưu ý rằng kết quả cuối cùng là như nhau.Advanced > Source Code. You can then paste your embed code manually. Note that the end result is the same.

WordPress

Để dán mã nhúng vào trang web WordPress của bạn, hãy sử dụng các bước sau:

  • Truy cập khu vực quản trị của bạn và đi đến các trang hoặc bài viết.Pages or Posts.
  • Nhấp vào tiêu đề của bài đăng mà bạn muốn thêm mã nhúng vào. Hành động này sẽ đưa bạn đến biên tập viên bài.
  • Nhấp vào tab Văn bản ở góc trên bên phải của trình soạn thảo văn bản.Text tab on the upper right-hand corner of the text editor.

Hướng dẫn how to put html code into a website - cách đưa mã html vào website

  • Dán mã nhúng của bạn nơi bạn muốn mô -đun xuất hiện.

3. Hoàn thành! Bạn đã nhúng nội dung vào trang web hoặc blog của bạn.

Khi bạn tải lại trang, bài đăng xã hội nhúng của bạn sẽ xuất hiện.

Thêm nội dung nhúng để tăng sự tham gia của người dùng

Bằng cách nhúng nội dung bên ngoài trên các trang và bài đăng của bạn, bạn có thể tăng sự tham gia trên trang web của mình và khiến khách truy cập trang web của bạn tương tác với nội dung bạn đăng trên phương tiện truyền thông xã hội. Phần tốt nhất là nó rất dễ thực hiện - chỉ cần tạo mã nhúng, dán nó vào trình chỉnh sửa HTML của bạn và xem sự tham gia của người dùng của bạn tăng lên.

Lưu ý của biên tập viên: Bài đăng này ban đầu được xuất bản vào tháng 9 năm 2013 và đã được cập nhật về tính toàn diện.

Hướng dẫn how to put html code into a website - cách đưa mã html vào website

Hướng dẫn how to put html code into a website - cách đưa mã html vào website

Mã HTML ở đâu trên trang web?

Quá trình này là đơn giản. Mở trang trong cửa sổ trình duyệt mới và sau đó tô sáng một phần của trang bằng chuột. Nhấp chuột phải và sau đó chọn Kiểm tra từ menu thả xuống. Điều này sẽ mở các công cụ nhà phát triển và hiển thị cho bạn mã HTML được liên kết với phần phần tử hoặc trang cụ thể.Right-click and then select INSPECT from the dropdown menu. This will open the developer tools and show you the HTML code associated with the particular element or page section.

Tôi có thể tạo một trang web bằng HTML không?

HTML là ngôn ngữ đánh dấu tiêu chuẩn để tạo các trang web và CSS là ngôn ngữ mô tả phong cách của một tài liệu HTML. and CSS is the language that describes the style of an HTML document.