الجمعة 25 أكتوبر 2013 - الساعة الآن 00:03:39 صباحاً

الأحد، 2 مارس، 2014

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

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

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



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

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

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



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





تعتمد هذه الإضافة على تقنية 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="http://4.bp.blogspot.com/-t_lsgqlM52Q/T67P8nO5CpI/AAAAAAAABV8/-zVVTfYVmVo/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 تتعارض مع هذه الإضافة.

جميع الحقوق محفوظة مدونة الإبداع 2016
حقوق النشر محفوظة لـ : مدونة الإبداع ©