دليل المدون

2014-02-28

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

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

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

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

لا أحد يستطيع أن ينكر أهمية دور المواقع الإجتماعية فى الترويج لموضوعات المواقع والمدونات ، لذلك من الإضافات الهامة لأى موقع هى أزرار الإعجاب أو المشاركة على المواقع الإجتماعية "الفيس بوك ، تويتر ، جوجل بلس " وقد قدمت من قبل العديد من إضافات المواقع الإجتماعية بمختلف أشكالها ، ولكن اليوم أقدم لكم إضافة إخفاء جزء من المحتوى أو رابط أو صورة وإظهاره بعد الضغط على أزرار الإعجاب 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="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 تتعارض مع هذه الإضافة.

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

هناك 16 تعليقًا

  1. أشكرك على الإضافة الجميلة والشرح الوافي
    اختى عندي سؤال, انا عارف ان مش موضوعه ولكن هذه مشكلة عندي
    انا حملت فوتوشوب Cs6 نسخة بروتايل بحجم 120 ميجا
    وفتح واشتغل تمام
    ولكن المشكلة بعد يومين جيت افتحه بعد ما ظهرت صورة اختيار اللغة
    اخترت en_Us ودوست عليها زي كل مرة ولكن البرنامج مفتحش
    ولا مفيش اى حاجة ظهرت ولا رسالة خطأ ولا حاجة

    أتمنى اختى تحلى لى المشكلة وشكرا ليكي

    ردحذف
  2. @ Admin
    فوتوشوب Cs6 نسخة بروتايل بحجم 120 ميجا
    هذه نسخة تجريبية تغلق بعد فترة من الإستخدام

    ردحذف
  3. هل يأثر أخفاء النص على ترتيب جوجل

    ردحذف
    الردود
    1. يفضل ألا تستخدم فى بداية الموضوع بل لإخفاء جزء معين من الموضوع فقط

      حذف
  4. @ Jamila me
    بإذن الله لن يؤثر ولضمان ذلك استخدم خاصية وصف البحث لإضافة الكلمات الدلالية للموضوع "الشرح على الرابط التالى
    http://www.condaianllkhir.com/2012/04/blog-post_977.html

    ردحذف
  5. جميل جدا الله يخليكي ..
    هذا الي كنت أبجث عنة من زمان بس لما ركبيتة ظهر زر المشاركة على قوقل بلس ما ظهر الفيس بوك وأنا أريد فقط الفيس بوك أرجو الرد منتظرك على أحر من الجمر وهل يمكن انو نغير بدل مشاركة زر أعجاب بالصفحة علما أنا أستخدم أخفاء رابط فقط ليس صورة أو نص وشكرا الله يوفقك منتظر حتى الرد ان شاء الله

    ردحذف
  6. @ احمد الشدادي
    الكود يظهر الثلاث أزرار عندما ينسخ على صفحة موجودة على الإنترنت مباشرة أى عندما تقوم بتجربة الكود على محرر النصوص لن تظهر الأزرار بالشكل الصحيح ويمكن تجربة ذلك بصفحة ويب مرفوعة على الإنترنت أو إستخدام محرر Html على الرابط التالى
    http://tools.condaianllkhir.com/2013/11/advanced-html-editor.html
    أما بالنسبة لزر الإعجاب بالصفحة فسأحاول إعداد موضوع آخر بهذا الشأن فى وقت قريب بإذن الله

    ردحذف
  7. شكرا أختي هل بالإمكان الغى زر تويتر وقوقل وابقى زر الفيس بوك وكيف

    ردحذف
  8. @ احمد الشدادي
    بالإمكان ذلك بحذف الجزء الخاص بتويتر وجوجل من الكود أى بداية من /* Twitter */ ، /* Google Plus */ حتى ما قبل هذا السطر

    /* Listen for the pageShared event */

    ردحذف
  9. كما اود لو كان بدل ازرار المشاركة صندوك الاشتراك البريدي واي شحص يدخل بريده يظهر له الرابط
    هل يمكنك تطوير مثل هاي الخاصية وشكرا لمجهودك

    ردحذف
  10. @ Abdallha dagga
    سأحاول تطوير صندوق الأشتراك البريدى فى الفترة القادمة بإذن الله

    ردحذف

  11. يتم ظهور الازرار الثلاثه لكن عند الضغط عليه لايظهر رابط التحميل
    مش من المفروض انو يتم اظهار النص المخفي سؤا ان كان صوره او رابط اونص بمجرد مشاركة الزائر الموضوع
    جربت وشاركة ولم يتم ظهور رابط التحميل ولاصوره

    ومع العلم اني عند وضع الكود تضظهر لي الرساله الاتيه:
    ‏لا يمكن قبول HTML خاصتك: ليست هناك علامة فتح مقابلة لعلامة الإغلاق.: SPAN رفض

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


    ردحذف
  12. @ jolia jak
    ربما يكون السبب هو وجود اضافة اخرى تعمل بتقنية jqurey وحدث تعارض بالاكواد يعوق الاضافة للعمل بشكل جيد

    ردحذف
  13. شكرا اختي

    ردحذف
  14. مع كل إحترامي الفائق .. هذه أغبى إضافة عرفتها عقول البرمجة والتصميم لأنه يمكن إظهار المحتوى المخفي عن طريق فتح مصدر الصفحة .. لذلك في تلك الحالة نلجأ إلى تقنية الإستبدال والحذف والتي من سابع المستحيلات أن يكتشف ماهو مخفي وهذا شكل الشفرة
    $("#").each(function() {
    var e = $(this);
    if (e.html().replace(/\s| /g, "").length == 0) e.remove()
    });

    كان معكم مشرف مدونة بلوجر كود ..بالتوفيق

    ردحذف

يمنع نشر التعليقات ذات الروابط الدعائية أو تعليقات بإسلوب غير لائق أو التى تحتوى على معلومات شخصية كالبريد الإلكترونى .
لتصلك إشعارات ردود هذا الموضوع على البريد الإلكترونى أضف علامة بالمربع بجوار كلمة "إعلامى"

Privacy-Policy | إعلن لدينا
جميع الحقوق محفوظة لــ كن داعيا للخير 2011-2022 ©

تصميم كن مدون