بسم الله الرحمن الرحيم
شرح طريقة تضمين التعليقات في الفيس بوك و بلوجر في صندوق واحد
في هذا الشرح الجديد سأريكم طريقة تضمين تعليقات الفيسبوك و بلوجر في صندوق واحد كما تشاهدون في الصورة أسفله
الشرح يتكون من خطوتان
أول خطوة
إنشاء تطبيق في الفيسبوك
تاني خطوة
إضافة التعليقات إلى مدونتك
نبدأ بأول خطوة
أولا : انشئ تطبيق خاص بك على الفيسبوك
إدهب إلى هذا الرابط و إضغط على إنشاء تطبيق بعدها ستضهر لك نافدة صغيرة إملأها بالمعلومات المناسبة
بعدما تنتهي سيتم إرسالك إلى صفحة في معلومات التطبيق
ثانيا : إضافة التعليقات إلى بلوجر
أولا إبحث عن :
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="none";
document.getElementById('comments').style.display= "block";
}
</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='http://2.bp.blogspot.com/-rae4j6NaLkY/T1JrjUEIkkI/AAAAAAAAGBc/PzwMIo1g1Is/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 == "item"'>
<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="none";
document.getElementById('comments').style.display= "block";
}
</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='http://2.bp.blogspot.com/-rae4j6NaLkY/T1JrjUEIkkI/AAAAAAAAGBc/PzwMIo1g1Is/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 == "item"'>
<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>
أتمنى أن يعجبكم الشرح أي إستفسار يمنكنك طرحه في تعليق
شرح طريقة تضمين التعليقات في الفيس بوك و بلوجر في صندوق واحد
رد مع اقتباس
مواقع النشر (المفضلة)