• Ultra Boost
  • Thiết kế website bán hàng miễn phí 2018
  • Ultra Boost

jQuery Plugin To Display Latest Facebook Updates - Facebook Wall

An easy jQuery plugin for creating a 'Facebook Wall' widget on your website to display the latest updates (news feed) from your fan page or profile.

Xem hướng dẫn !

http://www.jqueryscript.net/social-media/jQuery-Plugin-To-Display-Latest-Facebook-Updates-Facebook-Wall.html

An easy jQuery plugin for creating a 'Facebook Wall' widget on your website to display the latest updates (news feed) from your fan page or profile.

How to use it:

1. Create a container for the facebook widget.

1
2
<ul id="facebook_wall">
ul>

2. Include the jQuery library and jQuery facebook wall plugin on the page.

1
2
3
<script src="http://www.google.com/jsapi" type="text/javascript">script>
<script type="text/javascript">google.load("jquery", "1");script>
<script src="facebook_wall.plugin.js" type="text/javascript">script>

3. Create a new App on facebook developer page and get the App ID/API Key and App Secret.

1
2
3
<script src="http://www.google.com/jsapi" type="text/javascript">script>
<script type="text/javascript">google.load("jquery", "1");script>
<script src="facebook_wall.plugin.js" type="text/javascript">script>

4. Call the plugin and insert the facebook access token in the javascript.

1
2
3
4
5
6
7
8
9
10
11

5. All the options.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script type="text/javascript">
(function($) {
$(document).ready(function(){
$('#facebook_wall').facebook_wall({
id: '' - insert your profile og fanpage id
access_token: '' - insert your acces token
limit: 10 - any amount from 1-15
timeout: 400 - any amount (in miliseconds)
speed: 400 - any amount (in miliseconds)
effect: 'slide' - choices: 'slide', 'fade' or 'none'
locale: 'en_US' - your contry code
avatar_size: 'square' - choices: 'square', 'small', 'normal' or 'large'
message_length: 200, // Any amount you like. Above 0 shortens the message length
show_guest_entries: true - choices: 'true' or 'false'
text_labels: your translations
on_complete: execute function when complete
});
});
})(jQuery);
script>

6. The sample CSS to style the facebook widget.

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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
#facebook_wall {
min-height: 200px;
margin: 0 -40px;
border-top: 2px solid #535353;
border-bottom: 2px solid #535353;
background: #eee;
position: relative;
}
#facebook_wall .facebook-loading {
width: 16px;
height: 16px;
margin: -8px 0 0 -8px;
background: url('images/loader.png') no-repeat 50% 50%;
position: absolute;
top: 100px;
left: 50%;
}
#facebook_wall .facebook-loading {
-moz-animation: update-spinner 1s linear infinite;
-webkit-animation: update-spinner 1s linear infinite;
-ms-animation: update-spinner 1s linear infinite;
animation: update-spinner 1s linear infinite;
}
#facebook_wall li {
min-height: 52px;
padding: 10px 10px 10px 72px;
border-top: 1px solid #d4d4d4;
display: none;
position: relative;
}
#facebook_wall li:first-child {
border-top: none;
}
#facebook_wall li .meta-header {
}
#facebook_wall li .meta-header .avatar {
width: 50px;
height: 50px;
border: 1px solid #999;
position: absolute;
top: 10px;
left: 10px;
}
#facebook_wall li .meta-header .author {
font-weight: bold;
}
#facebook_wall li .meta-header .date {
display: none;
}
#facebook_wall li .message {
color: #666;
margin-bottom: 16px;
}
#facebook_wall li .story {
font-style: italic;
color: #666;
margin-bottom: 16px;
}
#facebook_wall li .media {
color: #8a8a8a;
margin: 10px 0;
}
#facebook_wall li .media.border-left {
padding-left: 10px;
border-left: 2px solid #a1a1a1;
}
#facebook_wall li .media .image {
margin-right: 10px;
float: left;
position: relative;
}
#facebook_wall li.type-"http://www.jqueryscript.net/tags.php?/video/">video .media .image:after {
width: 44px;
height: 44px;
background: url('images/play.png') no-repeat 50% 50%;
margin-top: -22px;
margin-left: -22px;
position: absolute;
top: 50%;
left: 50%;
content: " ";
pointer-events: none;
}
#facebook_wall li .media .image img {
max-width: 100%;
height: auto;
padding: 2px;
border: 1px solid #a1a1a1;
}
#facebook_wall li .media .media-meta {
float: left;
display: table;
}
#facebook_wall li .media .media-meta .name {
font-weight: bold;
}
#facebook_wall li .media .media-meta .caption {
font-style: italic;
}
#facebook_wall li .media .media-meta .description {
}
#facebook_wall li .meta-footer {
font-size: 9px;
line-height: 16px;
color: #a1a1a1;
clear: both;
}
#facebook_wall li .meta-footer .seperator {
padding: 0 4px;
}
#facebook_wall li .meta-footer .date {
}
#facebook_wall li .meta-footer .likes {
}
#facebook_wall li .meta-footer .comments {
}
#facebook_wall li .meta-footer .actions {
}
#facebook_wall li .meta-footer .actions .like {
}
#facebook_wall li .meta-footer .actions .comment {
}
#facebook_wall li ul.like-list {
margin-top: 10px;
display: none;
}
#facebook_wall li ul.like-list li.like {
font-size: 11px;
line-height: 16px;
margin-top: 2px;
border-top: none;
background: #e0e0e0;
display: block;
}
#facebook_wall li ul.like-list li.like:first-child {
margin-top: 0;
}
#facebook_wall li ul.like-list li.like .meta-header .author {
}
#facebook_wall li ul.comment-list {
margin-top: 10px;
}
#facebook_wall li ul.comment-list li.comment {
font-size: 11px;
line-height: 16px;
margin-top: 2px;
border-top: none;
background: #e0e0e0;
display: block;
}
#facebook_wall li ul.comment-list li.comment:first-child {
margin-top: 0;
}
#facebook_wall li ul.comment-list li.comment .meta-header .author {
}
#facebook_wall li ul.comment-list li.comment .meta-header .date {
}
#facebook_wall li ul.comment-list li.comment .message {
margin-bottom: 0;
}
#facebook_wall li ul.comment-list li.comment .date {
font-size: 9px;
line-height: 16px;
color: #a1a1a1;
}
#facebook_wall li ul.comment-list li.read_more {
min-height: 1px;
font-size: 9px;
line-height: 16px;
color: #a1a1a1;
padding: 0 10px 0 72px;
margin: 5px 0 -5px 0;
border-top: none;
display: block;
}
#facebook_wall li ul.comment-list li.read_more a {
color: #a1a1a1;
}
For more Advanced Usages, please check the demo page or visit the official website
Share facebookShare facebook

Facebook Comments

Bạn đã đọc tin này chưa ?

Go Top