1. الرئيسية
  2. شروحات بلوجر
  3. تضمين تعليقات الفيسبوك و بلوجر في صندوق واحد كما تشاهدون

تضمين تعليقات الفيسبوك و بلوجر في صندوق واحد كما تشاهدون

12:04 ص
السلام عليكم و رحمة الله تعالى وبركأته
في هذا الشرح الجديد سأريكم طريقة تضمين تعليقات الفيسبوك و بلوجر في صندوق واحد كما تشاهدون في الصورة أسفله
تضمين تعليقات الفيسبوك و بلوجر
الشرح يتكون من خطوتان
أول خطوة
إنشاء تطبيق في الفيسبوك
تاني خطوة
إضافة التعليقات إلى مدونتك
نبدأ بأول خطوة
أولا : انشئ تطبيق خاص بك على الفيسبوك
إدهب إلى هذا الرابط و إضغط على إنشاء تطبيق
بعدها ستضهر لك نافدة صغيرة إملأها بالمعلومات المناسبة
بعدما تنتهي سيتم إرسالك إلى صفحة في معلومات التطبيق
ثانيا : إضافة التعليقات إلى بلوجر
أولا إبحث عن :
1
<html ...... xmlns:expr='http://www.google.com/2005/gml/expr'>
ثانيا أضف هذا الكود :
1
xmlns:og='http://ogp.me/ns#'
بعد وسم HTML ليصبح مثل الكود أسفله :
1
<html xmlns:og='http://ogp.me/ns#' ...... xmlns:expr='http://www.google.com/2005/gml/expr'>
الان إبحث عن :
1
</head>
و أضف أسفله هذا الكود :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APP_ID',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
مع تعويض هذا
1
YOUR_APP_ID
بالايدي الدي حصلت عليه من التطبيق
قم الان بالبحت عن :
1
</head>
و أضف قبلها / فوقها هذا الكود :
1
<meta property="fb:app_id" content="YOUR_APP_ID" />
مع تعويض هذا
1
YOUR_APP_ID
بالايدي الدي حصلت عليه من التطبيق
المرحلة الثانية
أولا إبحث عن هذا الكود
1
]]></b:skin>
ثانيا أضف هذا الكود قبله
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
.cat-tabs-header {
    box-shadow: rgb(181, 181, 181) 0px 1px 3px 0px;
    clear: both;
    color: rgb(51, 51, 51);
    direction: rtl;
    height: 35px;
    text-decoration: none solid rgb(51, 51, 51);
width: 98%;
    background: rgb(247, 247, 247) none repeat scroll 0% 0% / auto padding-box border-box;
    border-top: 0px none rgb(51, 51, 51);
    border-right: 0px none rgb(51, 51, 51);
    border-bottom: 3px solid rgb(234, 234, 234);
    border-left: 0px none rgb(51, 51, 51);
    font: normal normal normal 13px/normal Tahoma, arial;
    list-style: none outside none;
    outline: rgb(51, 51, 51) none 0px;
padding: 1% 1% 0%;
}
.cat-tabs-header ul {
    color: rgb(51, 51, 51);
    direction: rtl;
    text-decoration: none solid rgb(51, 51, 51);
    width: 638px;
    border: 0px none rgb(51, 51, 51);
    font: normal normal normal 13px/normal Tahoma, arial;
    list-style: none outside none;
    margin: 0px;
    outline: rgb(51, 51, 51) none 0px;
    padding: 0px;
}
.active {
    box-shadow: rgb(212, 212, 212) 0px -1px 2px 0px;
    color: rgb(51, 51, 51);
    direction: rtl;
    float: right;
    height: 30px;
    text-align: right;
    text-decoration: none solid rgb(51, 51, 51);
    background: rgb(255, 255, 255) none repeat scroll 0% 0% / auto padding-box border-box;
    border: 0px none rgb(51, 51, 51);
    border-radius: 2px 2px 0 0;
    font: normal normal bold 16px/30px Arial, Helvetica, sans-serif;
    list-style: none outside none;
    margin: 0px 0px 0px 10px;
    outline: rgb(51, 51, 51) none 0px;
    padding: 4px 15px;
}
.cat-tabs-header ul li a {
    color: rgb(68, 68, 68);
    direction: rtl;
    text-align: right;
    text-decoration: none solid rgb(68, 68, 68);
    border: 0px none rgb(68, 68, 68);
    font: normal normal bold 16px/30px Arial, Helvetica, sans-serif;
    list-style: none outside none;
    outline: rgb(68, 68, 68) none 0px;
    transition: all 0.2s ease-in-out 0s;
}
.cat-tabs-header ul li {
    color: rgb(51, 51, 51);
    direction: rtl;
    float: right;
    height: 30px;
    text-align: right;
    text-decoration: none solid rgb(51, 51, 51);
    border: 0px none rgb(51, 51, 51);
    border-radius: 2px 2px 0 0;
    font: normal normal bold 16px/30px Arial, Helvetica, sans-serif;
    list-style: none outside none;
    margin: 0px 0px 0px 10px;
    outline: rgb(51, 51, 51) none 0px;
    padding: 4px 15px;
}
.post {
overflow:hidden;
}
#comments{
display:none;
  }
  .comments{
box-shadow: #B5B5B5 0px 3px 2px 1px;
margin: 0!important;
padding: 10px!important;
}
.cat-tabs-header img {
width: 16px;
height: 16px;
border-radius: 4px;
}
ثم إبحث عن هذا الكود
1
  </head>
و أضف فوقه هذا الكود
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script>
window.onload = init;

function init() {
    document.getElementById('fb').onclick = fb;
    document.getElementById('bl').onclick = bl;
}

function fb() {
    document.getElementById('fb').setAttribute('class', 'active');
    document.getElementById('bl').setAttribute('class', '');
    document.getElementById('fb-comments-page').style.display='block';
    document.getElementById('comments').style.display='none';
}

function bl() {
    document.getElementById('fb').setAttribute('class', '');
    document.getElementById('bl').setAttribute('class', 'active');
    document.getElementById('fb-comments-page').style.display=&quot;none&quot;;
    document.getElementById('comments').style.display=&quot;block&quot;;
}
</script>
الان اخر شيء هو إضافة التعليقات إلى القالب
اولا إبحث عن هذا الكود
1
<div class='comments' id='comments'>
و أضف فوقه هذا الكود أي قبله
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class='cat-tabs-header'>
    <ul>
        <li class='active' id='fb'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF1Cjg4cq5y_Q0zzBnyWw7uy0MQFwXfnxQCnt-DY22elPpsDPvCVgLC8BD_vOzo47D3gHJXDc9PrYSkdJMuhsGNuKwo3msT1NxieE5AobkYwgoXGtSEyKZvEEbPSQiJAhX7_9diETcsh0/s400/fbcomment.png'/>
<fb:comments-count expr:href='data:post.url'/> تعليق </li>
        <li class='' id='bl'><img src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> تعليق  </li>
    </ul>
</div>
    <div class='comments' id='fb-comments-page'>
     <b:if cond='data:blog.pageType == &quot;item&quot;'>
<center>
        <div id='fb-root'/>
       <fb:comments colorscheme='light' expr:href='data:post.canonicalUrl' expr:title='data:post.title' expr:xid='data:post.id' width='500px'/>
       </center>
</b:if>
     </div>
الآن إذا أردت تعديل حجم صندوق الفيسبوك إبحث عن هذا الرقم و عدله
1
width='500px'
أما إذا أردت جعل تعليقات بلوجر هي الرئيسية مثل الصورة أسفله
تضمين تعليقات الفيسبوك و بلوجر
أولا إبحث عن هذا الكود
1
]]></b:skin>
ثانيا أضف هذا الكود قبله
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
.cat-tabs-header {
    box-shadow: rgb(181, 181, 181) 0px 1px 3px 0px;
    clear: both;
    color: rgb(51, 51, 51);
    direction: rtl;
    height: 35px;
    text-decoration: none solid rgb(51, 51, 51);
width: 98%;
    background: rgb(247, 247, 247) none repeat scroll 0% 0% / auto padding-box border-box;
    border-top: 0px none rgb(51, 51, 51);
    border-right: 0px none rgb(51, 51, 51);
    border-bottom: 3px solid rgb(234, 234, 234);
    border-left: 0px none rgb(51, 51, 51);
    font: normal normal normal 13px/normal Tahoma, arial;
    list-style: none outside none;
    outline: rgb(51, 51, 51) none 0px;
padding: 1% 1% 0%;
}
.cat-tabs-header ul {
    color: rgb(51, 51, 51);
    direction: rtl;
    text-decoration: none solid rgb(51, 51, 51);
    width: 638px;
    border: 0px none rgb(51, 51, 51);
    font: normal normal normal 13px/normal Tahoma, arial;
    list-style: none outside none;
    margin: 0px;
    outline: rgb(51, 51, 51) none 0px;
    padding: 0px;
}
.active {
    box-shadow: rgb(212, 212, 212) 0px -1px 2px 0px;
    color: rgb(51, 51, 51);
    direction: rtl;
    float: right;
    height: 30px;
    text-align: right;
    text-decoration: none solid rgb(51, 51, 51);
    background: rgb(255, 255, 255) none repeat scroll 0% 0% / auto padding-box border-box;
    border: 0px none rgb(51, 51, 51);
    border-radius: 2px 2px 0 0;
    font: normal normal bold 16px/30px Arial, Helvetica, sans-serif;
    list-style: none outside none;
    margin: 0px 0px 0px 10px;
    outline: rgb(51, 51, 51) none 0px;
    padding: 4px 15px;
}
.cat-tabs-header ul li a {
    color: rgb(68, 68, 68);
    direction: rtl;
    text-align: right;
    text-decoration: none solid rgb(68, 68, 68);
    border: 0px none rgb(68, 68, 68);
    font: normal normal bold 16px/30px Arial, Helvetica, sans-serif;
    list-style: none outside none;
    outline: rgb(68, 68, 68) none 0px;
    transition: all 0.2s ease-in-out 0s;
}
.cat-tabs-header ul li {
    color: rgb(51, 51, 51);
    direction: rtl;
    float: right;
    height: 30px;
    text-align: right;
    text-decoration: none solid rgb(51, 51, 51);
    border: 0px none rgb(51, 51, 51);
    border-radius: 2px 2px 0 0;
    font: normal normal bold 16px/30px Arial, Helvetica, sans-serif;
    list-style: none outside none;
    margin: 0px 0px 0px 10px;
    outline: rgb(51, 51, 51) none 0px;
    padding: 4px 15px;
}
.post {
overflow:hidden;
}
#fb-comments-page{
display:none;
  }
  .comments{
box-shadow: #B5B5B5 0px 3px 2px 1px;
margin: 0!important;
padding: 10px!important;
}
.cat-tabs-header img {
width: 16px;
height: 16px;
border-radius: 4px;
}
ثم إبحث عن هذا الكود
1
  </head>
و أضف فوقه هذا الكود
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script>
window.onload = init;

function init() {
    document.getElementById('fb').onclick = fb;
    document.getElementById('bl').onclick = bl;
}

function fb() {
    document.getElementById('fb').setAttribute('class', 'active');
    document.getElementById('bl').setAttribute('class', '');
    document.getElementById('fb-comments-page').style.display='block';
    document.getElementById('comments').style.display='none';
}

function bl() {
    document.getElementById('fb').setAttribute('class', '');
    document.getElementById('bl').setAttribute('class', 'active');
    document.getElementById('fb-comments-page').style.display=&quot;none&quot;;
    document.getElementById('comments').style.display=&quot;block&quot;;
}
</script>
الان اخر شيء هو إضافة التعليقات إلى القالب
اولا إبحث عن هذا الكود
1
<div class='comments' id='comments'>
و أضف فوقه هذا الكود أي قبله
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class='cat-tabs-header'>
    <ul>
         <li class='active' id='bl'><img src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> تعليق  </li>
        <li class='' id='fb'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF1Cjg4cq5y_Q0zzBnyWw7uy0MQFwXfnxQCnt-DY22elPpsDPvCVgLC8BD_vOzo47D3gHJXDc9PrYSkdJMuhsGNuKwo3msT1NxieE5AobkYwgoXGtSEyKZvEEbPSQiJAhX7_9diETcsh0/s400/fbcomment.png'/>
<fb:comments-count expr:href='data:post.url'/> تعليق
</li>
    </ul>
</div>
    <div class='comments' id='fb-comments-page'>
     <b:if cond='data:blog.pageType == &quot;item&quot;'>
<center>
        <div id='fb-root'/>
       <fb:comments colorscheme='light' expr:href='data:post.canonicalUrl' expr:title='data:post.title' expr:xid='data:post.id' width='500px'/>
       </center>
</b:if>
     </div>
أتمنى أن يعجبكم الشرح أي إستفسار يمنكنك طرحه في تعليق

شارك هذا الموضوع

اشترك فى المدونة

مواضيع ذات صلة

0 التعليقات

الاشتراك في: تعليقات الرسالة (Atom)