mang phổ biến bạn hỏi phương pháp chèn tiện ích chia sẻ addthis social sharing toolbox sao giống như giao diện Metro Simple mà HHV đang dùng. Thực tế thì HHV đã sản xuất đoạn code đấy ở đây tuy nhiên trong bài viết này HHV sẽ hướng dẫn quý khách tùy biến tiện ích này gần như và linh động hơn
1. Về trang web Addthis.com
bí quyết đây ít lâu trang Addthis.com vừa mới thay đổi giao diện mới đồng thời cũng bắt đầu mở rộng những tiện ích ngoại trừ social sharing toolbox được hướng dẫn trong bài viết này còn với follow widget và welcome bar.
Addthis là 1 dịch vụ rất nổi danh tự nhận là nền tảng chia sẻ lớn nhất thế giới. Addthis sản xuất 1 bộ công cụ chia sẻ (social sharing tools), follow widget và welcome. Addthis giúp các nâng cao lượng truy cập các trang web bằng sự kết nối thông qua các dịch vụ xã hội như Facebook, Twitter, Pinterest, Google+…. Đối có các thành viên đăng ký Addthis cung ứng công cụ để theo dõi và phân tích nhằm giúp định hướng nội dung và phương thức chia sẻ.
>>> mang thể bạn quan tâm: Thiết kế web theo yêu cầu
2. Hướng dẫn phương pháp chèn code mặc định
cách chèn code siêu cơ bản bạn vào phần trang Social Sharing Toolbox chỉ cần 3 bước là mang thể lấy được code chèn vào bất kỳ trang blog/website nào.
Bước 1: mua nền tảng: bạn tiêu dùng platform nào thì tậu platform đấy, addthis hỗ trợ Blogger, WordPress, Tumblr, TypePad, Posterous, Joomla, Drupal, Magento…
Bước 2: tìm style, bạn sở hữu thể chọn button (một nút nhấn) hoặc toolbox tập hợp đa dạng nút nhấn của các dịch vụ. Đây sẽ là phần chúng ta tùy chỉnh và tạo buộc phải bản sắc của riêng mình. Ở đây ta lấy ví dụ là tiêu dùng tools box
Bước 3: Copy đoạn code và chèn code vào bất cứ vị trí nào bạn thích trong blog/website. Thông thường đoạn code sở hữu dạng như sau.
- <!-- AddThis Button BEGIN -->
- <div class="addthis_toolbox addthis_default_style ">
- <a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
- <a class="addthis_button_tweet"></a>
- <a class="addthis_button_google_plusone" g:plusone:size="medium"></a>
- <a class="addthis_counter addthis_pill_style"></a>
- </div>
- <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4fbe76dc0e946530"></script>
- <!-- AddThis Button END –>
3. Tùy biến Addthis social sharing toolbox
Trong ví như bạn ko muốn tùy chỉnh sâu hơn Addthis social sharing toolbox thì làm cho theo hướng dẫn dưới đây.
một. thông minh hóa tốc độ trang
Bạn chỉ bắt buộc đặt 1 đoạn code JS cho toàn bộ trang cho cần HHV bắt buộc bạn phải cắt riêng đoạn code js bên dưới và chèn nó vào ngay bên trên thẻ </body>.
- <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4fbe76dc0e946530"></script>
2. Tùy chỉnh hình ảnh riêng cho button
Phần code bên dưới ưng có mỗi dịch vụ mạng xã hội hoặc chia sẻ được hiển trị trong toolbox.
- <a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
Trong ấy
- addthis_button_facebook_like chỉ định dịch vụ chia sẻ
- fb:like:layout="button_count" chỉ định style của nút chia sẻ (có thể có hoặc không)
Để chọn hiểu thêm về code này bạn phải chọn hiểu API của Addthis.
giả dụ bạn muốn hiển thị những dịch vụ ưa thích của mình thì bắt buộc biết đoạn code chỉ định dịch vụ chia sẻ. Theo link sau để tham khảo các dịch vụ mà Addthis hỗ trợ. Điều thú vị là Addthis hỗ trợ cả ZingMe có mã chỉ định là zingme. Trong toolbox đoạn code sẽ như sau.
- <a class="addthis_button_zingme"></a>
>>> Dịch vụ hay: Thiet ke website responsive
Tuy nhiên bạn còn muốn thay đổi ảnh mặc định của addthis thành một hình ảnh nào khác của riêng bạn. Cũng dễ thôi, đoạn code đó là
- <a class="addthis_button_zingme"><img alt='Share to ZingMe' border='0' src="imglink"/></a>
Bạn thay imglink bằng đường link của bức ảnh.
Đối sở hữu một số dịch vụ mạng xã hội nức tiếng như Facebook, Pinterest, Google+… Addthis có đông đảo tùy chọn khác nhau. đến link sau để tham khảo và chọn thứ bạn thích
0 nhận xét:
Đăng nhận xét