أداة إظهار المحتوى المخفى بعد مشاركة الموضوع على المواقع الإجتماعية

بسم الله الرحمن الرحيم

والصلاة والسلام على أشرف المرسلين

سيدنا محمد وعلى آله وصحبه أجمعين

لا أحد يستطيع أن ينكر أهمية دور المواقع الإجتماعية فى الترويج لموضوعات المواقع والمدونات ، لذلك من الإضافات الهامة لأى موقع هى أزرار الإعجاب أو المشاركة على المواقع الإجتماعية "الفيس بوك ، تويتر ، جوجل بلس " وقد قدمت من قبل العديد من إضافات المواقع الإجتماعية بمختلف أشكالها ، ولكن اليوم أقدم لكم إضافة إخفاء جزء من المحتوى أو رابط أو صورة وإظهاره بعد الضغط على أزرار الإعجاب like / tweet / +1 .

 

تعتمد هذه الإضافة على تقنية JQuery وهى مناسبة لكل صفحات الويب HTML وتعمل جيدا على مدونات بلوجر ، ووردبريس.

هذه الإضافة تشبه تلك التى بالمنتديات "أضف رد لإظهار المحتوى المخفى" ولكنها أبسط كثيرا بالنسبة للزائر وغير مزعجة له، فبضغطة واحدة يتم نشر رابط الموضوع للموقع الإجتماعى للزائر (Facebook,Tweeter,Google plus) ومشاركته مع أصدقاء الزائر ويكون هذا شرط ظهور المحتوى المخفى لذلك لها دور كبير فى زيادة إحصائيات موقعك وزيادة عدد زوار ومتابعين الموقع .

كيفية تركيب الكود داخل الموضوعات على مدونات بلوجر

أضف أحد الأكواد الآتية فى تبويب Html للموضوع أو المشاركة على بلوجر ثم أضف المحتوى المخفى داخل الكود فى المكان المحدد له، ويختلف السطر الأخير فى الكود إذا كان المحتوى المخفى صورة أو رابط أو نص وإليكم كل كود على حدة حسب نوع المحتوى المخفى.

إذا كان المحتوى المخفى صورة

 إنسخ الكود التالى كاملا

<style tyle="text/css">
			.secret{
				display:none;
			}
		</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">

/* Facebook */
(function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "//connect.facebook.net/en_US/all.js";
     fjs.parentNode.insertBefore(js, fjs);
 }(document, 'script', 'facebook-jssdk'));

window.fbAsyncInit = function() {
    // init the FB JS SDK
    FB.init({
      status     : true,                                 
      xfbml      : true                                  
    });

    FB.Event.subscribe('edge.create', function(href, widget) {
        $.event.trigger({
            type: "pageShared",
            url: href
        });     
    });
};

/* Twitter */
  window.twttr = (function (d,s,id) {
  var t, js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return; js=d.createElement(s); js.id=id;
  js.src="https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs);
  return window.twttr || (t = { _e: [], ready: function(f){ t._e.push(f) } });
}(document, "script", "twitter-wjs"));

twttr.ready(function (twttr) {
    twttr.events.bind('tweet', function (event) {
        $.event.trigger({
            type: "pageShared",
            url: event.target.baseURI
        });
    });
});

/* Google Plus */
(function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();

function plusOned(obj){
	console.log(obj);
	$.event.trigger({
	    type: "pageShared",
	    url: obj.href
	});
}

  
/* Listen for the pageShared event */
$(document).on('pageShared',function(e){
	if(e.url == window.location.href){
		$(".secret").show();
	}
});

</script>
<div align="center"> <p>شارك الموضوع لظهور المحتوى المخفى</p>

<fb:like send="false" width="95" show_faces="true" layout="box_count" font="verdana"></fb:like>
<a href="https://twitter.com/share" class="twitter-share-button" data-via="DrRo2" data-count="vertical"></a>
<g:plusone size="tall" callback="plusOned"></g:plusone>

<div class="secret"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEcdDLQz8THCL7GAveN3CjIN83hYrumKpxfxRJlxe8MfhQA_fXi-4kTEUr3NziItYs4Fm-aPcqGGgS9Mmn09qcLOFuACRwhYgWR7hjT3OT-W4MsWAj2Qvn6TSFU705GdPggQhLj_vPLVrF/s320/46710.jpg"/><br/><span style="font-size: xx-small;"> <a href="http://condaianllkhir.com/">Blogger widgets by condaianllkhir.com</a></span></span><br /></div>

إستبدل رابط الصورة الملون باللون الأصفر بالكود برابط الصورة المراد إخفاؤها

إذا كان المحتوى المخفى رابط

 إنسخ الكود التالى كاملا

<style tyle="text/css">
			.secret{
				display:none;
			}
		</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">

/* Facebook */
(function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "//connect.facebook.net/en_US/all.js";
     fjs.parentNode.insertBefore(js, fjs);
 }(document, 'script', 'facebook-jssdk'));

window.fbAsyncInit = function() {
    // init the FB JS SDK
    FB.init({
      status     : true,                                 
      xfbml      : true                                  
    });

    FB.Event.subscribe('edge.create', function(href, widget) {
        $.event.trigger({
            type: "pageShared",
            url: href
        });     
    });
};

/* Twitter */
  window.twttr = (function (d,s,id) {
  var t, js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return; js=d.createElement(s); js.id=id;
  js.src="https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs);
  return window.twttr || (t = { _e: [], ready: function(f){ t._e.push(f) } });
}(document, "script", "twitter-wjs"));

twttr.ready(function (twttr) {
    twttr.events.bind('tweet', function (event) {
        $.event.trigger({
            type: "pageShared",
            url: event.target.baseURI
        });
    });
});

/* Google Plus */
(function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();

function plusOned(obj){
	console.log(obj);
	$.event.trigger({
	    type: "pageShared",
	    url: obj.href
	});
}

  
/* Listen for the pageShared event */
$(document).on('pageShared',function(e){
	if(e.url == window.location.href){
		$(".secret").show();
	}
});

</script>
<div align="center"> <p>شارك الموضوع لظهور المحتوى المخفى</p>

<fb:like send="false" width="95" show_faces="true" layout="box_count" font="verdana"></fb:like>
<a href="https://twitter.com/share" class="twitter-share-button" data-via="DrRo2" data-count="vertical"></a>
<g:plusone size="tall" callback="plusOned"></g:plusone>

<div class="secret"><br/><a href="http://condaianllkhir.com/">Blogger widgets by condaianllkhir.com</a><br/><br/><br/><span style="font-size: xx-small;"> <a href="http://condaianllkhir.com/">Blogger widgets by condaianllkhir.com</a></span></span><br /></div>

إستبدل الرابط الملون بالأصفر بالرابط المراد إخفاؤه .

إذا كان المحتوى المخفى جزء من الموضوع "نص"

 إنسخ الكود التالى كاملا

<style tyle="text/css">
			.secret{
				display:none;
			}
		</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">

/* Facebook */
(function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "//connect.facebook.net/en_US/all.js";
     fjs.parentNode.insertBefore(js, fjs);
 }(document, 'script', 'facebook-jssdk'));

window.fbAsyncInit = function() {
    // init the FB JS SDK
    FB.init({
      status     : true,                                 
      xfbml      : true                                  
    });

    FB.Event.subscribe('edge.create', function(href, widget) {
        $.event.trigger({
            type: "pageShared",
            url: href
        });     
    });
};

/* Twitter */
  window.twttr = (function (d,s,id) {
  var t, js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return; js=d.createElement(s); js.id=id;
  js.src="https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs);
  return window.twttr || (t = { _e: [], ready: function(f){ t._e.push(f) } });
}(document, "script", "twitter-wjs"));

twttr.ready(function (twttr) {
    twttr.events.bind('tweet', function (event) {
        $.event.trigger({
            type: "pageShared",
            url: event.target.baseURI
        });
    });
});

/* Google Plus */
(function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();

function plusOned(obj){
	console.log(obj);
	$.event.trigger({
	    type: "pageShared",
	    url: obj.href
	});
}

  
/* Listen for the pageShared event */
$(document).on('pageShared',function(e){
	if(e.url == window.location.href){
		$(".secret").show();
	}
});

</script>
<div align="center"> <p>شارك الموضوع لظهور المحتوى المخفى</p>

<fb:like send="false" width="95" show_faces="true" layout="box_count" font="verdana"></fb:like>
<a href="https://twitter.com/share" class="twitter-share-button" data-via="DrRo2" data-count="vertical"></a>
<g:plusone size="tall" callback="plusOned"></g:plusone>

<div class="secret"><br/><p>أضف هنا النص المراد إخفاؤه</p><br/><br/><br/><span style="font-size: xx-small;"> <a href="http://condaianllkhir.com/">Blogger widgets by condaianllkhir.com</a></span></span><br /></div>

إستبدل الجزء الملون بالأصفر فى الكود بالنص الذى تريد إخفاؤه.

لاحظ : أنه لكى تعمل هذه الإضافة جيدًا يجب ألا يوجد إضافة أخرى  تعمل بإحدى مكتبات jQuery تتعارض مع هذه الإضافة.

• فيسبوك
• تويرتر
• جوجل +
• لينكدين
واتساب

بقلم عاشق النات

بسم الله الرحمان الرحيم

انا عاشق النات اسم على مسمى اردت انشاء هذه المدونة كي اضع فيها كل ما تعلمته و خبرته من حياتي العلمية و التقنية امانة بين ايديكم كي تعلموا و تعلموا و الادال على الخير كفاعله و لمن يريد الاتصال او التواصل

الفيسبوك * تويتر * جوجل بلس * youtube

و اذا اردت تغيير لون خلفية الموقع اظغط الازرار اسفله