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

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

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

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

لا أحد يستطيع أن ينكر أهمية دور المواقع الإجتماعية فى الترويج لموضوعات المواقع والمدونات ، لذلك من الإضافات الهامة لأى موقع هى أزرار الإعجاب أو المشاركة على المواقع الإجتماعية "الفيس بوك ، تويتر ، جوجل بلس " وقد قدمت من قبل العديد من إضافات المواقع الإجتماعية بمختلف أشكالها ، ولكن اليوم أقدم لكم إضافة إخفاء جزء من المحتوى أو رابط أو صورة وإظهاره بعد الضغط على أزرار الإعجاب 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/AVvXsEjUikNoWsoekNyTxoe0YMaH2FkgoAevI77hx81LduQgjzFxSMQb3z5hICsQaYe7tVoLT98rgL0bQHxiu0yOM5pNfo7sstJRsIt37r6r38z74SS15sggRkzt53tNa_w5ja7fg6otg70QbDjc/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/"rel="nofollow" target="_blank">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/"rel="nofollow" target="_blank">Blogger widgets by condaianllkhir.com</a></span></span><br /></div>

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

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

تنبيه : المرجو عدم نسخ الموضوع بدون ذكر مصدره المرفق بالرابط المباشر للموضوع الأصلي وإسم المدونة وشكرا

بقلم Dr.Rasha Omran

مطورة تطبيقات الهاتف ، سفيرة ببرنامج Women Techmakers التابع لجوجل ، أهتم بالمحتوى الرقمى وأحببت أن أدون كل ما تعلمته فى هذا الموقع للإفادة فى أعمال هادفة