Skrip tombol media sosial yang indah. Tombol sosial sendiri. Mengunggah gambar tombol ke server

Tetapi skrip ini memiliki satu kelemahan - skrip yang menangani perilaku browser ketika salah satu tombol diklik. Inilah bagiannya, di mana Anda sendiri dapat dengan mudah melihat dua masalah:

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

Masalah pertama kecil dan banyak yang mungkin berkata kepada saya, “Hei, Bung menulis ini pada tahun 2012! Ubah saja barisnya dan hanya itu. ” Dan saya setuju dengan Anda bahwa Anda bisa berubahvkontakte.ru ke vk.com dan tutup saja pertanyaannya.

Kedua, blok baru perlu ditulis untuk setiap layanan. Yang juga tidak terlalu bermasalah untuk dilakukan, cukup copy-paste dan hapus/tambahkan parameter yang diperlukan.

Tapi apa yang dilakukan skrip ini pada akhirnya? Itu hanya membuat jendela pop-up yang melewati parameter yang terdaftar. Ini adalah garis-garisnya:

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

Justru karya script ini yang sedikit saya modifikasi. Tetapi lebih lanjut tentang itu di bawah ini. Mari kita lihat tombol itu sendiri dan cara kerjanya.

Pertama, kita perlu memiliki beberapa variabel untuk tombol berbagi:

• $ Judul- Judul (title) halaman
• $ Deskripsi- Deskripsi halaman
• $ GambarUrl - jalur ke gambar halaman
• $ Tautan - tautan langsung ke halaman

Saya menamakannya secara konvensional sehingga jelas jelas berapa banyak dari mereka yang dibutuhkan dan apa saja. Bagaimana mereka akan diambil di situs Anda - secara manual atau otomatis - hanya bergantung pada aplikasi yang akan dijalankan. Misalnya, dalam CMS WordPress akan terlihat seperti ini:

• $ Judul- ini
• $ Deskripsi —
• $ GambarUrl —
• $ Tautan —

Sekarang, di tempat yang kita butuhkan, kita masukkan kode berikut, di mana sebagai ganti variabel kita mengganti nilai yang diperlukan (jika perlu):

Itu saja! Anda dapat melihat hasil pekerjaan di akhir artikel ini.

Tinjau desainer domestik dan skrip tombol media sosial untuk situs web, serta analog asing. Secara singkat, mudah dipahami dan jelas.

Perancang tombol media sosial untuk situs web

2. Cara mudah untuk mendapatkan tautan ke situs - QIP.RU
Tempatkan tombol di situs dan beri pengunjung kesempatan untuk menambahkan materi situs favorit mereka ke bookmark, blog, dan jejaring sosial. Tiga langkah: tempat untuk menandai tombol (situs, Blogger atau WordPress), gaya tombol (out-of-the-box) dan dapatkan tombolnya.

3. Tombol untuk menambahkan konten ke jejaring sosial - Pluso
Tempatkan tombol dan beri pengunjung kesempatan untuk berbagi halaman yang mereka sukai di jejaring sosial, serta mencetak, mengirim email, dan menambahkan bookmark.

4. Layanan kegiatan sosial - UpToLike
Tombol media sosial yang disesuaikan dengan kemampuan untuk mengatur warna, bentuk, ukuran, dan efek khusus. Fitur tambahan adalah widget berbagi gambar PicShare, fungsi "Kutipan" dan fungsi Mengikuti yang disesuaikan.

5. Satu tombol! - untuk semua layanan bookmark dan jejaring sosial
Pilih tombol jenis. Di mana tombol akan dipasang: situs web, Blogger atau WordPress. Tambahkan tombol.

Skrip tombol media sosial untuk situs

1. Tombol sosial yang indah untuk situs - goodshare.js
Tampilkan tombol di hampir semua perangkat. Kode bersih. Dokumentasi singkat. SEO friendly.

2. Tombol skrip untuk bookmark dan jaringan sosial - Share42
Pilih ukuran dan tandai ikon layanan yang ingin Anda gunakan di situs. Pilih opsi yang Anda inginkan. Lihat bagaimana tampilannya dan / atau unduh skrip yang sudah jadi. Instal skrip di situs WordPress Anda, Drupal, dll.

3. Tombol suka media sosial yang indah menggunakan jQuery - Suka Sosial
Skrip tombol "suka" dengan penghitung dengan gaya yang sama untuk jejaring sosial: Facebook, Twitter, VKontakte, Odnoklassniki, Moi Mir, Google+, dan Pinterest.

Analog asing dari tombol media sosial untuk situs web

1. Tombol Bagikan - Tambahkan Ini
Tombol berbagi akan membantu Anda meningkatkan pemirsa situs Anda dengan menarik pengunjung dari sumber lain dan jaringan sosial melalui konten yang didistribusikan.

4. Berbagi Sosial - Posting
Dapatkan nilai lebih dari berbagi media sosial. Layanan ini akan memfasilitasi proses berbagi di jejaring sosial untuk pengunjung, yang akan meningkatkan lalu lintas organik situs.

5. Tombol Bagikan untuk Situs Web Apa Pun - AddToAny
Dapatkan kode tombol media sosial untuk situs web apa pun. Pilih jenis dan gaya tombol, tentukan email dan opsi lainnya, atau pilih salah satu platform: WordPress, Drupal, Tumblr, Joomla, Elgg, WordPress.com, Blogger, TypePad, atau FeedFlare. Dapatkan kode tombol.

Baru-baru ini, setiap detik (jika bukan yang pertama) pelanggan dalam persyaratan untuk pengembangan situs meminta untuk memastikan untuk menautkannya dengan jejaring sosial. Tombol "Sosial" di situs adalah alat nomor 1 untuk menarik audiens target, distribusi konten, dan PR secara umum. Dan itu benar-benar gratis!

Jejaring sosial menyediakan kode untuk tombol dan widget mereka untuk penempatan di situs, dan melampirkan instruksi untuk menginstalnya di sistem manajemen konten. CMS (sistem operasi) apa pun memungkinkan Anda untuk menginstalnya, yang utama adalah menyesuaikannya secara harmonis ke dalam desain situs Anda.

Apa saja fitur dan fungsinya?

Jika situs Anda ditujukan untuk orang-orang yang berkomunikasi dengan media sosial populer. jaringan, misalnya, Vkontakte, Twitter, Instagramm, Facebook, Google+, Pinterest, dll., dan Anda ingin menutupi semuanya, agar tidak mengatur tombol untuk masing-masing secara terpisah, mengingat mereka mungkin berbeda dalam ukuran dan desain , sebaiknya gunakan layanan agregator. Ini adalah alat sederhana dan nyaman yang memungkinkan pengunjung situs berbagi informasi dengan cepat dengan teman-teman mereka, terlepas dari jejaring sosial mana yang mereka gunakan. Di bawah ini kami akan menganalisis layanan paling populer.

Tombol Media Sosial Bagikan Pluso

"Kenapa dia dibutuhkan?" - Anda bertanya. Mungkin, saya mencoba mengikuti perkembangan zaman - kita tertinggal di belakang kaum borjuis, dan promosi situs mereka agak berbeda dari kenyataan kita saat ini.

Jika Anda melihat blog di burzhunet, maka hampir semuanya memiliki berbagai panel mengambang yang memungkinkan Anda untuk menambahkan pengumuman artikel ke jejaring sosial dan bookmark paling populer. Sekarang cukup sulit bagi borjuis untuk maju dengan membeli tautan dan pentingnya sinyal sosial mulai tumbuh secara luar biasa.

Panel memungkinkan Anda untuk meningkatkan jumlah artikel yang dibagikan, dan karenanya memengaruhi. Yah, karena hal seperti ini menunggu kita, akan lebih baik jika kita sedikit mendahului acara.

Mengapa Anda membutuhkan panel Share42, kelebihannya

Saya ingin memiliki panel dengan tombol untuk empat jejaring sosial ini, yang paling relevan untuk Internet Rusia. Ada kemungkinan bahwa sinyal sosial di negara kita mereka belum sekuat di antara kaum borjuis, karena mereka belum cukup untuk melakukan seleksi yang relevan.

Tetapi sekarang lebih baik untuk mulai mengumpulkannya dan bersenjata lengkap ketika Armagedian global datang ke Runet karena dalam pemahaman kita yang menyimpang - penurunan pengaruh yang signifikan dan hukuman yang lebih berat untuk manipulasi tautan.

Secara umum, memasukkan kueri yang berbeda di dan Google, saat mencari versi panel yang sesuai, saya menemukan situs web Dimox.name, tetapi ketika saya melihat panel yang indah di sana, saya tidak menganggap perlu mencari deskripsi tentang instalasinya pada sumber dayanya.

Saya hanya tahu bahwa dia melakukan hal-hal seperti itu sendiri (tanpa plugin), tetapi hari ini saya benar-benar tidak ingin mempelajari nuansa dan pengaturannya. Saya ingin mengambil beberapa potong kode dan mendapatkan yang sangat baik, dari sudut pandang estetika, dan versi yang berfungsi tombol media sosial mengambang.

Kemudian saya menemukan layanan Share42, dan ketika saya melihat tombol media sosial yang sama di atasnya, saya sedikit terkejut - Dimox menggunakan stamping. Ini seperti pembuat sepatu yang terampil akan pergi ke barang-barang konsumen. Namun, setelah mencari-cari sedikit di internet, saya menemukan di mana dia menulis tentang peluncuran layanan gratis untuk pemilihan sendiri, konfigurasi dan mendapatkan kode skrip siap pakai untuk tombol sosial.

Bosan meminta bantuan dalam membuat tombol untuk situs, ia membuka proyek terpisah, yang, menurut saya, sekarang merupakan penawaran terbaik di pasar. Biarkan saya daftar itu pro yang menarik perhatian saya:

Sekarang tentang kontra:

1. Anda harus memiliki setidaknya pemahaman dasar tentang dan. Saya tidak berpikir Anda akan segera terburu-buru membaca publikasi saya, tetapi saya masih berharap niat Anda untuk melakukannya di masa depan (bagaimanapun, saya mencoba, menulis, dan munculnya artikel ini hanya menyebabkan arus keluar pelanggan yang cepat. - ini menyedihkan).

Anda juga perlu membayangkan setidaknya kira-kira bagaimana yang digunakan oleh Anda diatur. Misalnya, Anda tidak perlu menggali kode - Anda dapat menggunakannya (walaupun saya belum mencobanya untuk skrip ini).

Jika kerugiannya tidak signifikan bagi Anda (atau Anda siap untuk mencari kebenaran di tempat), dan keuntungannya signifikan, maka Anda dipersilakan untuk membaca artikel ini lebih lanjut. Apa yang disebut - jangan beralih. Saya akan memandu Anda melalui pengaturan yang sangat sederhana dan tampilan bilah tombol media sosial yang dibuat di Share42 dan cara menginstalnya. Jangan salahkan saya, tetapi pada mesin inilah blog saya bekerja.

Mengonfigurasi Share42 dan menginstal skrip di situs

Saya melemparkan folder ini ke direktori dengan plugin WordPress, jadi pada langkah keempat wizard, saya harus menentukan jalur yang tepat ini:

Dan saya juga harus memberi tanda centang di depan WordPress, karena ini adalah mesin yang digunakan blog saya. Semuanya, dengan pengaturan Bagikan, selesai, tinggal memasukkan kode Html dan CSS yang disarankan di langkah kelima dan keenam wizard. Sebenarnya, di sinilah masalah serius biasanya muncul bagi pengguna yang tidak terlatih.

Perhatikan bahwa isi kode ini berubah seketika ketika Anda membuat perubahan pada pengaturan Anda (Ajax jelas hebat dan mengerikan). Oleh karena itu, ketika memilih bilah mengambang vertikal, Anda harus memasukkan dua potong kode CSS, bukan satu (saat memilih bilah horizontal). Tapi ini semua detailnya, meskipun sangat mengesankan dan menyenangkan (kemuliaan bagi Dimok).

Mari kita bicara tentang yang sederhana dulu - memasukkan kode CSS... Salin satu atau dua cuplikan aturan dan temukan file cascading style sheet yang digunakan template atau skin Anda.

Di WordPress biasanya disebut Style.css dan tinggal di folder dengan tema yang Anda gunakan (/ wp-content / tema / nama tema). Di Joomla, Anda perlu mencari file gaya di folder dengan template yang sedang Anda gunakan (/ templates / nama template)

Buka saja file ini untuk diedit, misalnya, dan tambahkan hingga akhir fragmen kode gaya yang Anda salin (kami akan menempelkan kode Html di tempat lain). Simpan perubahan dan jangan lupa, dengan membuka Filezila, untuk menerapkan perubahan ini dengan menyetujui tawaran pop-up.

Nah, sekarang saatnya berurusan dengan tiga baris Kode skrip HTML Share42... Penulis menyarankan untuk memasukkannya sebelum atau sesudah artikel. Di WordPress, ini tidak mudah, tetapi sangat sederhana. Buka file single.php untuk diedit dari folder dengan tema Anda (ingat, tinggal di /wp-content/themes/nama tema WordPress).

Anda dapat menempelkan kode tepat setelah artikel. Untuk melakukan ini, temukan baris dengan fungsi the_content dan masukkan fragmen yang disarankan tepat setelahnya, misalnya, seperti ini: