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

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

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

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

لا أحد يستطيع أن ينكر أهمية دور المواقع الإجتماعية فى الترويج لموضوعات المواقع والمدونات ، لذلك من الإضافات الهامة لأى موقع هى أزرار الإعجاب أو المشاركة على المواقع الإجتماعية "الفيس بوك ،تويتر ، جوجل بلس " وقد قدمت من قبل العديد من إضافات المواقع الإجتماعية بمختلف أشكالها ، ولكن اليوم أقدم لكم إضافة إخفاء جزء من المحتوى أو رابط أو صورة وإظهاره بعد الضغط على أزرار الإعجاب  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="http://4.bp.blogspot.com/-t_lsgqlM52Q/T67P8nO5CpI/AAAAAAAABV8/-zVVTfYVmVo/s320/46710.jpg"/><br/><span style="font-size: xx-small;"> <a href="http://todaymaghreb.blogspot.com/">Blogger widgets by todaymaghreb.blogspot.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://todaymaghreb.blogspot.com/"rel="nofollow" target="_blank">Blogger widgets by todaymaghreb.blogspot.com</a><br/><br/><br/><span style="font-size: xx-small;"> <a href="http://todaymaghreb.blogspot.com/">Blogger widgets by todaymaghreb.blogspot.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://todaymaghreb.blogspot.com/"rel="nofollow" target="_blank">Blogger widgets by todaymaghreb.blogspot.com</a></span></span><br /></div>

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

Blogger widgets by today maghreb