programming php

Hướng dẫn dùng javascript urlencode trong PHP

Bài viết này hướng dẫn cách tự làm các nút Chia sẻ liên kết lên các trang Mạng xã hội phổ biến, gồm Facebook, Twitter, Google+, Pinterest và Gmail.

Share Tweet Plus Pin Gmail

2, 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.

Share Tweet Plus Pin Gmail 3.

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


     Share
     Tweet
     Plus
     Pin
     Gmail

Các liên kết trong phần


     Share
     Tweet
     Plus
     Pin
     Gmail

4 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: #2a99ed;
}

.bg-twitter:hover, .bg-twitter:focus {
    background: #268ad5;
}

.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


     Share
     Tweet
     Plus
     Pin
     Gmail

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

Twitter

Ở Twitter, bạn cần truyền vào 2 biến là


     Share
     Tweet
     Plus
     Pin
     Gmail

6 và


     Share
     Tweet
     Plus
     Pin
     Gmail

7, với


     Share
     Tweet
     Plus
     Pin
     Gmail

6 là Nội dung và


     Share
     Tweet
     Plus
     Pin
     Gmail

7 là Liên kết cần chia sẻ.

//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ụ:

//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=//www.inithtml.com/

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

//twitter.com/share?text=&url=//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

.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: #2a99ed;
}

.bg-twitter:hover, .bg-twitter:focus {
    background: #268ad5;
}

.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;
}

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

Pinterest bạn cần truyền vào 3 biến, là


     Share
     Tweet
     Plus
     Pin
     Gmail

7 [liên kết],

.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: #2a99ed;
}

.bg-twitter:hover, .bg-twitter:focus {
    background: #268ad5;
}

.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;
}

2 [đường dẫn hình ảnh] và

.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: #2a99ed;
}

.bg-twitter:hover, .bg-twitter:focus {
    background: #268ad5;
}

.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;
}

3 [mô tả].

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

Ví dụ:

//www.pinterest.com/pin/create/button/?url=//www.inithtml.com/&media=//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

.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: #2a99ed;
}

.bg-twitter:hover, .bg-twitter:focus {
    background: #268ad5;
}

.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;
}

4 và Nội dung cần gửi sau

.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: #2a99ed;
}

.bg-twitter:hover, .bg-twitter:focus {
    background: #268ad5;
}

.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;
}

Toplist mới

Top 6 bản thân em phải làm gì để phòng chống hiv/aids 2023

6 tháng trước

Top 7 số 20 gồm 2 và 0 đúng hay sai 2023

6 tháng trước

Top 7 địa lý lớp 6 bài 19: lớp đất và các nhân tố hình thành đất một số nhóm đất điển hình trang 178 2023

6 tháng trước

Top 7 h thực hiện chủ trương đường lối chính sách của đảng pháp luật của nhà nước 2023

6 tháng trước

Top 6 on tập tiếng việt lớp 7 học kĩ 2 violet 2023

6 tháng trước

HTML và CSS

CSS

Liên kết Chia sẻ

Facebook

Twitter

Google+

Pinterest

Gmail

Bài Viết Liên Quan

Toplist mới

Bài mới nhất

Chủ Đề