CHUYÊN THIẾT KẾ WEB DOANH NGHIỆP & MARKETING ONLINE



URL Encode

Đầu tiên, bạn cần biết về URL Encode để đặt nội dung vào liên kết chia sẻ. Trong PHP, bạn có thể dùng hàm urlencode('Chào các bạn!');, hoặc có thể Encode Online dành cho nội dung tĩnh.

HTML và CSS

Mình sẽ ví dụ thiết kế các nút Chia sẻ như hình này.

Nút Chia sẻ lên Mạng xã hội

HTML

Bạn cần sử dụng Font Awesome, chèn đoạn mã sau vào trước </head>.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

HTML của các nút Chia sẻ như sau.

<div class="socials-share">
    <a class="bg-facebook" href="" target="_blank"><span class="fa fa-facebook"></span> Share</a>
    <a class="bg-twitter" href="" target="_blank"><span class="fa fa-twitter"></span> Tweet</a>
    <a class="bg-google-plus" href="" target="_blank"><span class="fa fa-google-plus"></span> Plus</a>
    <a class="bg-pinterest" href="" target="_blank"><span class="fa fa-pinterest"></span> Pin</a>
    <a class="bg-email" href="" target="_blank"><span class="fa fa-envelope"></span> Gmail</a>
</div>

Các liên kết trong phần href="" mình sẽ giới thiệu từng phần mục tiếp theo.

CSS

.socials-share {
    text-align: center;
    margin-bottom: 30px;
}

.socials-share a {
    padding: 4px 30px;
    color: #fff;
    line-height: 2em;
    text-decoration: none;
    border-radius: 2px;
    white-space: nowrap;
    display: inline-block;
    margin-bottom: 4px;
}

.socials-share span.fa {
    margin-right: 3px;
}

.bg-facebook {
    background: #3a5899;
}

.bg-facebook:hover, .bg-facebook:focus {
    background: #1d418d;
}

.bg-twitter {
    background: #00acee;
}

.bg-twitter:hover, .bg-twitter:focus {
    background: #0b93c7;
}

.bg-google-plus {
    background: #db4437;
}

.bg-google-plus:hover, .bg-google-plus:focus {
    background: #bb2a1d;
}

.bg-pinterest {
    background: #cb1e26;
}

.bg-pinterest:hover, .bg-pinterest:focus {
    background: #ae0e15;
}

.bg-email {
    background: #dd5348;
}

.bg-email:hover, .bg-email:focus {
    background: #ce3f34;
}

Vậy là chúng ta đã hoàn thành phần giao diện.

Liên kết Chia sẻ

Facebook

Facebook khá đơn giản, bạn chỉ cần truyền vào liên kết cần chia sẻ vào sau ?u=.

https://www.facebook.com/sharer/sharer.php?u=https://www.inithtml.com/

Twitter

Ở Twitter, bạn cần truyền vào 2 biến là text và url, với text là Nội dung và url là Liên kết cần chia sẻ.

https://twitter.com/share?text=&url=

Lưu ý: Bạn chỉ có 140 kí tự cho một Tweet, và phần nội dung tốt nhất nên Encode. Ví dụ:

https://twitter.com/share?text=Init%20HTML%20%E2%80%93%20Kh%E1%BB%9Fi%20%C4%91%E1%BA%A7u%20d%E1%BB%B1%20%C3%A1n%20Web&url=https://www.inithtml.com/

Một ví dụ khác với PHP.

https://twitter.com/share?text=<?php echo urlencode('Init HTML – Khởi đầu dự án Web'); ?>&url=https://www.inithtml.com/

Google+

Google+ bạn cũng chỉ cần truyền vào Liên kết cần chia sẻ sau ?url=.

https://plus.google.com/share?url=https://www.inithtml.com/

Pinterest

Pinterest bạn cần truyền vào 3 biến, là url (liên kết), media (đường dẫn hình ảnh) và description (mô tả).

https://www.pinterest.com/pin/create/button/?url=&media=&description=

Ví dụ:

https://www.pinterest.com/pin/create/button/?url=https://www.inithtml.com/&media=https://www.inithtml.com/wp-content/themes/init-html-theme/screenshot.jpg&description=Init%20HTML%20%E2%80%93%20Kh%E1%BB%9Fi%20%C4%91%E1%BA%A7u%20d%E1%BB%B1%20%C3%A1n%20Web

Gmail

Để tạo nút Gửi Email, bạn chỉ cần truyền vào Tiêu đề sau su= và Nội dung cần gửi sau body=.

https://mail.google.com/mail/u/0/?view=cm&fs=1&to&su=&body=

Ví dụ:

https://mail.google.com/mail/u/0/?view=cm&fs=1&to&su=Init%20HTML%20%E2%80%93%20Kh%E1%BB%9Fi%20%C4%91%E1%BA%A7u%20d%E1%BB%B1%20%C3%A1n%20Web&body=Chia%20s%E1%BA%BB%20ki%E1%BA%BFn%20th%E1%BB%A9c%20thi%E1%BA%BFt%20k%E1%BA%BF%2C%20l%E1%BA%ADp%20tr%C3%ACnh%20web%2C%20server%2C%20d%E1%BB%B1%20%C3%A1n%20web%20t%E1%BB%AB%20b%C6%B0%E1%BB%9Bc%20%C4%91%E1%BA%A7u%20ti%C3%AAn%20HTML%2FCSS%20%C4%91%E1%BA%BFn%20b%C6%B0%E1%BB%9Bc%20cu%E1%BB%91i%20c%C3%B9ng.%20WordPress%20v%C3%A0%20c%C3%A1c%20th%E1%BB%A7%20thu%E1%BA%ADt%20t%E1%BB%91i%20%C6%B0u%2C%20ki%E1%BA%BFm%20ti%E1%BB%81n%20online.%20Xem%20th%C3%AAm%20t%E1%BA%A1i%3A%20https%3A%2F%2Fwww.inithtml.com%2F.

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


Image

THIẾT KẾ WEBSITE DOANH NGHIỆP

"Website là một trong những công cụ bán hàng xuất sắc nhất mà....

Xem chi tiết

Image

QUẢN TRỊ VÀ NÂNG CẤP WEBSITE

Dịch vụ quản trị và nâng cấp website là một phần quan trọng....

Xem chi tiết

Image

MUA TÊN MIỀN WEBSITE

Tên miền được xem như một địa chỉ để doanh nghiệp giao dịch....

Xem chi tiết

Image

QUẢNG CÁO GOOGLE ADWORDS

Google Ads giúp doanh nghiệp tăng lưu lượng truy cập, tiếp cận đến....

Xem chi tiết

Image

THIẾT KẾ GIAO DIỆN ĐẸP

Bạn đang tìm kiếm một giải pháp chuyên nghiệp để tạo ra một....

Xem chi tiết

Sản Phẩm Cùng Loại
Image

Nghiên cứu từ khóa hiệu quả với công cụ phân tích từ khóa

Nghiên cứu từ khóa là một trong những bước quan trọng nhất trong....

Xem Chi Tiết

Image

NHỮNG CÔNG CỤ MARKETING KHÔNG THỂ THIẾU DÀNH CHO MARKETER, SEO VÀ MMO

NHỮNG CÔNG CỤ MARKETING KHÔNG THỂ THIẾU DÀNH CHO MARKETER, SEO VÀ MMO....

Xem Chi Tiết

Image

Những Sản Phẩm Chính Của Google

Google là một công ty công nghệ đa quốc gia của Mỹ, chuyên....

Xem Chi Tiết

Image

Tiếp thị qua công cụ tìm kiếm (SEM)

Tiếp thị qua công cụ tìm kiếm (SEM) là một chiến lược tiếp....

Xem Chi Tiết

Image

100 Sản Phẩm Của Google Mà Bạn Chưa Biết Rất Tuyệt Vời

Nếu có ai đó hỏi bạn hãy kể tên một số sản phẩm....

Xem Chi Tiết

Image

NGUYÊN NHÂN WEBSITE KHÔNG TÌM THẤY TRÊN GOOGLE

Để Website được tìm thấy trên Google thì trang Web của bạn phải....

Xem Chi Tiết

Image

Cách lấy Mã Facebook Pixel

https://www.facebook.com/ads/manager

Xem Chi Tiết

Image

3 điểm mạnh của SEO web vào năm 2018

Dịch vụ SEO giá rẻ của năm 2017 đã đánh dấu những bước....

Xem Chi Tiết

Image

Hướng dẫn cách tự chạy SEO toàn diện dành cho Website của bạn

Dịch vụ SEO giá rẻ hiện nay đang trở thành một cơn sốt....

Xem Chi Tiết

Image

Digital Marketing Là Gì, Và Những Lợi Ích

Hiện nay, khi nhắc đến chủ đề Marketing chúng ta vẫn thường có....

Xem Chi Tiết

Image

SSL là gì và tại sao nó quan trọng cho bảo mật website của bạn

Bạn chỉ cần úp màn hình của chiếc điện thoại lên SnapJet, chiếc....

Xem Chi Tiết