How to Add Stylish Like and Dislike Button in Posts (Without Plugins)?

हेलो फ्रेंड यदि आप अपने ब्लॉग पोस्ट के Like and Dislike Button लगाना चाहते हैं तो आज की जानकारी में हम आपको बताएंगे कैसे आप अपने ब्लॉग पोस्ट के नीचे पोस्ट लाइक ओर डिसलाइक बटन लगा सकते हैं इस जानकारी में है Blogger Platform और wordpress.com दोनों के लिए बताएंगे जिससे कि वह अपने ब्लॉग पोस्ट के अंत में पोस्ट लाइक ओर डिसलाइक बटन लगा सकें।

Like and Dislike Button लगाने से वेबसाइट या ब्लॉग पोस्ट के रिव्यु को जान पाते हैं जिसको हमारे पोस्ट पसंद आते हैं वह हमारे आर्टिकल लोग को लाइक करके रिव्यू देते हैं

यदि आप बनाकर WordPress platform पर है तो आप WordPress Like and Dislike Button का इस्तेमाल करके लाइक और डिसलाइक बटन लगा सकते हैं और यदि आप वर्डप्रेस पर हैं तो आप Plugins का भी इस्तेमाल करके लाइक एंड डिसलाइक बटन लगा सकते हैं।

Stylish Like and Dislike Button

Like and dislike button लगाने के फायदे?

Likes and dislike button कई फायदे होते है। इससे आपके ब्लॉग पर लिखे पोस्ट को रिव्यू मिलता है। विजिटर आपकी पोस्ट को कितना पसंद करते है। आपको पता होना चाहिए।

और आपका ब्लॉग या वेबसाइट को professional look मिलता है। सभी पोस्ट के नीचे  likes and dislike button लगाने से

WordPress Stylish Like and Dislike Button Code?

वर्डप्रेस पोस्ट के नीचे लाइक और डिस्क लाइक बटन लगाने के लिए हमें एचटीएमएल स्क्रिप्ट और सीएसएस की जरूरत पड़ती है।

1. तो सबसे पहले आपको नीचे दिए गए कोर्ट को function.php में पेस्ट करके सेव करना है।

<?php
	//---- Add buttons to top of post content
	function ip_post_likes($content) {
		// Check if single post
		if(is_singular('post')) {
			ob_start();

			?>
				<ul class="likes">
					<li class="likes__item likes__item--like">
						<a href="<?php echo add_query_arg('post_action', 'like'); ?>">
							Like (<?php echo ip_get_like_count('likes') ?>)
						</a>
					</li>
					<li class="likes__item likes__item--dislike">
						<a href="<?php echo add_query_arg('post_action', 'dislike'); ?>">
							Dislike (<?php echo ip_get_like_count('dislikes') ?>)
						</a>
					</li>
				</ul>
			<?php

			$output = ob_get_clean();

			return $output . $content;
		}else {
			return $content;
		}
	}

	add_filter('the_content', 'ip_post_likes');

	//---- Get like or dislike count
	function ip_get_like_count($type = 'likes') {
		$current_count = get_post_meta(get_the_id(), $type, true);

		return ($current_count ? $current_count : 0);
	}

	//---- Process like or dislike
	function ip_process_like() {
		$processed_like = false;
		$redirect       = false;

		// Check if like or dislike
		if(is_singular('post')) {
			if(isset($_GET['post_action'])) {
				if($_GET['post_action'] == 'like') {
					// Like
					$like_count = get_post_meta(get_the_id(), 'likes', true);

					if($like_count) {
						$like_count = $like_count + 1;
					}else {
						$like_count = 1;
					}

					$processed_like = update_post_meta(get_the_id(), 'likes', $like_count);
				}elseif($_GET['post_action'] == 'dislike') {
					// Dislike
					$dislike_count = get_post_meta(get_the_id(), 'dislikes', true);

					if($dislike_count) {
						$dislike_count = $dislike_count + 1;
					}else {
						$dislike_count = 1;
					}

					$processed_like = update_post_meta(get_the_id(), 'dislikes', $dislike_count);
				}

				if($processed_like) {
					$redirect = get_the_permalink();
				}
			}
		}

		// Redirect
		if($redirect) {
			wp_redirect($redirect);
			die;
		}
	}

	add_action('template_redirect', 'ip_process_like');
?>

• ऊपर वाले कोर्ट को function.php में सेव करने के बाद आप आपको उसका सीसर्च फाइल सेव करना है। नीचे दिए गए सीसर्च फाइल को कॉपी करके Additional Css में सेव कर दें।

.likes {
	display: flex;
}

.likes__item {
	list-style: none;
}

.likes__item:not(:last-child) {
	margin-right: 20px;
}

.likes__item a {
	padding: 10px 15px;
	display: inline-block;
	border-bottom: 2px solid;
	border-radius: 3px;
	box-shadow: none;
	background: #f5f5f5;
	font-size: 14px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 1px;
	line-height: 100%;
}

.likes__item a:hover {
	color: #fff;
}

.likes__item--like a {
	border-bottom-color: #47ba72;
	color: #47ba72;
}

.likes__item--dislike a {
	border-bottom-color: #ba6547;
	color: #ba6547;
}

.likes__item--like a:hover {
	background: #47ba72;
}

.likes__item--dislike a:hover {
	background: #ba6547;
}

• जिसके बाद आप देख सकते हैं आपके पोस्ट के नीचे लाइक ओर डिसलाइक बटन दिखने लगेगा।

इसी तरह ब्लॉगर ब्लॉग में भी Like and Dislike Button लगा सकते हैं।

1.Transpert Like and dislike button-

DEMO

<!-- hindihelp4u.com BEGIN -->
<span class="likebtn-wrapper" data-theme="github" data-identifier="item_1"></span>
<script>(function(d,e,s){if(d.getElementById("likebtn_wjs"))return;a=d.createElement(e);m=d.getElementsByTagName(e)[0];a.async=1;a.id="likebtn_wjs";a.src=s;m.parentNode.insertBefore(a, m)})(document,"script","//w.likebtn.com/js/w/widget.js");</script>
<!-- hindihelp4u.com END -->

2– Drop style Like and dislike button

DEMO

<!-- hindihelp4u.com BEGIN -->
<span class="likebtn-wrapper" data-theme="drop" data-identifier="item_1"></span>
<script>(function(d,e,s){if(d.getElementById("likebtn_wjs"))return;a=d.createElement(e);m=d.getElementsByTagName(e)[0];a.async=1;a.id="likebtn_wjs";a.src=s;m.parentNode.insertBefore(a, m)})(document,"script","//w.likebtn.com/js/w/widget.js");</script>
<!-- hindihelp4u.com END -->

3.Black and white Likes and dislike button

DEMO

<!--hindihelp4u.com BEGIN -->
<span class="likebtn-wrapper" data-theme="black" data-identifier="item_1"></span>
<script>(function(d,e,s){if(d.getElementById("likebtn_wjs"))return;a=d.createElement(e);m=d.getElementsByTagName(e)[0];a.async=1;a.id="likebtn_wjs";a.src=s;m.parentNode.insertBefore(a, m)})(document,"script","//w.likebtn.com/js/w/widget.js");</script>
<!--hindihelp4u.com END -->

4.Colourfull Likes and dislike button

DEMO

<!-- hindihelp4u.com BEGIN -->
<span class="likebtn-wrapper" data-theme="greenred" data-identifier="item_1"></span>
<script>(function(d,e,s){if(d.getElementById("likebtn_wjs"))return;a=d.createElement(e);m=d.getElementsByTagName(e)[0];a.async=1;a.id="likebtn_wjs";a.src=s;m.parentNode.insertBefore(a, m)})(document,"script","//w.likebtn.com/js/w/widget.js");</script>
<!-- hindihelp4u.com END -->

5.Lovely Likes and dislike button-

DEMO

<!-- hindihelp4u.com BEGIN -->
<span class="likebtn-wrapper" data-theme="disk" data-identifier="item_1"></span>
<script>(function(d,e,s){if(d.getElementById("likebtn_wjs"))return;a=d.createElement(e);m=d.getElementsByTagName(e)[0];a.async=1;a.id="likebtn_wjs";a.src=s;m.parentNode.insertBefore(a, m)})(document,"script","//w.likebtn.com/js/w/widget.js");</script>
<!--hindihelp4u.com END -->

• Blog/Website में Like and Dislike Button कैसे लगाए?

तो इस तरह से आप अपने ब्लॉगर या वर्डप्रेस वेबसाइट ब्लॉक के पोस्ट के नीचे Like and Dislike Button को सामी से लगा सकते हैं।