Một kịch bản của các nút truyền thông xã hội đẹp. Các nút xã hội riêng. Tải hình ảnh nút lên máy chủ

Nhưng tập lệnh này có một nhược điểm - một tập lệnh xử lý hành vi của trình duyệt khi một trong các nút được nhấp vào. Đây là một phần của nó, trong đó bản thân bạn có thể dễ dàng nhận thấy hai vấn đề:

Vkontakte: function (purl, ptitle, pimg, text) (url \u003d "http://vkontakte.ru/share.php?"; Url + \u003d "url \u003d" + encodeURIComponent (purl); url + \u003d "& title \u003d "(! LANG: + encodeURIComponent (ptitle); url + \u003d"&description=" + encodeURIComponent(text); url += "&image=" + encodeURIComponent(pimg); url += "&noparse=true"; Share.popup(url); }, !}

Vấn đề đầu tiên là nhỏ và nhiều người có thể nói với tôi, “Này, anh bạn đã viết bài này vào năm 2012! Chỉ cần thay đổi dòng và thế là xong ”. Và tôi đồng ý với bạn rằng bạn chỉ có thể thay đổivkontakte.ru đến vk.com và chỉ cần đóng câu hỏi.

Thứ hai, một khối mới cần được viết cho mỗi dịch vụ. Điều này cũng không quá khó để làm, chỉ cần sao chép-dán và xóa / thêm các thông số cần thiết.

Nhưng cuối cùng thì kịch bản này có tác dụng gì? Nó chỉ tạo một cửa sổ bật lên chuyển các tham số được liệt kê. Đây là những dòng:

Popup: function (url) (window.open (url, "", "toolbar \u003d 0, status \u003d 0, width \u003d 626, height \u003d 436");)

Đó chính xác là công việc của kịch bản này mà tôi đã sửa đổi một chút. Nhưng nhiều hơn về điều đó bên dưới. Chúng ta hãy xem xét bản thân các nút và cách chúng hoạt động.

Đầu tiên, chúng ta cần có một số biến cho các nút chia sẻ:

• $ Title - Tiêu đề (title) của trang
• $ Mô tả - Mô tả trang
• $ ImageUrl - đường dẫn đến hình ảnh trang
• $ Link - liên kết trực tiếp đến trang

Tôi đặt tên chúng theo quy ước để rõ ràng có bao nhiêu trong số chúng là cần thiết và chúng là gì. Chúng sẽ được thực hiện như thế nào trên trang web của bạn - theo cách thủ công hoặc tự động - chỉ phụ thuộc vào ứng dụng mà nó sẽ được thực thi. Ví dụ, trong một CMS WordPress, nó sẽ trông như thế này:

• $ Title - đây là
• $ Mô tả —
• $ ImageUrl —
• $ Link —

Bây giờ, ở nơi chúng ta cần, chúng ta chèn đoạn mã sau, ở vị trí của các biến, chúng ta thay thế các giá trị cần thiết (nếu cần):

Đó là tất cả! Bạn có thể xem kết quả của công việc ở cuối bài viết này.

Đánh giá của các nhà thiết kế trong nước và kịch bản của các nút mạng xã hội cho các trang web, cũng như các công cụ tương tự nước ngoài. Ngắn gọn, dễ hiểu và rõ ràng.

Các nhà thiết kế nút truyền thông xã hội cho trang web

2. Một cách dễ dàng để có được các liên kết đến trang web - QIP.RU
Đặt nút trên trang web và cung cấp cho khách truy cập cơ hội thêm tài liệu trang web yêu thích của họ vào dấu trang, blog và mạng xã hội. Ba bước: đánh dấu vị trí nút (trang web, Blogger hoặc WordPress), tạo kiểu cho các nút (ngoài hộp) và lấy nút.

3. Các nút để thêm nội dung vào mạng xã hội - Pluso
Đặt các nút và cung cấp cho khách truy cập cơ hội chia sẻ các trang họ thích trên mạng xã hội, cũng như in, gửi email và thêm dấu trang.

4. Dịch vụ hoạt động xã hội - UpToLike
Các nút truyền thông xã hội được tùy chỉnh với khả năng thiết lập màu sắc, hình dạng, kích thước và các hiệu ứng đặc biệt. Các tính năng bổ sung là tiện ích chia sẻ hình ảnh PicShare, chức năng "Trích dẫn" và chức năng Theo dõi tùy chỉnh.

5. Một nút! - cho tất cả các dịch vụ của dấu trang và mạng xã hội
Chọn loại nút. Nơi nút sẽ được cài đặt: trang web, Blogger hoặc WordPress. Thêm một nút.

Tập lệnh của các nút mạng xã hội cho trang web

1. Các nút xã hội tuyệt đẹp cho trang web - goodshare.js
Hiển thị các nút trên hầu hết mọi thiết bị. Mã sạch. Tài liệu ngắn gọn. Thân thiện với SEO.

2. Các nút tập lệnh cho dấu trang và mạng xã hội - Chia sẻ42
Chọn kích thước và đánh dấu các biểu tượng của các dịch vụ bạn muốn sử dụng trên trang web. Chọn các tùy chọn bạn muốn. Xem nó sẽ trông như thế nào và / hoặc tải xuống một tập lệnh được tạo sẵn. Cài đặt tập lệnh trên trang web WordPress của bạn, Drupal, v.v.

3. Các nút thích trên mạng xã hội tuyệt đẹp bằng cách sử dụng jQuery - Lượt thích trên mạng xã hội
Một tập lệnh của các nút "thích" với các bộ đếm theo cùng một phong cách cho các mạng xã hội: Facebook, Twitter, VKontakte, Odnoklassniki, My World, Google+ và Pinterest.

Tương tự nước ngoài của các nút mạng xã hội cho một trang web

1. Share Buttons - AddThis
Các nút chia sẻ sẽ giúp bạn tăng lượng người xem trang web của mình bằng cách thu hút khách truy cập từ các tài nguyên và mạng xã hội khác thông qua nội dung được phân phối.

4. Chia sẻ xã hội - Po.st
Nhận nhiều giá trị hơn từ việc chia sẻ trên mạng xã hội. Dịch vụ này sẽ tạo điều kiện thuận lợi cho quá trình chia sẻ trên mạng xã hội cho khách truy cập, điều này sẽ làm tăng lưu lượng truy cập không phải trả tiền của trang web.

5. Chia sẻ các nút cho bất kỳ trang web nào - AddToAny
Nhận mã nút mạng xã hội cho bất kỳ trang web nào. Chọn kiểu và kiểu nút, chỉ định email và các tùy chọn khác hoặc chọn một trong các nền tảng: WordPress, Drupal, Tumblr, Joomla, Elgg, WordPress.com, Blogger, TypePad hoặc FeedFlare. Nhận mã nút.

Gần đây, mỗi giây (nếu không phải là khách hàng đầu tiên) trong các yêu cầu phát triển của trang web yêu cầu phải đảm bảo liên kết nó với các mạng xã hội. Các nút "xã hội" trên trang web là công cụ số 1 để thu hút khán giả mục tiêu, phân phối nội dung và PR nói chung. Và nó hoàn toàn miễn phí!

Mạng xã hội cung cấp mã cho các nút và tiện ích của chúng để đặt trên trang web và đính kèm hướng dẫn cài đặt chúng vào hệ thống quản lý nội dung. Bất kỳ CMS (hệ điều hành) nào đều cho phép bạn cài đặt chúng, điều chính là làm hài hòa chúng với thiết kế của trang web của bạn.

Các tính năng và chức năng là gì?

Nếu trang web của bạn nhắm đến những người giao tiếp với xã hội phổ biến. các mạng, ví dụ: Vkontakte, Twitter, Instagramm, Facebook, Google+, Pinterest, v.v. và bạn muốn bao gồm tất cả chúng, để không đặt các nút cho từng mạng riêng biệt, vì chúng có thể khác nhau về kích thước và thiết kế, chúng tôi khuyên bạn nên sử dụng dịch vụ tổng hợp. Đây là những công cụ đơn giản và tiện lợi cho phép khách truy cập trang web nhanh chóng chia sẻ thông tin với bạn bè của họ, bất kể họ sử dụng mạng xã hội nào. Dưới đây chúng tôi sẽ phân tích các dịch vụ phổ biến nhất.

Các nút trên mạng xã hội Share Pluso

"Tại sao cần cô ấy?" - bạn hỏi. Có lẽ, tôi đang cố gắng bắt kịp thời đại - chúng ta đang tụt hậu so với giai cấp tư sản, và việc quảng bá trang web của họ có phần khác với thực tế hiện tại của chúng ta.

Nếu bạn nhìn vào các blog ở giai cấp tư sản, thì hầu như tất cả chúng đều có các bảng nổi khác nhau cho phép bạn thêm thông báo bài viết vào các mạng xã hội và dấu trang phổ biến nhất. Bây giờ khá khó khăn cho những người tư sản để thăng tiến bằng cách mua các liên kết và tầm quan trọng của các tín hiệu xã hội đã bắt đầu tăng lên đáng kinh ngạc.

Bảng điều khiển cho phép bạn tăng số lượng bài chia sẻ, và do đó ảnh hưởng đến. Chà, vì điều gì đó như thế này đang chờ chúng ta, sẽ đúng hơn nếu bạn đi trước các sự kiện một chút.

Tại sao bạn cần một bảng điều khiển Share42, ưu điểm của nó

Tôi muốn có một bảng điều khiển với các nút cho bốn mạng xã hội này, những mạng này phù hợp nhất với Internet của Nga. Có thể là tín hiệu xã hội ở nước ta, họ chưa phải là toàn năng như trong số các nhà tư sản bởi vì họ chỉ đơn giản là chưa đủ để thực hiện một cuộc tuyển chọn có liên quan.

Nhưng tốt hơn là bây giờ nên bắt đầu thu thập chúng và trang bị đầy đủ khi một Armageddian toàn cầu đến Runet theo hiểu lầm của chúng ta - sự giảm ảnh hưởng đáng kể và hình phạt nghiêm khắc hơn đối với việc thao túng liên kết.

Nói chung, khi nhập các truy vấn khác nhau trên và Google, trong khi tìm kiếm phiên bản phù hợp của bảng điều khiển, tôi đã xem qua trang web Dimox.name, nhưng khi tôi thấy một bảng điều khiển đẹp ở đó, tôi không cho rằng cần phải tìm kiếm mô tả về cài đặt của nó trên tài nguyên của nó.

Tôi chỉ biết rằng anh ấy tự làm những việc như vậy (không có plugin), nhưng hôm nay tôi thực sự không muốn đi sâu vào các sắc thái và cài đặt. Tôi muốn lấy một vài đoạn mã và có được một phiên bản tuyệt vời, theo quan điểm thẩm mỹ và hoạt động các nút mạng xã hội nổi.

Sau đó, tôi xem qua dịch vụ Share42, và khi tôi nhìn thấy các nút mạng xã hội tương tự trên đó, tôi hơi ngạc nhiên - Dimox sử dụng tính năng dập. Nó giống như một người thợ đóng giày lành nghề sẽ đi làm hàng tiêu dùng. Tuy nhiên, lục lọi một chút trên mạng, tôi bắt gặp nơi anh ấy viết về sự ra mắt của một dịch vụ miễn phí để tự lựa chọn, cấu hình và nhận mã tập lệnh được tạo sẵn cho các nút xã hội.

Mệt mỏi với việc yêu cầu trợ giúp trong việc tạo các nút cho trang web, anh ấy đã mở một dự án riêng, theo tôi, hiện tại là dự án tốt nhất trong số các sản phẩm trên thị trường. Hãy để tôi chỉ liệt kê những thuậnđập vào mắt tôi:

Bây giờ về nhược điểm:

1. Bạn cần có ít nhất hiểu biết cơ bản về và. Tôi không nghĩ rằng bạn sẽ ngay lập tức đọc các ấn phẩm của tôi, nhưng tôi vẫn hy vọng ý định của bạn sẽ làm như vậy trong tương lai (dù sao thì, tôi đã cố gắng, viết và sự xuất hiện của những bài báo này chỉ khiến lượng người đăng ký giảm nhanh chóng thôi. - thật đáng buồn).

Bạn cũng sẽ cần phải hình dung ít nhất về cách sắp xếp cái mà bạn sử dụng. Ví dụ: bạn không cần phải đào sâu vào mã - bạn có thể sử dụng nó (mặc dù tôi chưa thử nó cho tập lệnh này).

Nếu những bất lợi không đáng kể đối với bạn (hoặc bạn đã sẵn sàng dậm chân tại chỗ để tìm kiếm sự thật), và những lợi thế là đáng kể, thì bạn có thể đọc thêm bài viết này. Những gì được gọi là - không chuyển đổi. Tôi sẽ trình bày một cách thiết lập rất đơn giản và chế độ xem của thanh nút mạng xã hội đã tạo trên Share42, cũng như cách cài đặt nó. Đừng đổ lỗi cho tôi, nhưng nó là trên động cơ này mà blog của tôi hoạt động.

Định cấu hình Share42 và cài đặt tập lệnh trên trang web

Tôi đã ném thư mục này vào thư mục có plugin WordPress, vì vậy trong bước thứ tư của trình hướng dẫn, tôi phải chỉ định đường dẫn chính xác này:

Và tôi cũng phải đánh dấu trước WordPress, vì đây là công cụ mà blog của tôi sử dụng. Mọi thứ, với cài đặt Chia sẻ, đã kết thúc, chỉ còn cách chèn mã Html và CSS được đề xuất trong bước thứ năm và thứ sáu của trình hướng dẫn. Trên thực tế, đây là nơi các vấn đề nghiêm trọng thường phát sinh đối với những người dùng chưa được đào tạo.

Lưu ý rằng nội dung của mã này thay đổi ngay lập tức khi bạn thực hiện các thay đổi đối với cài đặt của mình (Ajax rõ ràng là tuyệt vời và khủng khiếp). Do đó, khi chọn thanh nổi dọc, bạn sẽ phải chèn hai đoạn mã CSS thay vì một (khi chọn thanh ngang). Nhưng đây đều là những chi tiết, mặc dù rất ấn tượng và dễ chịu (vinh quang cho Dimoks).

Hãy nói về điều đơn giản đầu tiên - chèn mã CSS... Sao chép một hoặc hai đoạn mã quy tắc và tìm tệp biểu định kiểu xếp tầng mà mẫu hoặc skin của bạn sử dụng.

Trong WordPress, nó thường được gọi là Style.css và nằm trong thư mục có chủ đề bạn đang sử dụng (/ wp-content / themes / theme name). Trong Joomla, bạn cần tìm tệp kiểu trong thư mục có mẫu mà bạn hiện đang sử dụng (/ template / tên mẫu)

Ví dụ: bạn chỉ cần mở tệp này để chỉnh sửa và thêm vào cuối các đoạn mã kiểu mà bạn đã sao chép (chúng tôi sẽ dán mã Html vào nơi khác). Lưu các thay đổi và đừng quên, bằng cách truy cập Filezila, để áp dụng các thay đổi này bằng cách đồng ý với đề nghị bật lên.

Vâng, bây giờ là lúc để giải quyết ba dòng Mã script html Share42... Tác giả khuyên nên chèn chúng trước hoặc sau các bài báo. Trong WordPress, điều này không dễ dàng, nhưng rất đơn giản. Mở tệp single.php để chỉnh sửa từ thư mục có chủ đề của bạn (hãy nhớ rằng nó nằm ở / wp-content / themes / tên của chủ đề WordPress).

Bạn có thể dán mã ngay sau các bài viết. Để thực hiện việc này, hãy tìm dòng có hàm the_content và chèn đoạn được đề xuất ngay sau nó, chẳng hạn như sau: