Lompat ke konten
[a Humble Request] Klik 1 unit iklan saja di halaman ini untuk menjaga blog tetap aktif dan memberikan wawasan yang berguna.

Cara Membuat Tombol Share Media Sosial di Website eCommerce

TokoDaring.Com – Cara Membuat Tombol Share Media Sosial di Website eCommerce WordPress. Ini artikel teknis bagaimana cara membuat tombol share media sosial di website toko daring WordPress WooCommerce anda.

Cara Membuat Tombol Share Media Sosial di Website eCommerce

Artikel Lainnya:

Membuat Deskripsi Pendek Di Halaman Arsip Produk WooCommerce

Artikel tentang impact dari fitur-fitur sosial media pada website eCommerce, kunjungi artikel kami berikut, integrasi fitur sosial media ke dalam bisnis eCommerce.

Dan berikut adalah beberapa fitur media sosial yang umum dan bisa di integrasikan ke dalam website eCommerce anda dengan mudah.

  • Halaman business (page).
  • Social login.
  • Tombol share dari website ke media sosial.
  • Tombol like facebook.
  • Twitter embeded.
  • Instagram feed.

Cara membuat tombol share media sosial di website

Tombol share media sosial memang seringkali efektif untuk meningkatkan kepercayaan ‘sosial’ pelanggan terhadap bisnis anda.

Tombol media sosial yang terdapat fitur counter di dalamnya bahkan dapat menunjukkan kepada calon pelanggan berapa banyak orang lain yang telah membeli dan merekomendasikan produk anda kepada para pengikutnya (follower).

Dan pada artikel ini kami paparkan tentang cara membuat tombol share media sosial di website WordPress dalam beberapa cara, yaitu :

  • Cara membuat tombol share di website dengan HTML dan CSS.
  • Cara membuat tombol share media sosial menggunakan plugin.

Cara membuat tombol share di website dengan HTML dan CSS.

Tahukah anda, bahwa plugin atau software fitur media sosial termasuk tombol sharing sering di anggap dapat menurunkan performa website anda. Itu karena ada script JS (javascript) pihak ketiga dari platform media sosial tersebut yang harus di eksekusi sebelum dapat di tampilkan di halaman website.

Jika tidak menurunkan performa secara signifikan, jangan kaget jika ada tambahan (http) request di setiap loading halaman website anda. Jikapun anda ingin menggunakan plugin, maka pilihlah plugin yang baik yang di buat oleh developer terpercaya.

Anda tentu tidak ingin itu terjadi, mengorbankan performa (pagespeed) hanya untuk membuat sebuah tombol facebook atau twitter. Namun anda tetap ingin sekali memiliki tombol itu. Selain menggunakan plugin, jalan keluar lainnya adalah dengan membuatnya sendiri dengan menggunakan hanya script HTML dan CSS.

Membuat fitur apapun di website anda dengan tidak menggunakan javascript, akan membuatnya menjadi sangat ringan. Ini bisa membantu anda memiliki banyak tombol media sosial tanpa harus mengorbankan performa.

Jika pun anda memerlukan untuk menyematkan javascript pada fitur tersebut, maka gunakan vanilla javascript dan bukannya library semacam jquery atau library JS lainnya.

Mengaitkannya dengan hook the_content

Berikut ini beberapa langkah atau cara membuat tombol share media sosial di website hanya dengan HTML dan CSS. Untuk bisa di tampilkan ke halaman website eCommerce WordPress anda, tentu saja harus di buat di dalam PHP dengan mengait satu hooks the_content.

Membuat element apapun lalu mengaitkannya pada hook the_content memungkinkan kita untuk memasukannya ke halaman WordPress (post atau page). Lalu kita juga dapat menentukan apakah element yang di buat di tempatkan di awal konten atau di akhir konten.

Tambahkan kode berikut ke dalam file function.php child theme atau menggunakan plugin editor.

/* 
 * cara membuat tombol share media sosial di website
 * cara membuat tombol share di website dengan html & css
 *
 */

add_filter('the_content', 'wpjkt_like_share_artikel');
function wpjkt_like_share_artikel($content) {
    global $post;
    if(is_singular('post')) {
        $wpjktURL = urlencode(get_permalink());
		$wpjktJudulPost = htmlspecialchars(urlencode(html_entity_decode(get_the_title(), ENT_COMPAT, 'UTF-8')), ENT_COMPAT, 'UTF-8');
		$wpjktPinGambar = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'full');
		$facebookURL = 'https://www.facebook.com/sharer/sharer.php?u='.$wpjktURL;
		$twitterURL = 'https://twitter.com/intent/tweet?text='.$wpjktJudulPost.'&url='.$wpjktURL.'&via=TokoDaring';
		$linkedInURL = 'https://www.linkedin.com/shareArticle?mini=true&url='.$wpjktURL.'&title='.$wpjktJudulPost;
		$pinterestURL = 'https://pinterest.com/pin/create/button/?url='.$wpjktURL.'&media='.$wpjktPinGambar[0].'&description='.$wpjktJudulPost;
		$whatsappURL = 'whatsapp://send?text='.$wpjktURL;
		$variable .= '<!-- Like & Share. Tutorial lihat disini https://tokodaring.com/ -->';
		$variable .= '<div class="wpjkt-social-share">';
		$variable .= '<h2>Like & Share:</h2>';
		$variable .= '<p><strong><u>Like & Share :</u></strong> Ada banyak cara untuk menyukai dan men<em>share</em> artikel ini. <strong><u>Komen :</u></strong> Berikan komentar yang relevan, irrelevant comment or spam will never be published. <em>We appreciate you sticking with us</em>.</p>';
		$variable .= '<a class="wpjkt-link wpjkt-facebook" href="'.$facebookURL.'" target="_blank">Facebook</a>';
		$variable .= '<a class="wpjkt-link wpjkt-twitter" href="'.$twitterURL.'" target="_blank">Twitter</a>';
		$variable .= '<a class="wpjkt-link wpjkt-linkedin" href="'.$linkedInURL.'" target="_blank">LinkedIn</a>';
		$variable .= '<a class="wpjkt-link wpjkt-pinterest" href="'.$pinterestURL.'" data-pin-custom="true" target="_blank">Pin It</a>';
		$variable .= '<a class="wpjkt-link wpjkt-whatsapp" href="'.$whatsappURL.'" target="_blank">WA</a>';
		$variable .= '</div>';
		return $variable.$content;
		}else{
		    return $variable.$content;
	}
};

Kini anda sudah memiliki element yang ada di awal konten atau tepatnya di bawah featured image. Dengan beberapa penjelasan terkait script di atas adalah sebagai berikut.

  • Membuat fungsi dengan nama fungsi wpjkt_like_share_artikel.
  • the_content adalah hook yang di gunakan agar element yang di buat bisa di tampilkan di setiap halaman post atau page.
  • if(is_singular('post')) jika anda hanya ingin menampilkanya pada halaman posting.
  • Element yang di buat berada dalam bungkus <div> wpjkt-social-share.
  • Tombol di tampilkan di awal konten, untuk membuatnya di akhir konten ganti return $variable.$content; menjadi return $content.$variable;.

Element tombol yang baru saja anda buat mungkin terlihat berantakan. Untuk membuatnya menjadi rapih, tambahkan kode CSS berikut, atau anda dapat mengaturnya sesuai selera.

// Cara membuat tombol share media sosial di website (CSS)

.wpjkt-social-share {
	border:1px solid;
	padding:8px 4px;
	margin-bottom:2em;
	margin-left:0!important;
	font-size:12px;
}

.wpjkt-social-share p{
	line-height:normal;
}

.wpjkt-link {
	padding:2px 10px;
	color:#fff;
	border-radius:4px;
	margin-right:2px;
	cursor:pointer;
	-moz-background-clip:padding;
	-webkit-background-clip:padding-box;
	display:inline-block;
	text-decoration:none;
	box-shadow:inset 0 -3px 0 rgba(0,0,0,.2);
	-moz-box-shadow:inset 0 -3px 0 rgba(0,0,0,.2);
	-webkit-box-shadow:inset 0 -3px 0 rgba(0,0,0,.2);
}

.wpjkt-link:active,.wpjkt-link:hover {
	color:#fff;
}
.wpjkt-facebook {
	background-color:#3b5997;
}

.wpjkt-facebook:active,.wpjkt-facebook:hover {
	background-color:#2d4372;
}

.wpjkt-twitter {
	background-color:#00aced;
}

.wpjkt-twitter:active,.wpjkt-twitter:hover {
	background-color:#0084b4;
}

.wpjkt-linkedin {
	background-color:#0074a1;
}

.wpjkt-linkedin:active,.wpjkt-linkedin:hover {
	background-color:#006288;
}

.wpjkt-pinterest {
	background-color:#e60023;
}

.wpjkt-pinterest:active,.wpjkt-pinterest:hover {
	background-color:#ad081b;
}

.wpjkt-whatsapp {
	background-color:#25d366;
}

.wpjkt-whatsapp:active,.wpjkt-whatsapp:hover {
	background-color:#128c7e;
}

Cara membuat tombol share media sosial menggunakan plugin.

Beberapa plugin berikut bisa membantu anda membuat tombol share media sosial.

  • Social Media Share Buttons Popup & Pop Up Social Sharing Icons.
  • Social Share Icons & Social Share Buttons.
  • Social Sharing Plugin – Sassy Social Share.
  • Social Share, Social Login and Social Comments Plugin – Super Socializer.
  • Simple Social Media Share Buttons – Social Sharing for Everyone.

Bonus! Membuat Tombol Like Facebook

Untuk menggapai tujuan ini maka anda perlu untuk membuat terlebih dahulu halaman di facebook. Lihat petunjuk facebook bagaimana cara membuat halaman untuk bisnis anda.

Setelah membuat facebook page kami sarankan juga untuk memiliki developer ID atau app ID facebook. Developer ID atau app ID facebook silahkan merefer ke artikel berikut https://developers.facebook.com/docs/apps/.

Setelahnya ikuti langkah-langkah sebagai berikut:

  • Kunjungi halaman Like Button for the Web di website facebook for developer.
  • Pada halaman tersebut sudah terdapat Like Button Configurator.
  • Pada URL to Like masukan alamat URL facebook page yang sudah anda buat.
  • Atur layout, ukuran tombol, width (lebar tombol), dan model tombol yang di inginkan.
  • Preview tombol yang ingin di generate pada kotak preview.
  • Setelah fix, klik Get Code

Menyematkan kode ke halaman website

Ada dua kode yang harus di sematkan ke dalam website anda.

  • Yang pertama adalah kode JavaScript SDK yang harus di sematkan ke dalam file fungsi website. Seperti biasa, anda bisa menambahkannya ke dalam function.php child theme atau menggunakan plugin editor.
/* 
 * Membuat tombol like facebook
 * jssdk
 */

<div id="fb-root"></div>
  <script async defer crossorigin="anonymous"
src="https://connect.facebook.net/en_US/sdk.js#xfbml=1 
&version={graph-api-version}
&appId={facebook-app-id-facebook}
&autoLogAppEvents=1" 
nonce="Abcd1234">
  </script>
  • Yang kedua adalah kode di mana element tombol jempol tersebut ingin di tampilkan.

Atau dengan mengkatrol hook the_content seperti pada cara di atas agar tombol like bisa di tampilkan secara otomatis di setiap halaman postingan.

<iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F
&width=450
&layout=standard
&action=like
&size=small
&share=true
&height=35
&appId={facebook-app-id-facebook}" 
width="450" 
height="35" style="border:none;overflow:hidden"
scrolling="no" 
frameborder="0" 
allowTransparency="true" 
allow="encrypted-media">
</iframe>

Dan hasilnya seperti pada tombol like berikut. Klik pada tombolnya untuk melihat apakah itu bekerja.

Artikel terkait :

Satu Fungsi Untuk Banyak Hook WordPress

Related Ads: