• .
  • Liên hệ báo giá tốt nhất sản phẩm
  • Balo túi đeo PGYTECH 3L 4L 6L 10L 11L 22L 25L 35L
  • Tilta Phụ kiện các loại giá tốt nhất

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.

Demo Download

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

    Tin Cùng Chuyên Mục

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

    Tin Tức Mới
    Quảng Cáo

    Phụ kiện máy ảnh Sony Alpha - Gopro - DJI - Smallrig - Tilta - PGYTECH

    HOTLINE : 0988 280 010

    Email: trancongnghiep1988@gmail.com

    Website : www.phukiensonyalpha.com

    SONY - CANON - NIKON - FUJIFILM - PANASONIC

    Go Top
    Chat hỗ trợ
    Chat ngay