Skrip butang media sosial yang indah. Butang sosial sendiri. Memuat naik gambar butang ke pelayan

Tetapi skrip ini mempunyai satu kelemahan - skrip yang menangani tingkah laku penyemak imbas apabila salah satu butang diklik. Inilah sebahagian daripadanya, di mana anda sendiri dapat melihat dua masalah dengan mudah:

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

Masalah pertama adalah kecil dan banyak yang mungkin berkata kepada saya, “Hai, kawan menulis ini pada tahun 2012! Cukup ubah garis dan itu sahaja. " Dan saya bersetuju dengan anda bahawa anda boleh berubahvkontakte.ru ke vk.com dan tutup soalannya.

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

Tetapi apa yang dilakukan skrip ini pada akhirnya? Ini hanya membuat tetingkap pop timbul yang melewati parameter yang disenaraikan. Inilah garis-garis:

Muncul: fungsi (url) (window.open (url, "", "toolbar = 0, status = 0, lebar = 626, tinggi = 436");)

Tepatnya karya skrip ini saya sedikit ubahsuai. Tetapi lebih banyak lagi di bawah. Mari kita lihat butang itu sendiri dan bagaimana ia berfungsi.

Pertama, kita perlu mempunyai beberapa pemboleh ubah untuk butang perkongsian:

• $ Tajuk- Tajuk (tajuk) halaman
• Penerangan $- Penerangan halaman
• $ ImageUrl - jalan ke gambar halaman
• $ Pautan - pautan terus ke halaman

Saya menamakannya secara konvensional sehingga jelas berapa banyak dari mereka diperlukan dan apa sebenarnya. Cara mereka akan diambil di laman web anda - secara manual atau automatik - hanya bergantung pada aplikasi yang akan dijalankan. Sebagai contoh, dalam CMS WordPress akan kelihatan seperti ini:

• $ Tajuk- ini adalah
• Penerangan $ —
• $ ImageUrl —
• $ Pautan —

Sekarang, di tempat yang kita perlukan, kita memasukkan kod berikut, di mana pemboleh ubah kita menggantikan nilai yang diperlukan (jika perlu):

Itu sahaja! Anda dapat melihat hasil karya pada akhir artikel ini.

Ulasan pereka domestik dan skrip butang media sosial untuk laman web, serta analog asing. Secara ringkas, difahami dan jelas.

Pereka butang media sosial untuk laman web

2. Cara mudah untuk mendapatkan pautan ke laman web - QIP.RU
Letakkan butang di laman web dan beri peluang kepada pengunjung untuk menambahkan bahan laman web kegemaran mereka ke penanda halaman, blog dan rangkaian sosial. Tiga langkah: tempat menandakan butang (laman web, Blogger atau WordPress), gaya butang (pilihan siap pakai) dan dapatkan butang.

3. Butang untuk menambahkan kandungan ke rangkaian sosial - Pluso
Letakkan butang dan beri peluang kepada pengunjung untuk berkongsi halaman yang mereka suka di rangkaian sosial, serta mencetak, menghantar e-mel dan menambah penanda halaman.

4. Perkhidmatan aktiviti sosial - UpToLike
Butang media sosial yang disesuaikan dengan kemampuan untuk menetapkan warna, bentuk, saiz dan kesan khas. Ciri tambahan adalah widget perkongsian gambar PicShare, fungsi "Quote" dan fungsi Mengikuti yang disesuaikan.

5. Satu butang! - untuk semua perkhidmatan penanda halaman dan rangkaian sosial
Pilih butang jenis. Tempat butang akan dipasang: laman web, Blogger atau WordPress. Tambah butang.

Skrip butang media sosial untuk laman web ini

1. Butang sosial yang indah untuk laman web - goodshare.js
Butang paparan pada hampir semua peranti. Kod bersih. Dokumentasi ringkas. Mesra SEO.

2. Butang skrip untuk penanda buku dan rangkaian sosial - Share42
Pilih ukuran dan tandakan ikon perkhidmatan yang ingin anda gunakan di laman web ini. Pilih pilihan yang anda mahukan. Lihat bagaimana rupanya dan / atau muat turun skrip siap pakai. Pasang skrip di laman WordPress, Drupal, dll.

3. Media sosial yang cantik seperti butang menggunakan jQuery - Suka Sosial
Skrip butang "suka" dengan kaunter dengan gaya yang sama untuk rangkaian sosial: Facebook, Twitter, VKontakte, Odnoklassniki, Moi Mir, Google+ dan Pinterest.

Analog asing butang media sosial untuk laman web

1. Kongsi Butang - TambahThis
Butang berkongsi akan membantu anda meningkatkan khalayak laman web anda dengan menarik pengunjung dari sumber dan rangkaian sosial lain, melalui kandungan yang diedarkan.

4. Perkongsian Sosial - Po.st
Dapatkan lebih banyak nilai dari perkongsian media sosial. Perkhidmatan ini akan memudahkan proses perkongsian di rangkaian sosial untuk pelawat, yang akan meningkatkan lalu lintas organik laman web ini.

5. Kongsi Butang untuk Mana-mana Laman Web - AddToAny
Dapatkan kod butang media sosial untuk mana-mana laman web. Pilih jenis dan gaya butang, tentukan e-mel dan pilihan lain, atau pilih salah satu platform: WordPress, Drupal, Tumblr, Joomla, Elgg, WordPress.com, Blogger, TypePad, atau FeedFlare. Dapatkan kod butang.

Baru-baru ini, setiap pelanggan (jika bukan yang pertama) dalam keperluan pembangunan laman web ini meminta untuk memastikannya menghubungkannya dengan rangkaian sosial. Butang "Sosial" di laman web ini adalah alat nombor 1 untuk menarik khalayak sasaran, pengedaran kandungan dan PR secara umum. Dan ia adalah percuma!

Rangkaian sosial menyediakan kod untuk butang dan widget mereka untuk penempatan di laman web ini, dan melampirkan arahan untuk memasangnya dalam sistem pengurusan kandungan. Sebarang CMS (sistem operasi) membolehkan anda memasangnya, perkara utama adalah memasangkannya dengan harmoni ke dalam reka bentuk laman web anda.

Apa ciri dan fungsi?

Sekiranya laman web anda ditujukan kepada orang yang berkomunikasi dengan sosial yang popular. rangkaian, contohnya, Vkontakte, Twitter, Instagramm, Facebook, Google+, Pinterest, dan lain-lain, dan anda mahu merangkumi semuanya, supaya tidak menetapkan butang untuk masing-masing secara berasingan, memandangkan saiznya mungkin berbeza dan reka bentuk, kami mengesyorkan menggunakan perkhidmatan agregator. Ini adalah alat yang mudah dan senang yang membolehkan pengunjung laman web untuk berkongsi maklumat dengan rakan mereka dengan cepat, tanpa mengira rangkaian sosial yang mereka gunakan. Di bawah ini kami akan menganalisis perkhidmatan yang paling popular.

Butang Media Sosial Kongsi Pluso

"Kenapa dia diperlukan?" - anda bertanya. Mungkin, saya cuba mengikuti zaman - kita ketinggalan dengan borjuasi, dan promosi laman web mereka agak berbeza dengan kenyataan kita sekarang.

Sekiranya anda melihat blog di burzhunet, maka hampir semuanya mempunyai pelbagai panel terapung yang membolehkan anda menambahkan pengumuman artikel ke rangkaian sosial dan penanda buku yang paling popular. Sekarang agak sukar bagi borjuasi untuk maju dengan membeli pautan dan kepentingan isyarat sosial telah mulai berkembang dengan sangat luar biasa.

Panel ini membolehkan anda menambah bilangan perkongsian artikel, dan oleh itu mempengaruhi. Oleh kerana perkara seperti ini menanti kita, adalah betul untuk mendahului acara sedikit.

Mengapa anda memerlukan panel Share42, kelebihannya

Saya ingin mempunyai panel dengan butang untuk empat rangkaian sosial ini, yang paling relevan dengan Internet Rusia. Ada kemungkinan bahawa isyarat sosial di negara kita, mereka belum lagi maha kuasa seperti di kalangan borjuasi kerana mereka belum cukup untuk melakukan pemilihan yang relevan.

Tetapi adalah lebih baik sekarang untuk mula mengumpulkannya dan bersenjata sepenuhnya ketika Armageddian global datang ke Runet untuk pemahaman sesat kita - penurunan pengaruh yang signifikan dan hukuman yang lebih berat untuk manipulasi pautan.

Secara umum, memasukkan pertanyaan yang berbeza di dan Google, semasa mencari versi panel yang sesuai, saya menjumpai laman web Dimox.name, tetapi ketika saya melihat panel yang indah di sana, saya tidak menganggap perlu mencari penerangan mengenai pemasangannya pada sumbernya.

Saya hanya tahu bahawa dia melakukan perkara seperti itu sendiri (tanpa plugin), tetapi hari ini saya tidak mahu menyelami nuansa dan tetapannya. Saya ingin mengambil beberapa kod dan mendapatkan yang terbaik, dari sudut estetik, dan versi yang berfungsi butang media sosial terapung.

Kemudian saya menemui perkhidmatan Share42, dan ketika saya melihat butang media sosial yang sama di atasnya, saya sedikit terkejut - Dimox menggunakan stamping. Rasanya seperti tukang kasut yang mahir akan pergi ke barangan pengguna. Namun, setelah mengecewakan sedikit di internet, saya terjumpa di mana dia menulis mengenai pelancaran perkhidmatan percuma untuk pemilihan diri, konfigurasi dan mendapatkan kod skrip selesai untuk butang sosial.

Bosan meminta pertolongan dalam membuat butang untuk laman web ini, dia membuka projek yang terpisah, yang, pada pendapat saya, kini adalah yang terbaik dari semua tawaran di pasaran. Izinkan saya menyenaraikannya kebaikan yang menarik perhatian saya:

Sekarang mengenai keburukan:

1. Anda mesti mempunyai sekurang-kurangnya pemahaman asas mengenai dan. Saya tidak fikir anda akan terburu-buru membaca penerbitan saya, tetapi saya masih berharap niat anda untuk melakukannya pada masa akan datang (bagaimanapun, saya mencuba, saya menulis, dan kemunculan artikel ini hanya menyebabkan aliran keluar pelanggan yang cepat. - ia sedih).

Anda juga perlu membayangkan sekurang-kurangnya bagaimana cara yang digunakan oleh anda disusun. Contohnya, anda tidak perlu menggali kod - anda boleh menggunakannya (walaupun saya belum mencuba skrip ini).

Sekiranya kelemahan tidak ketara bagi anda (atau anda bersedia untuk terus berjalan mencari kebenaran), dan kelebihannya adalah ketara, anda boleh membaca artikel ini lebih lanjut. Apa yang dipanggil - jangan beralih. Saya akan memandu anda melalui penyediaan dan paparan bar butang media sosial yang dibuat di Share42 dan cara memasangnya. Jangan salahkan saya, tetapi pada enjin inilah blog saya berfungsi.

Mengkonfigurasi Share42 dan memasang skrip di laman web

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

Dan saya juga harus mencentang di hadapan WordPress, kerana inilah mesin yang digunakan blog saya. Segala-galanya, dengan tetapan Kongsi, selesai, hanya tinggal memasukkan kod Html dan CSS yang disarankan pada langkah kelima dan keenam wizard. Sebenarnya, di sinilah masalah serius biasanya timbul bagi pengguna yang tidak terlatih.

Perhatikan bahawa kandungan kod ini berubah seketika apabila anda membuat perubahan pada tetapan anda (Ajax jelas hebat dan mengerikan). Oleh itu, semasa memilih bar terapung menegak, anda perlu memasukkan dua keping kod CSS dan bukannya satu (semasa memilih bar mendatar). Tetapi ini semua perinciannya, walaupun sangat mengagumkan dan menyenangkan (kemuliaan bagi Dimoks).

Mari kita bincangkan yang mudah terlebih dahulu - memasukkan kod CSS... Salin cuplikan peraturan atau dua dan cari fail helaian gaya lata templat atau kulit anda gunakan.

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 fail gaya dalam folder dengan templat yang sedang anda gunakan (/ templat / nama templat)

Cukup buka fail ini untuk diedit, sebagai contoh, dan tambahkan bahagian akhir kod gaya yang anda salin (kami akan menampal kod Html di tempat lain). Simpan perubahan dan jangan lupa, dengan pergi ke Filezila, untuk menerapkan perubahan ini dengan bersetuju dengan tawaran pop timbul.

Nah, sekarang tiba masanya untuk menangani tiga baris Kod skrip html Share42... Penulis menasihatkan memasukkannya sebelum atau selepas artikel. Di WordPress, ini tidak mudah, tetapi sangat mudah. Buka fail single.php untuk diedit dari folder dengan tema anda (ingat, ia tinggal di / wp-content / themes / nama tema WordPress).

Anda boleh menampal kodnya tepat selepas artikel. Untuk melakukan ini, cari garis dengan fungsi_content dan masukkan fragmen yang dicadangkan tepat selepasnya, misalnya, seperti ini: