Custom Facebook Feed - Version 2.9

Version Description

  • New: You can now select between a "Regular" or "Boxed" post style. Settings for this can be found at: Customize > Style Posts > Post Item. A Box Shadow setting has been added to the "Boxed" post style.
  • New: Added some settings to control the size and color of the shared link URLs and descriptions. These can be found at: Customize > Style Posts > Shared Link Boxes.
  • New: Improved the Access Token retrieval process to make it more intuitive.
  • Tweak: Avatar images are now circular to match Facebook.
  • Tweak: Animated the social media icons when the "Share" button is clicked.
  • Tweak: Changed the way the Like Box loads to avoid a conflict with the Facebook Messenger widget. It no longer uses the Facebook JavaScript SDK.
  • Tweak: Changed the elements used for icons from <i> to <span> to aid accessibility.
  • Tweak: Removed the Google+ share option as the platform has been deprecated.
  • Tweak: Removed the share widgets from the footer of the admin so that they're only loaded when the "Share the plugin" button is clicked.
  • Fix: The plugin now uses the built-in WordPress HTTP API to get data from Facebook instead of making it's own cURL requests.
  • Fix: Fixed an issue where the avatars of people posting to the Facebook page weren't being displayed. Individual Facebook API requests for avatars have now been removed and bundled into the main API request.
  • Fix: If the link to the profile of a visitor posting to your page is not available then remove the link from the avatar and author name.
  • Fix: Fixed an accessibility error caused by the share icons being empty links.
  • Fix: Removed the use of the ENT_HTML5 constant as it isn't supported in PHP 5.4.
  • Fix: Fixed a rare issue with tags in post stories when the locale was set to be Greek.
Download this release

Release Info

Developer smashballoon
Plugin Icon 128x128 Custom Facebook Feed
Version 2.9
Comparing to
See all releases

Code changes from version 2.8 to 2.9

README.txt CHANGED
@@ -2,8 +2,8 @@
2
  Contributors: smashballoon
3
  Tags: Facebook, Facebook feed, Facebook posts, Facebook wall, Facebook page
4
  Requires at least: 3.0
5
- Tested up to: 5.0
6
- Stable tag: 2.8
7
  License: GPLv2 or later
8
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
9
 
@@ -265,27 +265,44 @@ You no longer need your own Access Token to use the Custom Facebook Feed Plugin,
265
 
266
  == Changelog ==
267
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
268
  = 2.8 =
269
- * New: Added support for Notes in timeline feeds. If your timeline feed contains a note then the plugin will now get the content from the note and display it within the post.
270
- * New: Facebook call-to-action buttons - such as "Learn More", "Shop Now", and "Message Page" - are now supported in your posts. These text strings can be translated using the settings at: Facebook Feed > Customize > Custom Text/Translate
271
- * New: Added a setting that you can enable if you are displaying posts from a restricted (non-public) Facebook page. This will allow the page avatar to be displayed, and is located at: Facebook Feed > Customize > Misc > Misc Settings > Is Facebook Page restricted?
272
- * New: If a visitor posts to your page then their avatar will now be displayed and cached for 6 months. To clear the cache of these avatar images use the button located at: Facebook Feed > Customize > Misc > Misc Settings > Clear Avatar Cache
273
  * Tweak: The Timezone setting can now be set in the shortcode. Eg: `timezone="America/Los_Angeles"`
274
  * Tweak: Minor UI changes to the admin pages
275
- * Tweak: Reduced some of the data in the System Info
276
- * Fix: If you backdate a post it will now be ordered correctly in your feed
277
  * Fix: Fixed a theme conflict related to the Color Picker in the admins section
278
  * Verified compatibility with WordPress 5.0 and Gutenburg
279
 
280
  = 2.7.2 =
281
- * **Important:** If you are displaying a feed from a Facebook page which you are *not* an admin of then it is advised that you obtain a new Access Token in the plugin using the "Log in and get my Access Token" button. This will switch you from using the "SlickRemix" app to using our own "Smash Balloon" Facebook app which was recently approved by Facebook, and will prevent you from experiencing any potential interuptions in your feeds going forward. This will be the final time this is required.
282
  * Fix: Fixed a rare issue caused by some themes including the JavaScript file incorrectly
283
 
284
  = 2.7.1 =
285
  * Tweak: Made some adjustments to the Facebook Access Token login process
286
 
287
  = 2.7 =
288
- * New: Now easily get your own Facebook Access Token to avoid any Facebook connection issues. Simply click the blue Facebook "Log in and get my Access Token" button on the Custom Facebook Feed settings page and connect your Facebook account to get your token. The Access Token will work to get posts from ANY Facebook page. Thanks to our friends at SlickRemix for powering our new login and getting the plugin back up and running again!
289
  * Tweak: Removed the minimum caching time if you're using your own Facebook Page Access Token
290
 
291
  = 2.6.4 =
2
  Contributors: smashballoon
3
  Tags: Facebook, Facebook feed, Facebook posts, Facebook wall, Facebook page
4
  Requires at least: 3.0
5
+ Tested up to: 5.2
6
+ Stable tag: 2.9
7
  License: GPLv2 or later
8
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
9
 
265
 
266
  == Changelog ==
267
 
268
+ = 2.9 =
269
+ * New: You can now select between a "Regular" or "Boxed" post style. Settings for this can be found at: `Customize > Style Posts > Post Item`. A Box Shadow setting has been added to the "Boxed" post style.
270
+ * New: Added some settings to control the size and color of the shared link URLs and descriptions. These can be found at: `Customize > Style Posts > Shared Link Boxes`.
271
+ * New: Improved the Access Token retrieval process to make it more intuitive.
272
+ * Tweak: Avatar images are now circular to match Facebook.
273
+ * Tweak: Animated the social media icons when the "Share" button is clicked.
274
+ * Tweak: Changed the way the Like Box loads to avoid a conflict with the Facebook Messenger widget. It no longer uses the Facebook JavaScript SDK.
275
+ * Tweak: Changed the elements used for icons from `<i>` to `<span>` to aid accessibility.
276
+ * Tweak: Removed the Google+ share option as the platform has been deprecated.
277
+ * Tweak: Removed the share widgets from the footer of the admin so that they're only loaded when the "Share the plugin" button is clicked.
278
+ * Fix: The plugin now uses the built-in WordPress HTTP API to get data from Facebook instead of making it's own cURL requests.
279
+ * Fix: Fixed an issue where the avatars of people posting to the Facebook page weren't being displayed. Individual Facebook API requests for avatars have now been removed and bundled into the main API request.
280
+ * Fix: If the link to the profile of a visitor posting to your page is not available then remove the link from the avatar and author name.
281
+ * Fix: Fixed an accessibility error caused by the share icons being empty links.
282
+ * Fix: Removed the use of the ENT_HTML5 constant as it isn't supported in PHP 5.4.
283
+ * Fix: Fixed a rare issue with tags in post stories when the locale was set to be Greek.
284
+
285
  = 2.8 =
286
+ * New: Added support for Facebook Notes in timeline feeds. If your Facebook timeline feed contains a note then the plugin will now get the content from the note and display it within the Facebook post.
287
+ * New: Facebook call-to-action buttons - such as "Learn More", "Shop Now", and "Message Page" - are now supported in your Facebook posts. These text strings can be translated using the settings at: Facebook Feed > Customize > Custom Text/Translate
288
+ * New: Added a setting that you can enable if you are displaying Facebook posts from a restricted (non-public) Facebook page. This will allow the Facebook page avatar to be displayed, and is located at: Facebook Feed > Customize > Misc > Misc Settings > Is Facebook Page restricted?
289
+ * New: If a visitor posts to your Facebook page then their avatar will now be displayed and cached for 6 months. To clear the cache of these avatar images use the button located at: Facebook Feed > Customize > Misc > Misc Settings > Clear Avatar Cache
290
  * Tweak: The Timezone setting can now be set in the shortcode. Eg: `timezone="America/Los_Angeles"`
291
  * Tweak: Minor UI changes to the admin pages
292
+ * Tweak: Reduced some of the Facebook data in the System Info
293
+ * Fix: If you backdate a Facebook post it will now be ordered correctly in your Facebook feed
294
  * Fix: Fixed a theme conflict related to the Color Picker in the admins section
295
  * Verified compatibility with WordPress 5.0 and Gutenburg
296
 
297
  = 2.7.2 =
298
+ * **Important:** If you are displaying a Facebook feed from a Facebook page which you are *not* an admin of then it is advised that you obtain a new Facebook Access Token in the plugin using the "Log in and get my Access Token" button. This will switch you from using the "SlickRemix" app to using our own "Smash Balloon" Facebook app which was recently approved by Facebook, and will prevent you from experiencing any potential interuptions in your Facebook feeds going forward. This will be the final time this is required.
299
  * Fix: Fixed a rare issue caused by some themes including the JavaScript file incorrectly
300
 
301
  = 2.7.1 =
302
  * Tweak: Made some adjustments to the Facebook Access Token login process
303
 
304
  = 2.7 =
305
+ * New: Now easily get your own Facebook Access Token to avoid any Facebook connection issues. Simply click the blue Facebook "Log in and get my Access Token" button on the Custom Facebook Feed settings page and connect your Facebook account to get your token. The Facebook Access Token will work to get Facebook posts from ANY Facebook page. Thanks to our friends at SlickRemix for powering our new login and getting the plugin back up and running again!
306
  * Tweak: Removed the minimum caching time if you're using your own Facebook Page Access Token
307
 
308
  = 2.6.4 =
css/cff-admin-style.css CHANGED
@@ -253,6 +253,80 @@
253
  border: 1px solid #ddd;
254
  }
255
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
256
  /* Disabled */
257
  #cff-admin .cff-disabled{
258
  zoom: 1;
@@ -844,13 +918,12 @@
844
  #cff-admin .cff-managed-page{
845
  width: 100%;
846
  border: 1px solid transparent;
847
- padding: 0;
848
  background: #fff;
849
  box-sizing: border-box;
850
  }
851
  #cff-admin .cff-managed-page:hover{
852
- background: rgba(255,255,255,0.8);
853
- border: 1px solid #ccc;
854
  cursor: pointer;
855
  }
856
  #cff-admin .cff-managed-page .cff-page-avatar{
@@ -865,20 +938,13 @@
865
  }
866
  #cff-admin .cff-managed-page.cff-page-selected{
867
  background: #dceada;
868
- border: 1px solid #6ca365;
869
  }
870
  #cff-admin .cff-save-page-token{
871
  display: none;
872
  }
873
-
874
- #cff-admin #cff-enter-manual-id{
875
- /*display: none;*/
876
- }
877
- #cff-admin .cff-reviews-access-token{
878
- /*display: none !important;*/
879
- }
880
  #cff-admin #cff_fb_login_modal{
881
  display: none;
 
882
  position: fixed;
883
  z-index: 999;
884
  width: 100%;
@@ -890,15 +956,17 @@
890
  }
891
  #cff-admin .cff_modal_box{
892
  position: absolute;
893
- top: 180px;
894
  left: 50%;
895
- width: 380px;
896
- margin: 0 0 0 -195px;
897
- padding: 20px 40px;
898
  background: #fff;
899
  text-align: center;
 
900
  -webkit-box-shadow: 0 1px 20px rgba(0,0,0,0.2);
901
  box-shadow: 0 1px 20px rgba(0,0,0,0.2);
 
902
  -moz-border-radius: 3px;
903
  -webkit-border-radius: 3px;
904
  border-radius: 3px;
@@ -915,28 +983,95 @@
915
  background: #ccc;
916
  color: #333;
917
  }
918
- #cff-admin .cff_srlogo{
919
- display: inline-block;
920
- height: 16px;
921
- }
922
- #cff-admin .cff_srlogo {
923
- display: inline-block;
924
- height: 16px;
925
- font-weight: bold;
926
- font-size: 16px;
927
- margin-top: -5px;
928
- }
929
- #cff-admin .cff_srlogo img {
930
- height: 16px;
931
- position: relative;
932
- top: 2px;
933
- left: -2px;
934
- }
935
  #cff-admin .cff_modal_box p{
936
  font-size: 14px;
937
  line-height: 1.6;
938
  }
939
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
940
  /* Choose token */
941
  #cff-admin #cff-own, #cff-admin #cff-public{
942
  display: none;
@@ -974,6 +1109,20 @@
974
  background: #f0f0f0;
975
  padding: 10px 15px;
976
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
977
 
978
  #cff-admin .cff-success-check {
979
  color: #75cd32;
@@ -981,4 +1130,22 @@
981
  position: relative;
982
  top: 6px;
983
  left: 7px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
984
  }
253
  border: 1px solid #ddd;
254
  }
255
 
256
+ /* Post style selection */
257
+ #cff-admin .cff-post-style{
258
+ width: 184px;
259
+ background: none;
260
+ border: 1px solid transparent;
261
+ }
262
+ #cff-admin .cff-post-style.cff-layout-selected{
263
+ background: rgba(255,255,255,0.9);
264
+ border: 1px solid #7ad03a;
265
+ }
266
+ #cff-admin .cff-post-style img{
267
+ width: auto;
268
+ padding-bottom: 6px;
269
+ margin-bottom: 3px;
270
+ background: none;
271
+ border: none;
272
+ border-bottom: 1px solid #ddd;
273
+ }
274
+ #cff-admin .cff-post-style.cff-boxed{
275
+ /*width: 236px;*/
276
+ width: 197px;
277
+ }
278
+ #cff-admin .cff-post-style.cff-boxed img{
279
+ /*width: 94%;*/
280
+ padding: 3%;
281
+ margin: 0;
282
+ background: #fff;
283
+ border: 1px solid #ddd;
284
+ border-radius: 5px;
285
+ box-shadow: 0 0 5px 0 rgba(0,0,0,0.1);
286
+ }
287
+ #cff-admin .cff-post-style:hover,
288
+ #cff-admin .cff-post-style:focus{
289
+ /*background: rgba(255,255,255,0.5);*/
290
+ }
291
+ @media all and (max-width: 1040px){
292
+ #cff-admin .cff-layout{
293
+ width: 29%;
294
+ padding: 1%;
295
+ margin-right: 1%;
296
+ }
297
+ #cff-admin .cff-post-style,
298
+ #cff-admin .cff-post-style.cff-boxed{
299
+ width: 46%;
300
+ }
301
+ #cff-admin .cff-post-style img{
302
+ width: 100%;
303
+ padding: 0;
304
+ }
305
+ }
306
+
307
+ /* Post style settings */
308
+ #cff-admin .cff-post-style-settings {
309
+ display: none;
310
+ float: left;
311
+ clear: both;
312
+ width: 96%;
313
+ padding: 20px 2%;
314
+ margin: 10px 0;
315
+ font-size: 13px;
316
+ background: #f9f9f9;
317
+ background: rgba(255,255,255,0.8);
318
+ -moz-border-radius: 8px;
319
+ -webkit-border-radius: 8px;
320
+ border-radius: 8px;
321
+ }
322
+ #cff-admin .cff-post-style-settings label{
323
+ display: inline-block;
324
+ font-weight: bold;
325
+ font-size: 14px;
326
+ padding-bottom: 5px;
327
+ padding-right: 5px;
328
+ }
329
+
330
  /* Disabled */
331
  #cff-admin .cff-disabled{
332
  zoom: 1;
918
  #cff-admin .cff-managed-page{
919
  width: 100%;
920
  border: 1px solid transparent;
921
+ padding: 5px;
922
  background: #fff;
923
  box-sizing: border-box;
924
  }
925
  #cff-admin .cff-managed-page:hover{
926
+ background: #eee;
 
927
  cursor: pointer;
928
  }
929
  #cff-admin .cff-managed-page .cff-page-avatar{
938
  }
939
  #cff-admin .cff-managed-page.cff-page-selected{
940
  background: #dceada;
 
941
  }
942
  #cff-admin .cff-save-page-token{
943
  display: none;
944
  }
 
 
 
 
 
 
 
945
  #cff-admin #cff_fb_login_modal{
946
  display: none;
947
+ /*display: block;*/
948
  position: fixed;
949
  z-index: 999;
950
  width: 100%;
956
  }
957
  #cff-admin .cff_modal_box{
958
  position: absolute;
959
+ top: 160px;
960
  left: 50%;
961
+ width: 480px;
962
+ margin: 0 0 0 -245px;
963
+ padding: 25px 35px;
964
  background: #fff;
965
  text-align: center;
966
+
967
  -webkit-box-shadow: 0 1px 20px rgba(0,0,0,0.2);
968
  box-shadow: 0 1px 20px rgba(0,0,0,0.2);
969
+
970
  -moz-border-radius: 3px;
971
  -webkit-border-radius: 3px;
972
  border-radius: 3px;
983
  background: #ccc;
984
  color: #333;
985
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
986
  #cff-admin .cff_modal_box p{
987
  font-size: 14px;
988
  line-height: 1.6;
989
  }
990
 
991
+ /* Tokens modal */
992
+ #cff-admin #cff_fb_login_modal.cff_modal_tokens{
993
+ display: block;
994
+ }
995
+ #cff-admin .cff-pages-wrap{
996
+ max-height: 400px;
997
+ overflow-y: auto;
998
+ }
999
+ #cff-admin .cff_modal_tokens .cff_modal_box p{
1000
+ text-align: left;
1001
+ }
1002
+ #cff-admin .cff_modal_tokens .cff-managed-page .cff-page-avatar {
1003
+ margin-right: 18px;
1004
+ border-radius: 3px;
1005
+ }
1006
+ #cff-admin .cff_modal_box .cff-tokens-note{
1007
+ background: #dceada;
1008
+ border: 1px solid #6ca365;
1009
+ padding: 10px 15px;
1010
+ margin: 0 0 20px 0;
1011
+ border-radius: 5px;
1012
+ line-height: 1.3;
1013
+ }
1014
+ #cff-admin .cff_modal_box .cff-page-info-name{
1015
+ display: block;
1016
+ font-size: 15px;
1017
+ line-height: 1;
1018
+ padding: 5px 0 2px 0;
1019
+ }
1020
+ #cff-admin .cff_modal_box .cff-page-info{
1021
+ display: block;
1022
+ font-size: 13px;
1023
+ }
1024
+ #cff-admin #cff-insert-token,
1025
+ #cff-admin .cff-insert-reviews-token,
1026
+ #cff-admin .cff-insert-both-tokens{
1027
+ margin-top: 25px;
1028
+ float: left;
1029
+ clear: both;
1030
+ }
1031
+ #cff-admin .cff-insert-reviews-token,
1032
+ #cff-admin .cff-insert-both-tokens{
1033
+ clear: none;
1034
+ margin-left: 10px;
1035
+ }
1036
+ #cff-admin .cff-insert-reviews-token{
1037
+ color: #fff;
1038
+ border-color: #666;
1039
+ background: #888;
1040
+ box-shadow: 0 1px 0 #555;
1041
+ text-shadow: 0 -1px 0px #555;
1042
+ }
1043
+ #cff-admin .cff-insert-reviews-token:hover{
1044
+ background: #999;
1045
+ }
1046
+ #cff-admin .cff-insert-reviews-token:active{
1047
+ background: #777;
1048
+ border-color: #555;
1049
+ box-shadow: inset 0 2px 0 #666;
1050
+ vertical-align: top;
1051
+ }
1052
+ #cff-admin .cff-modal-close{
1053
+ position: absolute;
1054
+ top: 0;
1055
+ right: 0;
1056
+ padding: 10px;
1057
+ font-size: 14px;
1058
+ color: #ccc;
1059
+ margin: 0;
1060
+ }
1061
+ #cff-admin .cff-modal-close:hover,
1062
+ #cff-admin .cff-modal-close:focus{
1063
+ color: #333;
1064
+ }
1065
+ /* Display retrieved pages button */
1066
+ #cff-admin #cff_fb_show_tokens {
1067
+ background: rgba(0,0,0,0.4);
1068
+ color: #fff;
1069
+ margin-left: 10px;
1070
+ }
1071
+ #cff-admin #cff_fb_show_tokens:hover{
1072
+ background-color: rgba(0,0,0,0.35);
1073
+ }
1074
+
1075
  /* Choose token */
1076
  #cff-admin #cff-own, #cff-admin #cff-public{
1077
  display: none;
1109
  background: #f0f0f0;
1110
  padding: 10px 15px;
1111
  }
1112
+ #cff-admin .cff-test-license-error{
1113
+ margin-top: 10px;
1114
+ max-height: 380px;
1115
+ overflow-y: scroll;
1116
+ width: 99%;
1117
+ border: 1px solid #ddd;
1118
+ background: rgba(255,255,255,0.3);
1119
+ padding: 2px;
1120
+ }
1121
+
1122
+ /*Hide modal when saving settings */
1123
+ #cff-admin #cff_fb_login_modal.cffnomodal{
1124
+ display: none;
1125
+ }
1126
 
1127
  #cff-admin .cff-success-check {
1128
  color: #75cd32;
1130
  position: relative;
1131
  top: 6px;
1132
  left: 7px;
1133
+ }
1134
+
1135
+ /* Admin footer share icons */
1136
+ #cff-admin #cff-admin-share-links{
1137
+ opacity: 0;
1138
+ display: inline-block;
1139
+ padding: 5px;
1140
+ border: 1px solid #ccc;
1141
+ background: rgba(255,255,255,0.5);
1142
+ border-radius: 3px;
1143
+ transition: opacity 0.5s;
1144
+ }
1145
+ #cff-admin #cff-admin-share-links.cff-show{
1146
+ transition: opacity 0.5s;
1147
+ opacity: 1;
1148
+ }
1149
+ #cff-admin #twitter-widget-0 {
1150
+ width: 65px !important;
1151
  }
css/cff-style.css CHANGED
@@ -32,12 +32,24 @@
32
  #cff .cff-item.cff-box,
33
  #cff .cff-item.cff-box:first-child{
34
  padding: 15px;
35
- margin: 5px 0;
 
36
  border: none;
37
  -webkit-box-sizing: border-box;
38
  -moz-box-sizing: border-box;
39
  box-sizing: border-box;
40
  }
 
 
 
 
 
 
 
 
 
 
 
41
  /* Feed Header */
42
  .cff-header{
43
  width: 100%;
@@ -123,6 +135,7 @@
123
  background: #eee;
124
 
125
  background: url('../img/cff-avatar.png') no-repeat;
 
126
  }
127
  #cff .cff-author img{
128
  float: left;
@@ -130,6 +143,7 @@
130
  padding: 0 !important;
131
  border: none !important;
132
  font-size: 0;
 
133
  }
134
  #cff .cff-author .cff-author-text span.cff-page-name{
135
  display: table-cell;
@@ -149,7 +163,7 @@
149
  text-decoration: none;
150
  }
151
  #cff .cff-author.cff-no-author-info .cff-date{
152
- margin-top: 14px !important;
153
  }
154
  #cff .cff-author.cff-no-author-info .cff-author-img{
155
  width: 40px;
@@ -191,6 +205,32 @@
191
  /*************/
192
  /*** MEDIA ***/
193
  /*************/
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
194
  #cff .cff-break-word{
195
  word-break: break-all;
196
  }
@@ -349,8 +389,8 @@
349
  position: absolute;
350
  z-index: 1000;
351
  bottom: 22px;
352
- right: -54px;
353
- width: 140px;
354
  padding: 5px 5px 4px 5px;
355
  margin: 0;
356
  background: #333;
@@ -358,6 +398,10 @@
358
  font-size: 12px;
359
  line-height: 1.3;
360
 
 
 
 
 
361
  -webkit-box-sizing: border-box;
362
  -moz-box-sizing: border-box;
363
  box-sizing: border-box;
@@ -382,20 +426,26 @@
382
  margin: 0 !important;
383
  padding: 0 !important;
384
  color: #eee !important;
 
385
 
386
  -moz-border-radius: 4px;
387
  -webkit-border-radius: 4px;
388
  border-radius: 4px;
389
  }
390
  #cff .cff-share-tooltip a:hover{
391
- color: #fff;
392
  }
393
  #cff .cff-share-tooltip .cff-facebook-icon:hover{ background: #3b5998; }
394
  #cff .cff-share-tooltip .cff-twitter-icon:hover{ background: #00aced; }
395
  #cff .cff-share-tooltip .cff-google-icon:hover{ background: #dd4b39; }
396
  #cff .cff-share-tooltip .cff-linkedin-icon:hover{ background: #007bb6; }
397
  #cff .cff-share-tooltip .cff-pinterest-icon:hover{ background: #cb2027; }
398
- #cff .cff-share-tooltip .cff-email-icon:hover{ background: #666; }
 
 
 
 
 
399
 
400
  /* Like box */
401
  .cff-likebox{
@@ -425,20 +475,6 @@
425
  .cff-likebox.cff-bottom.cff-outside{
426
  margin-top: 10px;
427
  }
428
-
429
- /* Clear fix */
430
- /*.cff-clear:after {
431
- clear: both;
432
- content: ".";
433
- display: block;
434
- height: 0;
435
- visibility: hidden;
436
- }
437
- .cff-clear {
438
- display: inline-block;
439
- display: block;
440
- position: static;
441
- }*/
442
  /*********************/
443
  /*** STYLE OPTIONS ***/
444
  /*********************/
@@ -479,6 +515,15 @@
479
  font-size: 13px;
480
  }
481
 
 
 
 
 
 
 
 
 
 
482
  /* On mobile make the min-width 100% */
483
  @media all and (max-width: 640px){
484
  #cff.cff-width-resp{
@@ -497,18 +542,4 @@
497
  #cff .cff-linebreak{
498
  display: block;
499
  height: 5px;
500
- }
501
-
502
- /* Call to action button */
503
- #cff .cff-cta-link a {
504
- display: inline-block;
505
- padding: 5px 15px;
506
- border: 1px solid #ddd;
507
- border: 1px solid rgba(0,0,0,0.15);
508
- border-radius: 3px;
509
- }
510
- #cff .cff-cta-link a:hover {
511
- background: #f9f9f9;
512
- background: rgba(0,0,0,0.05);
513
- text-decoration: none;
514
  }
32
  #cff .cff-item.cff-box,
33
  #cff .cff-item.cff-box:first-child{
34
  padding: 15px;
35
+ margin: 8px 0;
36
+ background: rgba(255,255,255,0.5);
37
  border: none;
38
  -webkit-box-sizing: border-box;
39
  -moz-box-sizing: border-box;
40
  box-sizing: border-box;
41
  }
42
+ #cff .cff-item.cff-box:first-child{
43
+ margin-top: 0;
44
+ }
45
+ #cff .cff-item.cff-box:last-child{
46
+ margin-bottom: 0;
47
+ }
48
+ #cff .cff-item.cff-shadow{
49
+ box-shadow: 0 0 10px 0 rgba(0,0,0,0.15);
50
+ -moz-box-shadow: 0 0 10px 0 rgba(0,0,0,0.15);
51
+ -webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.15);
52
+ }
53
  /* Feed Header */
54
  .cff-header{
55
  width: 100%;
135
  background: #eee;
136
 
137
  background: url('../img/cff-avatar.png') no-repeat;
138
+ border-radius: 50%;
139
  }
140
  #cff .cff-author img{
141
  float: left;
143
  padding: 0 !important;
144
  border: none !important;
145
  font-size: 0;
146
+ border-radius: 50%;
147
  }
148
  #cff .cff-author .cff-author-text span.cff-page-name{
149
  display: table-cell;
163
  text-decoration: none;
164
  }
165
  #cff .cff-author.cff-no-author-info .cff-date{
166
+ margin-top: 12px !important;
167
  }
168
  #cff .cff-author.cff-no-author-info .cff-author-img{
169
  width: 40px;
205
  /*************/
206
  /*** MEDIA ***/
207
  /*************/
208
+ .cff-media-link .fa,
209
+ /*#cff .cff-media-link a,*/
210
+ #cff .cff-cta-link a {
211
+ display: inline-block;
212
+ width: auto;
213
+ padding: 5px 7px 5px 6px;
214
+ /*padding: 5px 10px;*/
215
+ margin-right: 6px;
216
+ border: 1px solid #eee;
217
+ border: 1px solid rgba(0,0,0,0.1);
218
+ border-radius: 3px;
219
+ background: rgba(0,0,0,0.02);
220
+ }
221
+ .cff-media-link .fa:hover,
222
+ /*#cff .cff-media-link a:hover,*/
223
+ #cff .cff-cta-link a:hover {
224
+ background: #f9f9f9;
225
+ background: rgba(0,0,0,0.03);
226
+ text-decoration: none;
227
+ }
228
+ /* Call to action button */
229
+ #cff .cff-cta-link a {
230
+ padding: 5px 15px;
231
+ }
232
+
233
+
234
  #cff .cff-break-word{
235
  word-break: break-all;
236
  }
389
  position: absolute;
390
  z-index: 1000;
391
  bottom: 22px;
392
+ right: -40px;
393
+ width: 110px;
394
  padding: 5px 5px 4px 5px;
395
  margin: 0;
396
  background: #333;
398
  font-size: 12px;
399
  line-height: 1.3;
400
 
401
+ -moz-border-radius: 4px;
402
+ -webkit-border-radius: 4px;
403
+ border-radius: 4px;
404
+
405
  -webkit-box-sizing: border-box;
406
  -moz-box-sizing: border-box;
407
  box-sizing: border-box;
426
  margin: 0 !important;
427
  padding: 0 !important;
428
  color: #eee !important;
429
+ opacity: 0;
430
 
431
  -moz-border-radius: 4px;
432
  -webkit-border-radius: 4px;
433
  border-radius: 4px;
434
  }
435
  #cff .cff-share-tooltip a:hover{
436
+ color: #fff !important;
437
  }
438
  #cff .cff-share-tooltip .cff-facebook-icon:hover{ background: #3b5998; }
439
  #cff .cff-share-tooltip .cff-twitter-icon:hover{ background: #00aced; }
440
  #cff .cff-share-tooltip .cff-google-icon:hover{ background: #dd4b39; }
441
  #cff .cff-share-tooltip .cff-linkedin-icon:hover{ background: #007bb6; }
442
  #cff .cff-share-tooltip .cff-pinterest-icon:hover{ background: #cb2027; }
443
+ #cff .cff-share-tooltip .cff-email-icon:hover{ background: #dd4b39; }
444
+ /* Fade in icons */
445
+ #cff .cff-share-tooltip a.cff-show{
446
+ opacity: 1;
447
+ transition: opacity 0.2s ease;
448
+ }
449
 
450
  /* Like box */
451
  .cff-likebox{
475
  .cff-likebox.cff-bottom.cff-outside{
476
  margin-top: 10px;
477
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
478
  /*********************/
479
  /*** STYLE OPTIONS ***/
480
  /*********************/
515
  font-size: 13px;
516
  }
517
 
518
+ /* Accessibility */
519
+ .cff-screenreader{
520
+ text-indent: -9999px !important;
521
+ display: block !important;
522
+ width: 0 !important;
523
+ height: 0 !important;
524
+ line-height: 0 !important;
525
+ }
526
+
527
  /* On mobile make the min-width 100% */
528
  @media all and (max-width: 640px){
529
  #cff.cff-width-resp{
542
  #cff .cff-linebreak{
543
  display: block;
544
  height: 5px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
545
  }
css/cff-style.min.css CHANGED
@@ -1 +1 @@
1
- .cff-wrapper:after{content:"";display:table;clear:both}#cff{float:left;width:100%;margin:0 auto;padding:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}#cff .cff-item{float:left;width:100%;clear:both;padding:20px 0 15px;margin:0;border-bottom:1px solid #ddd}#cff .cff-item:first-child{padding-top:0}#cff .cff-item.cff-box,#cff .cff-item.cff-box:first-child{padding:15px;margin:5px 0;border:none;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.cff-header{width:100%;margin:0 0 15px;padding:0;line-height:1;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}#cff .cff-share-tooltip,#cff .cff-shared-link{-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.cff-header .fa,.cff-header svg{margin:0 10px 0 0;padding:0}#cff .cff-less{display:none}#cff.cff-default-styles a{text-decoration:none}#cff.cff-default-styles a:focus,#cff.cff-default-styles a:hover{text-decoration:underline}#cff .cff-author a,#cff.cff-default-styles .cff-author a,#cff.cff-default-styles .cff-credit a{text-decoration:none}#cff .cff-post-text-link{display:block}#cff .cff-post-desc,#cff h3,#cff h4,#cff h5,#cff h6,#cff p{float:left;width:100%;clear:both;padding:0;margin:5px 0;white-space:pre;white-space:pre-wrap;white-space:pre-line;white-space:-pre-wrap;white-space:-o-pre-wrap;white-space:-moz-pre-wrap;white-space:-hp-pre-wrap;word-wrap:break-word}#cff.cff-default-styles .cff-post-desc,#cff.cff-default-styles h3,#cff.cff-default-styles h4,#cff.cff-default-styles h5,#cff.cff-default-styles h6,#cff.cff-default-styles p{line-height:1.4}#cff .cff-date{float:left;min-width:50px;width:auto}#cff.cff-default-styles .cff-date{font-size:11px}#cff .cff-author{float:left;clear:both;margin:0 0 15px;padding:0;line-height:1.2;width:100%}#cff .cff-author-img,#cff .cff-author.cff-no-author-info .cff-author-img{width:40px;height:40px;background:url(../img/cff-avatar.png) no-repeat}#cff .cff-author a{border:none}#cff .cff-author-img{float:left;margin:0 0 0 -100%!important;font-size:0}#cff .cff-author img{float:left;margin:0!important;padding:0!important;border:none!important;font-size:0}#cff .cff-author .cff-author-text span.cff-page-name{display:table-cell;vertical-align:middle;height:40px;margin:0;font-weight:700;padding-left:50px;float:none}#cff .cff-author .cff-story{font-weight:400}#cff .cff-author.cff-no-author-info .cff-date{margin-top:14px!important}#cff .cff-author .cff-author-text{float:left;width:100%}#cff .cff-author .cff-date,#cff .cff-author .cff-page-name{float:left;clear:both;width:auto;margin:0 0 0 50px!important}#cff.cff-default-styles .cff-author .cff-author-text *{font-weight:700;line-height:1.2}#cff .cff-author .cff-date{color:#9197a3;font-size:11px;margin-top:0!important;margin-bottom:0!important}#cff.cff-default-styles .cff-author .cff-date{font-weight:400}#cff .cff-author .cff-page-name.cff-author-date{float:left;padding:2px 0 0;font-size:14px}#cff .cff-break-word{word-break:break-all}#cff .cff-expand{display:none}#cff.cff-default-styles .cff-expand a{font-size:11px;font-weight:400}#cff .cff-shared-link{float:left;clear:both;width:100%;padding:5px 10px;margin:10px 0 5px;border:1px solid #d9d9d9;background:rgba(0,0,0,.02);border:1px solid rgba(0,0,0,.07);box-sizing:border-box}#cff .cff-no-styles{background:0 0;border:none;padding:0}#cff .cff-link{float:left;clear:both;max-width:20%;margin:10px 0 0}#cff .cff-link img{max-width:100%}#cff .cff-link-title{float:left;clear:both;width:100%;display:block}#cff.cff-default-styles .cff-link-title{font-weight:700}#cff p.cff-link-title{margin:5px 0 0}#cff .cff-text-link{float:left;clear:none;width:72%;margin-left:3%;padding:0 0 5px}#cff .cff-link-caption{margin:0}#cff.cff-default-styles .cff-link-caption{font-size:12px}#cff .cff-text-link.cff-no-image{width:100%;margin-left:0}#cff .cff-post-desc{margin:5px 0 0}#cff .cff-details{float:left;clear:none;width:100%;margin:0;padding:0}#cff .cff-details h5{margin:0 0 5px}#cff.cff-default-styles .cff-details h5{padding:0;font-size:16px}#cff.cff-default-styles .cff-details p{font-size:14px}#cff.cff-default-styles .cff-post-links,#cff.cff-default-styles .cff-post-links a{font-size:11px}#cff .cff-timeline-event .cff-date,#cff .cff-timeline-event .cff-info,#cff .cff-timeline-event .cff-timeline-event-title,#cff .cff-timeline-event .cff-where{display:block;width:100%;clear:both}#cff .cff-details .cff-info{padding:10px 0 0}#cff.cff-default-styles .cff-details .cff-info{line-height:1.2}#cff .cff-desc-wrap{float:left;width:100%}#cff .cff-note-title{display:block;font-weight:700;padding-bottom:5px}#cff .cff-post-links{float:left;clear:none;padding:5px 0 0;margin:0}#cff .cff-post-links.cff-left{float:left;margin:8px 0}#cff .cff-post-links a:first-child{padding-left:0;margin:0}#cff .cff-dot{padding:0 5px}#cff .cff-share-container{position:relative;display:inline}#cff .cff-share-tooltip{display:none;position:absolute;z-index:1000;bottom:22px;right:-54px;width:140px;padding:5px 5px 4px;margin:0;background:#333;color:#eee;font-size:12px;line-height:1.3;box-sizing:border-box}#cff .cff-share-tooltip .fa-play{position:absolute;font-size:8px;bottom:-6px;left:50%;margin-left:-3px;color:#333}#cff .cff-share-tooltip a .fa,#cff .cff-share-tooltip a svg{font-size:16px;margin:0;padding:5px}#cff .cff-share-tooltip a{display:block;float:left;margin:0!important;padding:0!important;color:#eee!important;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px}#cff .cff-share-tooltip a:hover{color:#fff}#cff .cff-share-tooltip .cff-facebook-icon:hover{background:#3b5998}#cff .cff-share-tooltip .cff-twitter-icon:hover{background:#00aced}#cff .cff-share-tooltip .cff-google-icon:hover{background:#dd4b39}#cff .cff-share-tooltip .cff-linkedin-icon:hover{background:#007bb6}#cff .cff-share-tooltip .cff-pinterest-icon:hover{background:#cb2027}#cff .cff-share-tooltip .cff-email-icon:hover{background:#666}.cff-likebox{float:left;width:100%;position:relative;margin:20px 0 0}.cff-likebox .fb_iframe_widget{width:100%}.cff-likebox .fb_iframe_widget span{width:100%!important}.cff-likebox .fb_iframe_widget iframe{margin:0;position:relative;top:0;left:0;width:100%!important;height:100%}.cff-likebox.cff-top.cff-outside{margin-bottom:10px}.cff-likebox.cff-bottom.cff-outside{margin-top:10px}#cff.cff-fixed-height{overflow:hidden;overflow-y:auto;padding:5px 10px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}#cff .cff-error-msg{display:none;font-size:12px;font-family:sans-serif}#cff #cff-error-reason{display:none;padding:5px 0 0;clear:both}#cff.cff-default-styles .cff-credit{font-size:11px}#cff .cff-credit img{float:left;margin:-2px 5px 0 0}#cff .cff-credit .fa{padding-right:5px;font-size:13px}@media all and (max-width:640px){#cff.cff-width-resp{width:100%!important}}#cff .cff-comment .cff-comment-text img,#cff img.emoji,#cff-lightbox-wrapper .cff-comment .cff-comment-text img,#cff-lightbox-wrapper img.emoji{float:none;max-width:100%}#cff .cff-linebreak{display:block;height:5px}#cff .cff-cta-link a{display:inline-block;padding:5px 15px;border:1px solid #ddd;border:1px solid rgba(0,0,0,.15);border-radius:3px}#cff .cff-cta-link a:hover{background:#f9f9f9;background:rgba(0,0,0,.05);text-decoration:none}
1
+ .cff-wrapper:after{content:"";display:table;clear:both}#cff{float:left;width:100%;margin:0 auto;padding:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}#cff .cff-item{float:left;width:100%;clear:both;padding:20px 0 15px 0;margin:0;border-bottom:1px solid #ddd}#cff .cff-item:first-child{padding-top:0}#cff .cff-item.cff-box,#cff .cff-item.cff-box:first-child{padding:15px;margin:8px 0;background:rgba(255,255,255,.5);border:none;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}#cff .cff-item.cff-box:first-child{margin-top:0}#cff .cff-item.cff-box:last-child{margin-bottom:0}#cff .cff-item.cff-shadow{box-shadow:0 0 10px 0 rgba(0,0,0,.15);-moz-box-shadow:0 0 10px 0 rgba(0,0,0,.15);-webkit-box-shadow:0 0 10px 0 rgba(0,0,0,.15)}.cff-header{width:100%;margin:0 0 15px 0;padding:0;line-height:1;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.cff-header .fa,.cff-header svg{margin:0 10px 0 0;padding:0}#cff .cff-less{display:none}#cff.cff-default-styles a{text-decoration:none}#cff.cff-default-styles a:focus,#cff.cff-default-styles a:hover{text-decoration:underline}#cff .cff-post-text-link{display:block}#cff .cff-post-desc,#cff h3,#cff h4,#cff h5,#cff h6,#cff p{float:left;width:100%;clear:both;padding:0;margin:5px 0;white-space:pre;white-space:pre-wrap;white-space:pre-line;white-space:-pre-wrap;white-space:-o-pre-wrap;white-space:-moz-pre-wrap;white-space:-hp-pre-wrap;word-wrap:break-word}#cff.cff-default-styles .cff-post-desc,#cff.cff-default-styles h3,#cff.cff-default-styles h4,#cff.cff-default-styles h5,#cff.cff-default-styles h6,#cff.cff-default-styles p{line-height:1.4}#cff .cff-date{float:left;min-width:50px;width:auto}#cff.cff-default-styles .cff-date{font-size:11px}#cff .cff-author{float:left;clear:both;margin:0 0 15px 0;padding:0;line-height:1.2;width:100%}#cff .cff-author a{text-decoration:none;border:none}#cff .cff-author-img{float:left;width:40px;height:40px;margin:0 0 0 -100%!important;font-size:0;background:#eee;background:url(../img/cff-avatar.png) no-repeat;border-radius:50%}#cff .cff-author img{float:left;margin:0!important;padding:0!important;border:none!important;font-size:0;border-radius:50%}#cff .cff-author .cff-author-text span.cff-page-name{display:table-cell;vertical-align:middle;height:40px;margin:0;font-weight:700;padding-left:50px;float:none}#cff .cff-author .cff-story{font-weight:400}#cff.cff-default-styles .cff-author a{text-decoration:none}#cff .cff-author.cff-no-author-info .cff-date{margin-top:12px!important}#cff .cff-author.cff-no-author-info .cff-author-img{width:40px;height:40px;background:url(../img/cff-avatar.png) no-repeat}#cff .cff-author .cff-author-text{float:left;width:100%}#cff .cff-author .cff-date,#cff .cff-author .cff-page-name{float:left;clear:both;width:auto;margin:0 0 0 50px!important}#cff.cff-default-styles .cff-author .cff-author-text *{font-weight:700;line-height:1.2}#cff .cff-author .cff-date{color:#9197a3;font-size:11px;margin-top:0!important;margin-bottom:0!important}#cff.cff-default-styles .cff-author .cff-date{font-weight:400}#cff .cff-author .cff-page-name.cff-author-date{float:left;padding:2px 0 0 0;font-size:14px}#cff .cff-cta-link a,.cff-media-link .fa{display:inline-block;width:auto;padding:5px 7px 5px 6px;margin-right:6px;border:1px solid #eee;border:1px solid rgba(0,0,0,.1);border-radius:3px;background:rgba(0,0,0,.02)}#cff .cff-cta-link a:hover,.cff-media-link .fa:hover{background:#f9f9f9;background:rgba(0,0,0,.03);text-decoration:none}#cff .cff-cta-link a{padding:5px 15px}#cff .cff-break-word{word-break:break-all}#cff .cff-expand{display:none}#cff.cff-default-styles .cff-expand a{font-size:11px;font-weight:400}#cff .cff-shared-link{float:left;clear:both;width:100%;padding:5px 10px;margin:10px 0 5px 0;background:#f9f9f9;border:1px solid #d9d9d9;background:rgba(0,0,0,.02);border:1px solid rgba(0,0,0,.07);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}#cff .cff-no-styles{background:0 0;border:none;padding:0}#cff .cff-link{float:left;clear:both;max-width:20%;margin:10px 0 0 0}#cff .cff-link img{max-width:100%}#cff .cff-link-title{float:left;clear:both;width:100%;display:block}#cff.cff-default-styles .cff-link-title{font-weight:700}#cff p.cff-link-title{margin:5px 0 0 0}#cff .cff-text-link{float:left;clear:none;width:72%;margin-left:3%;padding:0 0 5px 0}#cff .cff-link-caption{margin:0}#cff.cff-default-styles .cff-link-caption{font-size:12px}#cff .cff-text-link.cff-no-image{width:100%;margin-left:0}#cff .cff-post-desc{margin:5px 0 0 0}#cff .cff-details{float:left;clear:none;width:100%;margin:0;padding:0}#cff .cff-details h5{margin:0 0 5px 0}#cff.cff-default-styles .cff-details h5{padding:0;font-size:16px}#cff.cff-default-styles .cff-details p{font-size:14px}#cff .cff-timeline-event .cff-date,#cff .cff-timeline-event .cff-info,#cff .cff-timeline-event .cff-timeline-event-title,#cff .cff-timeline-event .cff-where{display:block;width:100%;clear:both}#cff .cff-details .cff-info{padding:10px 0 0 0}#cff.cff-default-styles .cff-details .cff-info{line-height:1.2}#cff .cff-desc-wrap{float:left;width:100%}#cff .cff-note-title{display:block;font-weight:700;padding-bottom:5px}#cff .cff-post-links{float:left;clear:none;padding:5px 0 0 0;margin:0}#cff.cff-default-styles .cff-post-links{font-size:11px}#cff .cff-post-links.cff-left{float:left;margin:8px 0}#cff.cff-default-styles .cff-post-links a{font-size:11px}#cff .cff-post-links a:first-child{padding-left:0;margin:0}#cff .cff-dot{padding:0 5px}#cff .cff-share-container{position:relative;display:inline}#cff .cff-share-tooltip{display:none;position:absolute;z-index:1000;bottom:22px;right:-40px;width:110px;padding:5px 5px 4px 5px;margin:0;background:#333;color:#eee;font-size:12px;line-height:1.3;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}#cff .cff-share-tooltip .fa-play{position:absolute;font-size:8px;bottom:-6px;left:50%;margin-left:-3px;color:#333}#cff .cff-share-tooltip a .fa,#cff .cff-share-tooltip a svg{font-size:16px;margin:0;padding:5px}#cff .cff-share-tooltip a{display:block;float:left;margin:0!important;padding:0!important;color:#eee!important;opacity:0;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px}#cff .cff-share-tooltip a:hover{color:#fff!important}#cff .cff-share-tooltip .cff-facebook-icon:hover{background:#3b5998}#cff .cff-share-tooltip .cff-twitter-icon:hover{background:#00aced}#cff .cff-share-tooltip .cff-google-icon:hover{background:#dd4b39}#cff .cff-share-tooltip .cff-linkedin-icon:hover{background:#007bb6}#cff .cff-share-tooltip .cff-pinterest-icon:hover{background:#cb2027}#cff .cff-share-tooltip .cff-email-icon:hover{background:#dd4b39}#cff .cff-share-tooltip a.cff-show{opacity:1;transition:opacity .2s ease}.cff-likebox{float:left;width:100%;position:relative;margin:20px 0 0 0}.cff-likebox .fb_iframe_widget{width:100%}.cff-likebox .fb_iframe_widget span{width:100%!important}.cff-likebox .fb_iframe_widget iframe{margin:0;position:relative;top:0;left:0;width:100%!important;height:100%}.cff-likebox.cff-top.cff-outside{margin-bottom:10px}.cff-likebox.cff-bottom.cff-outside{margin-top:10px}#cff.cff-fixed-height{overflow:hidden;overflow-y:auto;padding:5px 10px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}#cff .cff-error-msg{display:none;font-size:12px;font-family:sans-serif}#cff #cff-error-reason{display:none;padding:5px 0 0 0;clear:both}#cff.cff-default-styles .cff-credit{font-size:11px}#cff.cff-default-styles .cff-credit a{text-decoration:none}#cff .cff-credit img{float:left;margin:-2px 5px 0 0}#cff .cff-credit .fa{padding-right:5px;font-size:13px}.cff-screenreader{text-indent:-9999px!important;display:block!important;width:0!important;height:0!important;line-height:0!important}@media all and (max-width:640px){#cff.cff-width-resp{width:100%!important}}#cff .cff-comment .cff-comment-text img,#cff img.emoji,#cff-lightbox-wrapper .cff-comment .cff-comment-text img,#cff-lightbox-wrapper img.emoji{float:none;max-width:100%}#cff .cff-linebreak{display:block;height:5px}
custom-facebook-feed-admin.php CHANGED
@@ -168,8 +168,6 @@ function cff_settings_page() {
168
  $pages_data = @file_get_contents($url);
169
  $pages_data_arr = json_decode($pages_data);
170
 
171
- echo '<div class="cff-managed-pages">';
172
-
173
  if( empty($pages_data_arr->data) ){
174
  //If they don't manage any pages then just use the user token instead
175
  ?>
@@ -186,18 +184,36 @@ function cff_settings_page() {
186
  <?php
187
  } else {
188
  //Show the pages they manage
189
- echo '<p style="background: #dceada; border: 1px solid #6ca365; padding: 15px 20px; border-radius: 5px;">Select one of the pages below to get an Access Token.<br /><b><u>Important:</u> This Access Token will allow you to display posts from <u>any</u> public Facebook page, not just the one selected.</b></p>';
 
 
 
 
 
190
 
 
191
  foreach ( $pages_data_arr->data as $page => $page_data ) {
192
  echo '<div class="cff-managed-page ';
193
  if( $page_data->id == $page_id_val ) echo 'cff-page-selected';
194
  echo '" data-token="'.$page_data->access_token.'" data-page-id="'.$page_data->id.'">';
195
- echo '<p><img class="cff-page-avatar" border="0" height="50" width="50" src="https://graph.facebook.com/'.$page_data->id.'/picture"><b>'.$page_data->name.'</b> &nbsp; (Page ID: '.$page_data->id.')</p>';
196
  echo '</div>';
197
  }
198
- }
 
 
 
 
 
 
 
 
199
 
200
- echo '</div>';
 
 
 
 
201
 
202
  }
203
  }
@@ -511,42 +527,15 @@ function cff_settings_page() {
511
  <div class="cff_quickstart">
512
  <h3><i class="fa fa-rocket" aria-hidden="true"></i>&nbsp; Display your feed</h3>
513
  <p>Copy and paste this shortcode directly into the page, post or widget where you'd like to display the feed: <input type="text" value="[custom-facebook-feed]" size="22" readonly="readonly" style="text-align: center;" onclick="this.focus();this.select()" title="To copy, click the field then press Ctrl + C (PC) or Cmd + C (Mac)."></p>
514
- <p>Find out how to display <a href="https://smashballoon.com/using-shortcode-options-customize-facebook-feeds/" target="_blank"><b>multiple feeds</b></a>.</p>
515
  </div>
516
 
517
- <a href="https://smashballoon.com/custom-facebook-feed/demo" target="_blank" class="cff-pro-notice"><img src="<?php echo plugins_url( 'img/pro.png' , __FILE__ ) ?>" /></a>
518
 
519
  <div class="cff-share-plugin">
520
  <h3><?php _e('Like the plugin? Help spread the word!', 'custom-facebook-feed'); ?></h3>
521
 
522
- <!-- TWITTER -->
523
- <a href="https://twitter.com/share" class="twitter-share-button" data-url="https://wordpress.org/plugins/custom-facebook-feed/" data-text="Display your Facebook posts on your site your way using the Custom Facebook Feed WordPress plugin!" data-via="smashballoon" data-dnt="true">Tweet</a>
524
- <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
525
- <style type="text/css">
526
- #twitter-widget-0{ float: left; width: 82px !important; }
527
- .IN-widget{ margin-right: 20px; }
528
- </style>
529
-
530
- <!-- FACEBOOK -->
531
- <div id="fb-root" style="display: none;"></div>
532
- <script>(function(d, s, id) {
533
- var js, fjs = d.getElementsByTagName(s)[0];
534
- if (d.getElementById(id)) return;
535
- js = d.createElement(s); js.id = id;
536
- js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&appId=&version=v2.0";
537
- fjs.parentNode.insertBefore(js, fjs);
538
- }(document, 'script', 'facebook-jssdk'));</script>
539
- <div class="fb-like" data-href="https://wordpress.org/plugins/custom-facebook-feed/" data-layout="button_count" data-action="like" data-show-faces="false" data-share="true" style="display: block; float: left; margin-right: 20px;"></div>
540
-
541
- <!-- LINKEDIN -->
542
- <script src="//platform.linkedin.com/in.js" type="text/javascript">
543
- lang: en_US
544
- </script>
545
- <script type="IN/Share" data-url="https://wordpress.org/plugins/custom-facebook-feed/"></script>
546
-
547
- <!-- GOOGLE + -->
548
- <script src="https://apis.google.com/js/platform.js" async defer></script>
549
- <div class="g-plusone" data-size="medium" data-href="https://wordpress.org/plugins/custom-facebook-feed/"></div>
550
  </div>
551
 
552
  <?php } //End config tab ?>
@@ -560,12 +549,12 @@ function cff_settings_page() {
560
  <h3 style="padding-bottom: 10px;">Need help?</h3>
561
 
562
  <p>
563
- <span class="cff-support-title"><i class="fa fa-life-ring" aria-hidden="true"></i>&nbsp; <a href="https://smashballoon.com/custom-facebook-feed/docs/free/" target="_blank"><?php _e('Setup Directions'); ?></a></span>
564
  <?php _e('A step-by-step guide on how to setup and use the plugin.'); ?>
565
  </p>
566
 
567
  <p>
568
- <span class="cff-support-title"><i class="fa fa-question-circle" aria-hidden="true"></i>&nbsp; <a href="https://smashballoon.com/custom-facebook-feed/faq/" target="_blank"><?php _e('FAQs and Docs'); ?></a></span>
569
  <?php _e('View our expansive library of FAQs and documentation to help solve your problem as quickly as possible.'); ?>
570
  </p>
571
 
@@ -576,7 +565,7 @@ function cff_settings_page() {
576
  <li>&bull;&nbsp; <?php _e('<a href="https://smashballoon.com/category/custom-facebook-feed/faq/?cat=18" target="_blank">General Questions</a>'); ?></li>
577
  <li>&bull;&nbsp; <?php _e('<a href="https://smashballoon.com/category/custom-facebook-feed/getting-started/?cat=18" target="_blank">Getting Started</a>'); ?></li>
578
  <li>&bull;&nbsp; <?php _e('<a href="https://smashballoon.com/category/custom-facebook-feed/troubleshooting/?cat=18" target="_blank">Common Issues</a>'); ?></li>
579
- <li style="margin-top: 8px; font-size: 12px;"><a href="https://smashballoon.com/custom-facebook-feed/faq/" target="_blank">See all<i class="fa fa-chevron-right" aria-hidden="true"></i></a></li>
580
  </ul>
581
 
582
  <ul>
@@ -584,7 +573,7 @@ function cff_settings_page() {
584
  <li>&bull;&nbsp; <?php _e('<a href="http://smashballoon.com/custom-facebook-feed/docs/free/" target="_blank">Installation and Configuration</a>'); ?></li>
585
  <li>&bull;&nbsp; <?php _e('<a href="https://smashballoon.com/custom-facebook-feed/docs/shortcodes/" target="_blank">Shortcode Reference</a>', 'custom-facebook-feed'); ?></li>
586
  <li>&bull;&nbsp; <?php _e('<a href=https://smashballoon.com/category/custom-facebook-feed/customizations/snippets/?cat=18" target="_blank">Custom CSS and JavaScript Snippets</a>'); ?></li>
587
- <li style="margin-top: 8px; font-size: 12px;"><a href="https://smashballoon.com/custom-facebook-feed/docs/" target="_blank">See all<i class="fa fa-chevron-right" aria-hidden="true"></i></a></li>
588
  </ul>
589
  </div>
590
 
@@ -699,10 +688,12 @@ if( !$options[ 'cff_show_link' ] ) echo 'Post Link';
699
  echo "\n"; ?>
700
 
701
  ## STYLE POSTS: ##
 
702
  Background Color => <?php echo $options[ 'cff_post_bg_color' ] ."\n"; ?>
703
  Rounded => <?php echo $options[ 'cff_post_rounded' ] ."\n"; ?>
704
  Seperator Color => <?php echo $options[ 'cff_sep_color' ] ."\n"; ?>
705
  Seperator Size => <?php echo $options[ 'cff_sep_size' ] ."\n"; ?>
 
706
 
707
  ## POST AUTHOR: ##
708
  Text Size => <?php echo $options[ 'cff_author_size' ] ."\n"; ?>
@@ -736,14 +727,17 @@ Text Before Date => <?php echo $options['cff_date_before'] ."\n"; ?>
736
  Text After Date => <?php echo $options['cff_date_after'] ."\n"; ?>
737
 
738
  ## SHARED LINK BOXES: ##
 
 
 
739
  Link Title Format => <?php echo $options['cff_link_title_format'] ."\n"; ?>
740
- Link Title Size => <?php echo $options['cff_link_size'] ."\n"; ?>
741
- Link Title Color => <?php echo $options['cff_link_color'] ."\n"; ?>
 
742
  Link URL Color => <?php echo $options['cff_link_url_color'] ."\n"; ?>
 
 
743
  Max Length => <?php echo get_option('cff_body_length') ."\n"; ?>
744
- Box Background Color => <?php echo $options['cff_link_bg_color'] ."\n"; ?>
745
- Box Border Color => <?php echo $options['cff_link_border_color'] ."\n"; ?>
746
- Remove Background/Border => <?php echo $options['cff_disable_link_box'] ."\n"; ?>
747
 
748
  ## EVENT TITLE: ##
749
  Format => <?php echo $options['cff_event_title_format'] ."\n"; ?>
@@ -873,10 +867,11 @@ function cff_style_page() {
873
  'cff_show_meta' => true,
874
  'cff_show_link' => true,
875
  'cff_show_like_box' => true,
876
- //Post Styple
 
877
  'cff_post_bg_color' => '',
878
  'cff_post_rounded' => '0',
879
-
880
  //Typography
881
  'cff_title_format' => 'p',
882
  'cff_title_size' => 'inherit',
@@ -888,6 +883,9 @@ function cff_style_page() {
888
  'cff_body_color' => '',
889
  'cff_link_title_format' => 'p',
890
  'cff_link_title_size' => 'inherit',
 
 
 
891
  'cff_link_title_color' => '',
892
  'cff_link_url_color' => '',
893
  'cff_link_bg_color' => '',
@@ -1053,8 +1051,10 @@ function cff_style_page() {
1053
  $cff_show_link = $options[ 'cff_show_link' ];
1054
  $cff_show_like_box = $options[ 'cff_show_like_box' ];
1055
  //Post Style
 
1056
  $cff_post_bg_color = $options[ 'cff_post_bg_color' ];
1057
  $cff_post_rounded = $options[ 'cff_post_rounded' ];
 
1058
 
1059
  //Typography
1060
  $cff_see_more_text = $options[ 'cff_see_more_text' ];
@@ -1069,6 +1069,9 @@ function cff_style_page() {
1069
  $cff_body_color = $options[ 'cff_body_color' ];
1070
  $cff_link_title_format = $options[ 'cff_link_title_format' ];
1071
  $cff_link_title_size = $options[ 'cff_link_title_size' ];
 
 
 
1072
  $cff_link_title_color = $options[ 'cff_link_title_color' ];
1073
  $cff_link_url_color = $options[ 'cff_link_url_color' ];
1074
  $cff_link_bg_color = $options[ 'cff_link_bg_color' ];
@@ -1351,10 +1354,12 @@ function cff_style_page() {
1351
  if (isset($_POST[ 'cff_body_length' ]) ) $cff_body_length_val = sanitize_text_field( $_POST[ $cff_body_length ] );
1352
 
1353
  //Post Style
1354
- (isset($_POST[ 'cff_post_bg_color' ]) ) ? $cff_post_bg_color = sanitize_text_field( $_POST[ 'cff_post_bg_color' ] ) : $cff_post_bg_color = '';
1355
- (isset($_POST[ 'cff_post_rounded' ]) ) ? $cff_post_rounded = sanitize_text_field( $_POST[ 'cff_post_rounded' ] ) : $cff_post_rounded = '';
1356
- if (isset($_POST[ 'cff_sep_color' ])) $cff_sep_color = sanitize_text_field( $_POST[ 'cff_sep_color' ] );
1357
- if (isset($_POST[ 'cff_sep_size' ])) $cff_sep_size = sanitize_text_field( $_POST[ 'cff_sep_size' ] );
 
 
1358
 
1359
  //Author
1360
  if (isset($_POST[ 'cff_author_size' ])) $cff_author_size = sanitize_text_field( $_POST[ 'cff_author_size' ] );
@@ -1375,12 +1380,15 @@ function cff_style_page() {
1375
  if (isset($_POST[ 'cff_body_weight' ]) ) $cff_body_weight = sanitize_text_field( $_POST[ 'cff_body_weight' ] );
1376
  if (isset($_POST[ 'cff_body_color' ]) ) $cff_body_color = sanitize_text_field( $_POST[ 'cff_body_color' ] );
1377
  if (isset($_POST[ 'cff_link_title_format' ]) ) $cff_link_title_format = sanitize_text_field( $_POST[ 'cff_link_title_format' ] );
1378
- if (isset($_POST[ 'cff_link_title_size' ]) ) $cff_link_title_size = sanitize_text_field( $_POST[ 'cff_link_title_size' ] );
1379
- if (isset($_POST[ 'cff_link_title_color' ]) ) $cff_link_title_color = sanitize_text_field( $_POST[ 'cff_link_title_color' ] );
1380
- if (isset($_POST[ 'cff_link_url_color' ]) ) $cff_link_url_color = sanitize_text_field( $_POST[ 'cff_link_url_color' ] );
1381
- if (isset($_POST[ 'cff_link_bg_color' ]) ) $cff_link_bg_color = sanitize_text_field( $_POST[ 'cff_link_bg_color' ] );
1382
- if (isset($_POST[ 'cff_link_border_color' ]) ) $cff_link_border_color = sanitize_text_field( $_POST[ 'cff_link_border_color' ] );
1383
- (isset($_POST[ 'cff_disable_link_box' ]) ) ? $cff_disable_link_box = sanitize_text_field( $_POST[ 'cff_disable_link_box' ] ) : $cff_disable_link_box = '';
 
 
 
1384
 
1385
 
1386
  //Event title
@@ -1455,10 +1463,12 @@ function cff_style_page() {
1455
  $options[ 'cff_author_color' ] = $cff_author_color;
1456
 
1457
  //Post Style
 
1458
  $options[ 'cff_post_bg_color' ] = $cff_post_bg_color;
1459
  $options[ 'cff_post_rounded' ] = $cff_post_rounded;
1460
  $options[ 'cff_sep_color' ] = $cff_sep_color;
1461
  $options[ 'cff_sep_size' ] = $cff_sep_size;
 
1462
 
1463
  //Typography
1464
  $options[ 'cff_title_format' ] = $cff_title_format;
@@ -1474,6 +1484,9 @@ function cff_style_page() {
1474
  $options[ 'cff_body_color' ] = $cff_body_color;
1475
  $options[ 'cff_link_title_format' ] = $cff_link_title_format;
1476
  $options[ 'cff_link_title_size' ] = $cff_link_title_size;
 
 
 
1477
  $options[ 'cff_link_title_color' ] = $cff_link_title_color;
1478
  $options[ 'cff_link_url_color' ] = $cff_link_url_color;
1479
  $options[ 'cff_link_bg_color' ] = $cff_link_bg_color;
@@ -1783,7 +1796,7 @@ function cff_style_page() {
1783
  <h3><?php _e('Post Types', 'custom-facebook-feed'); ?></h3>
1784
  <tr valign="top">
1785
  <th scope="row"><?php _e('Only show these types of posts:', 'custom-facebook-feed'); ?><br />
1786
- <i style="color: #666; font-size: 11px;"><a href="https://smashballoon.com/custom-facebook-feed/" target="_blank"><?php _e('Upgrade to Pro to enable post types, photos, videos and more', 'custom-facebook-feed'); ?></a></i></th>
1787
  <td>
1788
  <div>
1789
  <input name="cff_show_status_type" type="checkbox" id="cff_show_status_type" disabled checked />
@@ -1843,7 +1856,7 @@ function cff_style_page() {
1843
  <td>
1844
  <input type="checkbox" name="cff_header_outside" id="cff_header_outside" <?php if($cff_header_outside == true) echo 'checked="checked"' ?> />&nbsp;<?php _e('Yes', 'custom-facebook-feed'); ?>
1845
  <a class="cff-tooltip-link" href="JavaScript:void(0);"><i class="fa fa-question-circle" aria-hidden="true"></i></a>
1846
- <p class="cff-tooltip cff-more-info"><?php _e("This positions the Header outside of the feed container. It is useful if your feed has a vertical scrollbar as it places it outside of the scrollable area and fixes it at the top or bottom."); ?></p>
1847
  </td>
1848
  </tr>
1849
 
@@ -2055,7 +2068,7 @@ function cff_style_page() {
2055
  <hr />
2056
 
2057
  <h3><?php _e('"Load More" button'); ?></h3>
2058
- <a href="https://smashballoon.com/custom-facebook-feed/" target="_blank">Upgrade to Pro to enable the Load More button</a>
2059
  <p class="submit cff-expand-button">
2060
  <a href="javascript:void(0);" class="button"><b>+</b> Show Pro Options</a>
2061
  </p>
@@ -2098,8 +2111,54 @@ function cff_style_page() {
2098
 
2099
  <hr />
2100
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2101
  <h3><?php _e('Filter Content by String'); ?></h3>
2102
- <a href="https://smashballoon.com/custom-facebook-feed/" target="_blank">Upgrade to Pro to enable Filtering</a>
2103
  <p class="submit cff-expand-button">
2104
  <a href="javascript:void(0);" class="button"><b>+</b> Show Pro Options</a>
2105
  </p>
@@ -2138,7 +2197,7 @@ function cff_style_page() {
2138
  </div>
2139
 
2140
 
2141
- <a href="https://smashballoon.com/custom-facebook-feed/demo" target="_blank" class="cff-pro-notice"><img src="<?php echo plugins_url( 'img/pro.png' , __FILE__ ) ?>" /></a>
2142
 
2143
  <?php } //End General tab ?>
2144
  <?php if( $cff_active_tab == 'post_layout' ) { //Start Post Layout tab ?>
@@ -2151,7 +2210,7 @@ function cff_style_page() {
2151
  <input type="hidden" name="<?php echo $style_post_layout_hidden_field_name; ?>" value="Y">
2152
  <br />
2153
  <h3><?php _e('Post Layouts', 'custom-facebook-feed'); ?></h3>
2154
- <a href="https://smashballoon.com/custom-facebook-feed/" target="_blank"><?php _e('Upgrade to Pro to enable layouts', 'custom-facebook-feed'); ?></a>
2155
  <p class="submit cff-expand-button">
2156
  <a href="javascript:void(0);" class="button"><b>+</b> Show Pro Options</a>
2157
  </p>
@@ -2318,7 +2377,7 @@ function cff_style_page() {
2318
  </table>
2319
 
2320
  <?php submit_button(); ?>
2321
- <a href="https://smashballoon.com/custom-facebook-feed/demo" target="_blank" class="cff-pro-notice"><img src="<?php echo plugins_url( 'img/pro.png' , __FILE__ ) ?>" /></a>
2322
  <?php } //End Post Layout tab ?>
2323
  <?php if( $cff_active_tab == 'typography' ) { //Start Typography tab ?>
2324
 
@@ -2343,37 +2402,71 @@ function cff_style_page() {
2343
  <h3><?php _e('Post Item'); ?></h3>
2344
  <table class="form-table">
2345
  <tbody>
2346
- <tr valign="top">
2347
- <th class="bump-left" scope="row"><label><?php _e('Background Color'); ?></label><code class="cff_shortcode"> postbgcolor
2348
- Eg: postbgcolor=ff0000</code></th>
2349
- <td>
2350
- <input name="cff_post_bg_color" value="#<?php esc_attr_e( str_replace('#', '', $cff_post_bg_color) ); ?>" class="cff-colorpicker" />
2351
- </td>
2352
- </tr>
2353
- <tr valign="top">
2354
- <th class="bump-left" scope="row"><label><?php _e('Rounded Corner Size'); ?></label><code class="cff_shortcode"> postcorners
2355
- Eg: postcorners=10</code></th>
2356
- <td>
2357
- <input name="cff_post_rounded" type="text" value="<?php esc_attr_e( $cff_post_rounded ); ?>" size="3" /><span class="cff-pixel-label">px</span> <span><i style="color: #666; font-size: 11px; margin-left: 5px;">Eg. 5</i></span>
2358
- </td>
2359
- </tr>
2360
- <tr valign="top">
2361
- <th class="bump-left" scope="row"><label><?php _e('Separating Line Color'); ?></label><code class="cff_shortcode"> sepcolor
2362
- Eg: sepcolor=CFCFCF</code></th>
2363
- <td>
2364
- <input name="cff_sep_color" value="#<?php esc_attr_e( str_replace('#', '', $cff_sep_color) ); ?>" class="cff-colorpicker" />
2365
- <a class="cff-tooltip-link" href="JavaScript:void(0);" style="position: relative;"><?php _e("Why isn't the line showing?"); ?></a>
2366
- <p class="cff-tooltip cff-more-info"><?php _e("If you set a background color on your posts then the separating line is removed and a space is added between the posts instead. This then creates a 'boxed' style layout."); ?></p>
2367
- </td>
2368
- </tr>
2369
- <tr valign="top">
2370
- <th class="bump-left" scope="row"><label><?php _e('Separating Line Thickness'); ?></label><code class="cff_shortcode"> sepsize
2371
- Eg: sepsize=3</code></th>
2372
- <td>
2373
- <input name="cff_sep_size" type="text" value="<?php esc_attr_e( $cff_sep_size ); ?>" size="1" /><span class="cff-pixel-label">px</span> <i style="color: #666; font-size: 11px; margin-left: 5px;"><?php _e('Leave empty to hide'); ?></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2374
  </td>
2375
  </tr>
2376
- <tr id="author"><!-- Quick link --></tr>
2377
  </tbody>
2378
  </table>
2379
  <hr />
@@ -2805,6 +2898,31 @@ function cff_style_page() {
2805
  <h3><?php _e('Shared Link Boxes'); ?></h3>
2806
  <table class="form-table">
2807
  <tbody>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2808
  <tr>
2809
  <th class="bump-left"><label for="cff_link_title_format" class="bump-left"><?php _e('Link Title Format'); ?></label><code class="cff_shortcode"> linktitleformat
2810
  Eg: linktitleformat='h3'</code></th>
@@ -2850,6 +2968,33 @@ function cff_style_page() {
2850
  <input name="cff_link_title_color" value="#<?php esc_attr_e( str_replace('#', '', $cff_link_title_color) ); ?>" class="cff-colorpicker" />
2851
  </td>
2852
  </tr>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2853
  <tr>
2854
  <th class="bump-left"><label for="cff_link_url_color" class="bump-left"><?php _e('Link URL Color'); ?></label><code class="cff_shortcode"> linkurlcolor
2855
  Eg: linkurlcolor='999999'</code></th>
@@ -2858,36 +3003,50 @@ function cff_style_page() {
2858
  </td>
2859
  </tr>
2860
 
2861
- <tr valign="top">
2862
- <th class="bump-left" scope="row"><label class="bump-left"><?php _e('Maximum Link Description Length'); ?></label><code class="cff_shortcode"> desclength
2863
- Eg: desclength=150</code></th>
2864
- <td>
2865
- <input name="cff_body_length" type="text" value="<?php esc_attr_e( $cff_body_length_val ); ?>" size="4" /><span class="cff-pixel-label"><?php _e('Characters'); ?></span> <i style="color: #666; font-size: 11px; margin-left: 5px;"><?php _e('Eg. 200'); ?></i>
2866
- <a class="cff-tooltip-link" href="JavaScript:void(0);"><i class="fa fa-question-circle" aria-hidden="true"></i></a>
2867
- <p class="cff-tooltip cff-more-info"><?php _e("If the link description text exceeds this length then it will be truncated with an ellipsis. Leave empty to set no maximum length."); ?></p>
2868
- </td>
2869
- </tr>
2870
 
2871
  <tr>
2872
- <th class="bump-left"><label for="cff_link_bg_color" class="bump-left"><?php _e('Link Box Background Color'); ?></label><code class="cff_shortcode"> linkbgcolor
2873
- Eg: linkbgcolor='EEE'</code></th>
2874
- <td>
2875
- <input name="cff_link_bg_color" value="#<?php esc_attr_e( str_replace('#', '', $cff_link_bg_color) ); ?>" class="cff-colorpicker" />
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2876
  </td>
2877
  </tr>
2878
 
2879
  <tr>
2880
- <th class="bump-left"><label for="cff_link_border_color" class="bump-left"><?php _e('Link Box Border Color'); ?></label><code class="cff_shortcode"> linkbordercolor
2881
- Eg: linkbordercolor='CCC'</code></th>
2882
  <td>
2883
- <input name="cff_link_border_color" value="#<?php esc_attr_e( str_replace('#', '', $cff_link_border_color) ); ?>" class="cff-colorpicker" />
2884
  </td>
2885
  </tr>
2886
 
2887
- <tr>
2888
- <th class="bump-left"><label for="cff_disable_link_box" class="bump-left"><?php _e('Remove Background/Border'); ?></label><code class="cff_shortcode"> disablelinkbox
2889
- Eg: disablelinkbox=true</code></th>
2890
- <td><input type="checkbox" name="cff_disable_link_box" id="cff_disable_link_box" <?php if($cff_disable_link_box == true) echo 'checked="checked"' ?> /></td>
 
 
 
 
2891
  </tr>
2892
  <tr id="eventtitle"><!-- Quick link --></tr>
2893
  </tbody>
@@ -3214,7 +3373,7 @@ function cff_style_page() {
3214
  <hr />
3215
 
3216
  <h3><?php _e('Likes, Shares and Comments Box'); ?></h3>
3217
- <a href="https://smashballoon.com/custom-facebook-feed/" target="_blank">Upgrade to Pro to enable likes, shares and comments</a>
3218
  <p class="submit cff-expand-button">
3219
  <a href="javascript:void(0);" class="button"><b>+</b> Show Pro Options</a>
3220
  </p>
@@ -3293,7 +3452,7 @@ function cff_style_page() {
3293
  <?php submit_button(); ?>
3294
  </div>
3295
 
3296
- <a href="https://smashballoon.com/custom-facebook-feed/demo" target="_blank" class="cff-pro-notice"><img src="<?php echo plugins_url( 'img/pro.png' , __FILE__ ) ?>" /></a>
3297
 
3298
  <?php } //End Typography tab ?>
3299
  <?php if( $cff_active_tab == 'misc' ) { //Start Misc tab ?>
@@ -3315,7 +3474,7 @@ function cff_style_page() {
3315
  <tbody>
3316
  <tr valign="top">
3317
  <td style="padding-top: 0;">
3318
- <p style="padding-bottom: 10px;"><?php _e('Enter your own custom CSS in the box below', 'custom-facebook-feed'); ?> <i style="margin-left: 5px; font-size: 11px;"><a href="https://smashballoon.com/custom-facebook-feed/docs/snippets/" target="_blank"><?php _e('See some examples', 'custom-facebook-feed'); ?></a></i></p>
3319
  <textarea name="cff_custom_css" id="cff_custom_css" style="width: 70%;" rows="7"><?php echo esc_textarea( stripslashes($cff_custom_css), 'custom-facebook-feed' ); ?></textarea>
3320
  </td>
3321
  </tr>
@@ -3326,7 +3485,7 @@ function cff_style_page() {
3326
  <tbody>
3327
  <tr valign="top">
3328
  <td style="padding-top: 0;">
3329
- <p style="padding-bottom: 10px;"><?php _e('Enter your own custom JavaScript/jQuery in the box below', 'custom-facebook-feed'); ?> <i style="margin-left: 5px; font-size: 11px;"><a href="https://smashballoon.com/custom-facebook-feed/docs/snippets/" target="_blank"><?php _e('See some examples', 'custom-facebook-feed'); ?></a></i></p>
3330
  <textarea name="cff_custom_js" id="cff_custom_js" style="width: 70%;" rows="7"><?php echo esc_textarea( stripslashes($cff_custom_js), 'custom-facebook-feed' ); ?></textarea>
3331
  </td>
3332
  </tr>
@@ -3337,7 +3496,7 @@ function cff_style_page() {
3337
 
3338
  <hr />
3339
  <h3><?php _e('Media'); ?></h3>
3340
- <a href="https://smashballoon.com/custom-facebook-feed/" target="_blank">Upgrade to Pro to enable Media options</a>
3341
  <p class="submit cff-expand-button">
3342
  <a href="javascript:void(0);" class="button"><b>+</b> Show Pro Options</a>
3343
  </p>
@@ -3489,21 +3648,11 @@ function cff_style_page() {
3489
  <p class="cff-tooltip cff-more-info"><?php _e("The plugin includes some basic text and link styles which can be disabled by enabling this setting. Note that the styles used for the layout of the posts will still be applied.", 'custom-facebook-feed'); ?></p>
3490
  </td>
3491
  </tr>
3492
- <tr>
3493
- <th class="bump-left"><label class="bump-left"><?php _e("Clear Avatar Cache"); ?></label></th>
3494
- <td>
3495
- <input id="cff_clear_avatars" class="button-secondary" type="submit" value="<?php esc_attr_e( 'Clear Cache' ); ?>" />
3496
- <a class="cff-tooltip-link" href="JavaScript:void(0);" style="position: relative; top: 5px;"><i class="fa fa-question-circle" aria-hidden="true"></i></a>
3497
- <p class="cff-tooltip cff-more-info"><?php _e( 'The plugin will cache the avatars of people posting to your page for a prolonged period of time to avoid making frequent requests to Facebook. You can use this button to clear the avatar cache so that the plugin requests new avatars for all posts.', 'custom-facebook-feed' ); ?>.</p>
3498
-
3499
- </td>
3500
- </tr>
3501
-
3502
  </tbody>
3503
  </table>
3504
 
3505
  <?php submit_button(); ?>
3506
- <a href="https://smashballoon.com/custom-facebook-feed/demo" target="_blank" class="cff-pro-notice"><img src="<?php echo plugins_url( 'img/pro.png' , __FILE__ ) ?>" /></a>
3507
  <?php } //End Misc tab ?>
3508
 
3509
 
@@ -3649,7 +3798,7 @@ function cff_style_page() {
3649
  </table>
3650
 
3651
  <?php submit_button(); ?>
3652
- <a href="https://smashballoon.com/custom-facebook-feed/demo" target="_blank" class="cff-pro-notice"><img src="<?php echo plugins_url( 'img/pro.png' , __FILE__ ) ?>" /></a>
3653
  <?php } //End Custom Text tab ?>
3654
 
3655
  </form>
@@ -3657,34 +3806,7 @@ function cff_style_page() {
3657
  <div class="cff-share-plugin">
3658
  <h3><?php _e('Like the plugin? Help spread the word!', 'custom-facebook-feed'); ?></h3>
3659
 
3660
- <!-- TWITTER -->
3661
- <a href="https://twitter.com/share" class="twitter-share-button" data-url="https://wordpress.org/plugins/custom-facebook-feed/" data-text="Display your Facebook posts on your site your way using the Custom Facebook Feed WordPress plugin!" data-via="smashballoon" data-dnt="true">Tweet</a>
3662
- <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
3663
- <style type="text/css">
3664
- #twitter-widget-0{ float: left; width: 100px !important; }
3665
- .IN-widget{ margin-right: 20px; }
3666
- </style>
3667
-
3668
- <!-- FACEBOOK -->
3669
- <div id="fb-root" style="display: none;"></div>
3670
- <script>(function(d, s, id) {
3671
- var js, fjs = d.getElementsByTagName(s)[0];
3672
- if (d.getElementById(id)) return;
3673
- js = d.createElement(s); js.id = id;
3674
- js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&appId=&version=v2.0";
3675
- fjs.parentNode.insertBefore(js, fjs);
3676
- }(document, 'script', 'facebook-jssdk'));</script>
3677
- <div class="fb-like" data-href="https://wordpress.org/plugins/custom-facebook-feed/" data-layout="button_count" data-action="like" data-show-faces="false" data-share="true" style="display: block; float: left; margin-right: 20px;"></div>
3678
-
3679
- <!-- LINKEDIN -->
3680
- <script src="//platform.linkedin.com/in.js" type="text/javascript">
3681
- lang: en_US
3682
- </script>
3683
- <script type="IN/Share" data-url="https://wordpress.org/plugins/custom-facebook-feed/"></script>
3684
-
3685
- <!-- GOOGLE + -->
3686
- <script src="https://apis.google.com/js/platform.js" async defer></script>
3687
- <div class="g-plusone" data-size="medium" data-href="https://wordpress.org/plugins/custom-facebook-feed/"></div>
3688
  </div>
3689
 
3690
  <?php
@@ -3851,26 +3973,4 @@ if ( get_transient( $transient ) !== 'waiting' && $notice_status !== 'dismissed'
3851
  add_action( 'admin_notices', 'cff_rating_notice_html' );
3852
  }
3853
 
3854
- function cff_clear_avatar_cache() {
3855
- if ( current_user_can( 'edit_posts' ) ) {
3856
- global $wpdb;
3857
- $table_name = $wpdb->prefix . "options";
3858
- $result = $wpdb->query("
3859
- DELETE
3860
- FROM $table_name
3861
- WHERE `option_name` LIKE ('%\_transient\_fb\_avatar\_%')
3862
- " );
3863
- $wpdb->query( "
3864
- DELETE
3865
- FROM $table_name
3866
- WHERE `option_name` LIKE ('%\_transient\_timeout\_fb\_avatar\_%')
3867
- " );
3868
- return $result;
3869
- } else {
3870
- return false;
3871
- }
3872
- die();
3873
- }
3874
- add_action( 'wp_ajax_cff_clear_avatar_cache', 'cff_clear_avatar_cache' );
3875
-
3876
  ?>
168
  $pages_data = @file_get_contents($url);
169
  $pages_data_arr = json_decode($pages_data);
170
 
 
 
171
  if( empty($pages_data_arr->data) ){
172
  //If they don't manage any pages then just use the user token instead
173
  ?>
184
  <?php
185
  } else {
186
  //Show the pages they manage
187
+ echo '<div id="cff_fb_login_modal" class="cff_modal_tokens cffnomodal">';
188
+ echo '<div class="cff_modal_box">';
189
+ echo '<div class="cff-managed-pages">';
190
+
191
+ echo '<p style="margin-top: 0;"><i class="fa fa-check-circle" aria-hidden="true" style="font-size: 15px; margin: 0 8px 0 2px;"></i>Select a Facebook page below to get an Access Token.</p>';
192
+ echo '<p class="cff-tokens-note">Note: This Access Token will allow you to display posts from <b style="font-weight: 900;">any</b> public Facebook page, not just the one selected.</p>';
193
 
194
+ echo '<div class="cff-pages-wrap">';
195
  foreach ( $pages_data_arr->data as $page => $page_data ) {
196
  echo '<div class="cff-managed-page ';
197
  if( $page_data->id == $page_id_val ) echo 'cff-page-selected';
198
  echo '" data-token="'.$page_data->access_token.'" data-page-id="'.$page_data->id.'">';
199
+ echo '<p><img class="cff-page-avatar" border="0" height="50" width="50" src="https://graph.facebook.com/'.$page_data->id.'/picture"><b class="cff-page-info-name">'.$page_data->name.'</b><span class="cff-page-info">(Page ID: '.$page_data->id.')</span></p>';
200
  echo '</div>';
201
  }
202
+ echo '</div>';
203
+
204
+ $cff_use_token_text = 'Use token for this page';
205
+ echo '<a href="JavaScript:void(0);" id="cff-insert-token" class="button button-primary" disabled="disabled">'.$cff_use_token_text.'</a>';
206
+
207
+ echo '</div>';
208
+ echo '<a href="JavaScript:void(0);" class="cff-modal-close"><i class="fa fa-times"></i></a>';
209
+ echo '</div>';
210
+ echo '</div>';
211
 
212
+ echo '<a href="JavaScript:void(0);" class="cff_admin_btn" id="cff_fb_show_tokens"><i class="fa fa-th-list" aria-hidden="true" style="font-size: 14px; margin-right: 8px;"></i>';
213
+ _e( "Show Available Pages", "custom-facebook-feed" );
214
+ echo '</a>';
215
+
216
+ }
217
 
218
  }
219
  }
527
  <div class="cff_quickstart">
528
  <h3><i class="fa fa-rocket" aria-hidden="true"></i>&nbsp; Display your feed</h3>
529
  <p>Copy and paste this shortcode directly into the page, post or widget where you'd like to display the feed: <input type="text" value="[custom-facebook-feed]" size="22" readonly="readonly" style="text-align: center;" onclick="this.focus();this.select()" title="To copy, click the field then press Ctrl + C (PC) or Cmd + C (Mac)."></p>
530
+ <p>Find out how to display <a href="https://smashballoon.com/using-shortcode-options-customize-facebook-feeds/?utm_source=plugin-free&utm_campaign=cff" target="_blank"><b>multiple feeds</b></a>.</p>
531
  </div>
532
 
533
+ <a href="https://smashballoon.com/custom-facebook-feed/demo/?utm_source=plugin-free&utm_campaign=cff" target="_blank" class="cff-pro-notice"><img src="<?php echo plugins_url( 'img/pro.png' , __FILE__ ) ?>" /></a>
534
 
535
  <div class="cff-share-plugin">
536
  <h3><?php _e('Like the plugin? Help spread the word!', 'custom-facebook-feed'); ?></h3>
537
 
538
+ <button id="cff-admin-show-share-links" class="button secondary" style="margin-bottom: 1px;"><i class="fa fa-share-alt" aria-hidden="true"></i>&nbsp;&nbsp;Share the plugin</button> <div id="cff-admin-share-links"></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
539
  </div>
540
 
541
  <?php } //End config tab ?>
549
  <h3 style="padding-bottom: 10px;">Need help?</h3>
550
 
551
  <p>
552
+ <span class="cff-support-title"><i class="fa fa-life-ring" aria-hidden="true"></i>&nbsp; <a href="https://smashballoon.com/custom-facebook-feed/docs/free/?utm_source=plugin-free&utm_campaign=cff" target="_blank"><?php _e('Setup Directions'); ?></a></span>
553
  <?php _e('A step-by-step guide on how to setup and use the plugin.'); ?>
554
  </p>
555
 
556
  <p>
557
+ <span class="cff-support-title"><i class="fa fa-question-circle" aria-hidden="true"></i>&nbsp; <a href="https://smashballoon.com/custom-facebook-feed/faq/?utm_source=plugin-free&utm_campaign=cff" target="_blank"><?php _e('FAQs and Docs'); ?></a></span>
558
  <?php _e('View our expansive library of FAQs and documentation to help solve your problem as quickly as possible.'); ?>
559
  </p>
560
 
565
  <li>&bull;&nbsp; <?php _e('<a href="https://smashballoon.com/category/custom-facebook-feed/faq/?cat=18" target="_blank">General Questions</a>'); ?></li>
566
  <li>&bull;&nbsp; <?php _e('<a href="https://smashballoon.com/category/custom-facebook-feed/getting-started/?cat=18" target="_blank">Getting Started</a>'); ?></li>
567
  <li>&bull;&nbsp; <?php _e('<a href="https://smashballoon.com/category/custom-facebook-feed/troubleshooting/?cat=18" target="_blank">Common Issues</a>'); ?></li>
568
+ <li style="margin-top: 8px; font-size: 12px;"><a href="https://smashballoon.com/custom-facebook-feed/faq/?utm_source=plugin-free&utm_campaign=cff" target="_blank">See all<i class="fa fa-chevron-right" aria-hidden="true"></i></a></li>
569
  </ul>
570
 
571
  <ul>
573
  <li>&bull;&nbsp; <?php _e('<a href="http://smashballoon.com/custom-facebook-feed/docs/free/" target="_blank">Installation and Configuration</a>'); ?></li>
574
  <li>&bull;&nbsp; <?php _e('<a href="https://smashballoon.com/custom-facebook-feed/docs/shortcodes/" target="_blank">Shortcode Reference</a>', 'custom-facebook-feed'); ?></li>
575
  <li>&bull;&nbsp; <?php _e('<a href=https://smashballoon.com/category/custom-facebook-feed/customizations/snippets/?cat=18" target="_blank">Custom CSS and JavaScript Snippets</a>'); ?></li>
576
+ <li style="margin-top: 8px; font-size: 12px;"><a href="https://smashballoon.com/custom-facebook-feed/docs/?utm_source=plugin-free&utm_campaign=cff" target="_blank">See all<i class="fa fa-chevron-right" aria-hidden="true"></i></a></li>
577
  </ul>
578
  </div>
579
 
688
  echo "\n"; ?>
689
 
690
  ## STYLE POSTS: ##
691
+ Post Style => <?php echo $options[ 'cff_post_style' ] ."\n"; ?>
692
  Background Color => <?php echo $options[ 'cff_post_bg_color' ] ."\n"; ?>
693
  Rounded => <?php echo $options[ 'cff_post_rounded' ] ."\n"; ?>
694
  Seperator Color => <?php echo $options[ 'cff_sep_color' ] ."\n"; ?>
695
  Seperator Size => <?php echo $options[ 'cff_sep_size' ] ."\n"; ?>
696
+ Box Shadow => <?php echo $options[ 'cff_box_shadow' ] ."\n"; ?>
697
 
698
  ## POST AUTHOR: ##
699
  Text Size => <?php echo $options[ 'cff_author_size' ] ."\n"; ?>
727
  Text After Date => <?php echo $options['cff_date_after'] ."\n"; ?>
728
 
729
  ## SHARED LINK BOXES: ##
730
+ Link Box BG Color => <?php echo $options['cff_link_bg_color'] ."\n"; ?>
731
+ Link Box Border Color => <?php echo $options['cff_link_border_color'] ."\n"; ?>
732
+ Remove Background/Border => <?php echo $options['cff_disable_link_box'] ."\n"; ?>
733
  Link Title Format => <?php echo $options['cff_link_title_format'] ."\n"; ?>
734
+ Link Title Color => <?php echo $options['cff_link_title_color'] ."\n"; ?>
735
+ Link Title Size => <?php echo $options['cff_link_title_size'] ."\n"; ?>
736
+ Link URL Size => <?php echo $options['cff_link_url_size'] ."\n"; ?>
737
  Link URL Color => <?php echo $options['cff_link_url_color'] ."\n"; ?>
738
+ Link Description Size => <?php echo $options['cff_link_desc_size'] ."\n"; ?>
739
+ Link Description Color => <?php echo $options['cff_link_desc_color'] ."\n"; ?>
740
  Max Length => <?php echo get_option('cff_body_length') ."\n"; ?>
 
 
 
741
 
742
  ## EVENT TITLE: ##
743
  Format => <?php echo $options['cff_event_title_format'] ."\n"; ?>
867
  'cff_show_meta' => true,
868
  'cff_show_link' => true,
869
  'cff_show_like_box' => true,
870
+ //Post Style
871
+ 'cff_post_style' => '',
872
  'cff_post_bg_color' => '',
873
  'cff_post_rounded' => '0',
874
+ 'cff_box_shadow' => false,
875
  //Typography
876
  'cff_title_format' => 'p',
877
  'cff_title_size' => 'inherit',
883
  'cff_body_color' => '',
884
  'cff_link_title_format' => 'p',
885
  'cff_link_title_size' => 'inherit',
886
+ 'cff_link_url_size' => '12',
887
+ 'cff_link_desc_size' => 'inherit',
888
+ 'cff_link_desc_color' => '',
889
  'cff_link_title_color' => '',
890
  'cff_link_url_color' => '',
891
  'cff_link_bg_color' => '',
1051
  $cff_show_link = $options[ 'cff_show_link' ];
1052
  $cff_show_like_box = $options[ 'cff_show_like_box' ];
1053
  //Post Style
1054
+ $cff_post_style = $options[ 'cff_post_style' ];
1055
  $cff_post_bg_color = $options[ 'cff_post_bg_color' ];
1056
  $cff_post_rounded = $options[ 'cff_post_rounded' ];
1057
+ $cff_box_shadow = $options[ 'cff_box_shadow' ];
1058
 
1059
  //Typography
1060
  $cff_see_more_text = $options[ 'cff_see_more_text' ];
1069
  $cff_body_color = $options[ 'cff_body_color' ];
1070
  $cff_link_title_format = $options[ 'cff_link_title_format' ];
1071
  $cff_link_title_size = $options[ 'cff_link_title_size' ];
1072
+ $cff_link_url_size = $options[ 'cff_link_url_size' ];
1073
+ $cff_link_desc_size = $options[ 'cff_link_desc_size' ];
1074
+ $cff_link_desc_color = $options[ 'cff_link_desc_color' ];
1075
  $cff_link_title_color = $options[ 'cff_link_title_color' ];
1076
  $cff_link_url_color = $options[ 'cff_link_url_color' ];
1077
  $cff_link_bg_color = $options[ 'cff_link_bg_color' ];
1354
  if (isset($_POST[ 'cff_body_length' ]) ) $cff_body_length_val = sanitize_text_field( $_POST[ $cff_body_length ] );
1355
 
1356
  //Post Style
1357
+ if (isset($_POST[ 'cff_post_style' ]) ) $cff_post_style = $_POST[ 'cff_post_style' ];
1358
+ (isset($_POST[ 'cff_post_bg_color' ]) ) ? $cff_post_bg_color = $_POST[ 'cff_post_bg_color' ] : $cff_post_bg_color = '';
1359
+ (isset($_POST[ 'cff_post_rounded' ]) ) ? $cff_post_rounded = $_POST[ 'cff_post_rounded' ] : $cff_post_rounded = '';
1360
+ if (isset($_POST[ 'cff_sep_color' ])) $cff_sep_color = $_POST[ 'cff_sep_color' ];
1361
+ if (isset($_POST[ 'cff_sep_size' ])) $cff_sep_size = $_POST[ 'cff_sep_size' ];
1362
+ (isset($_POST[ 'cff_box_shadow' ]) ) ? $cff_box_shadow = $_POST[ 'cff_box_shadow' ] : $cff_box_shadow = '';
1363
 
1364
  //Author
1365
  if (isset($_POST[ 'cff_author_size' ])) $cff_author_size = sanitize_text_field( $_POST[ 'cff_author_size' ] );
1380
  if (isset($_POST[ 'cff_body_weight' ]) ) $cff_body_weight = sanitize_text_field( $_POST[ 'cff_body_weight' ] );
1381
  if (isset($_POST[ 'cff_body_color' ]) ) $cff_body_color = sanitize_text_field( $_POST[ 'cff_body_color' ] );
1382
  if (isset($_POST[ 'cff_link_title_format' ]) ) $cff_link_title_format = sanitize_text_field( $_POST[ 'cff_link_title_format' ] );
1383
+ if (isset($_POST[ 'cff_link_title_size' ]) ) $cff_link_title_size = $_POST[ 'cff_link_title_size' ];
1384
+ if (isset($_POST[ 'cff_link_url_size' ]) ) $cff_link_url_size = $_POST[ 'cff_link_url_size' ];
1385
+ if (isset($_POST[ 'cff_link_desc_size' ]) ) $cff_link_desc_size = $_POST[ 'cff_link_desc_size' ];
1386
+ if (isset($_POST[ 'cff_link_desc_color' ]) ) $cff_link_desc_color = $_POST[ 'cff_link_desc_color' ];
1387
+ if (isset($_POST[ 'cff_link_title_color' ]) ) $cff_link_title_color = $_POST[ 'cff_link_title_color' ];
1388
+ if (isset($_POST[ 'cff_link_url_color' ]) ) $cff_link_url_color = $_POST[ 'cff_link_url_color' ];
1389
+ if (isset($_POST[ 'cff_link_bg_color' ]) ) $cff_link_bg_color = $_POST[ 'cff_link_bg_color' ];
1390
+ if (isset($_POST[ 'cff_link_border_color' ]) ) $cff_link_border_color = $_POST[ 'cff_link_border_color' ];
1391
+ (isset($_POST[ 'cff_disable_link_box' ])) ? $cff_disable_link_box = $_POST[ 'cff_disable_link_box' ] : $cff_disable_link_box = '';
1392
 
1393
 
1394
  //Event title
1463
  $options[ 'cff_author_color' ] = $cff_author_color;
1464
 
1465
  //Post Style
1466
+ $options[ 'cff_post_style' ] = $cff_post_style;
1467
  $options[ 'cff_post_bg_color' ] = $cff_post_bg_color;
1468
  $options[ 'cff_post_rounded' ] = $cff_post_rounded;
1469
  $options[ 'cff_sep_color' ] = $cff_sep_color;
1470
  $options[ 'cff_sep_size' ] = $cff_sep_size;
1471
+ $options[ 'cff_box_shadow' ] = $cff_box_shadow;
1472
 
1473
  //Typography
1474
  $options[ 'cff_title_format' ] = $cff_title_format;
1484
  $options[ 'cff_body_color' ] = $cff_body_color;
1485
  $options[ 'cff_link_title_format' ] = $cff_link_title_format;
1486
  $options[ 'cff_link_title_size' ] = $cff_link_title_size;
1487
+ $options[ 'cff_link_url_size' ] = $cff_link_url_size;
1488
+ $options[ 'cff_link_desc_size' ] = $cff_link_desc_size;
1489
+ $options[ 'cff_link_desc_color' ] = $cff_link_desc_color;
1490
  $options[ 'cff_link_title_color' ] = $cff_link_title_color;
1491
  $options[ 'cff_link_url_color' ] = $cff_link_url_color;
1492
  $options[ 'cff_link_bg_color' ] = $cff_link_bg_color;
1796
  <h3><?php _e('Post Types', 'custom-facebook-feed'); ?></h3>
1797
  <tr valign="top">
1798
  <th scope="row"><?php _e('Only show these types of posts:', 'custom-facebook-feed'); ?><br />
1799
+ <i style="color: #666; font-size: 11px;"><a href="https://smashballoon.com/custom-facebook-feed/?utm_source=plugin-free&utm_campaign=cff" target="_blank"><?php _e('Upgrade to Pro to enable post types, photos, videos and more', 'custom-facebook-feed'); ?></a></i></th>
1800
  <td>
1801
  <div>
1802
  <input name="cff_show_status_type" type="checkbox" id="cff_show_status_type" disabled checked />
1856
  <td>
1857
  <input type="checkbox" name="cff_header_outside" id="cff_header_outside" <?php if($cff_header_outside == true) echo 'checked="checked"' ?> />&nbsp;<?php _e('Yes', 'custom-facebook-feed'); ?>
1858
  <a class="cff-tooltip-link" href="JavaScript:void(0);"><i class="fa fa-question-circle" aria-hidden="true"></i></a>
1859
+ <p class="cff-tooltip cff-more-info"><?php _e("This positions the Header outside of the feed container. It is useful if your feed has a vertical scrollbar as it places it outside of the scrollable area and fixes it at the top."); ?></p>
1860
  </td>
1861
  </tr>
1862
 
2068
  <hr />
2069
 
2070
  <h3><?php _e('"Load More" button'); ?></h3>
2071
+ <a href="https://smashballoon.com/custom-facebook-feed/?utm_source=plugin-free&utm_campaign=cff" target="_blank">Upgrade to Pro to enable the Load More button</a>
2072
  <p class="submit cff-expand-button">
2073
  <a href="javascript:void(0);" class="button"><b>+</b> Show Pro Options</a>
2074
  </p>
2111
 
2112
  <hr />
2113
 
2114
+ <h3><?php _e('Lightbox'); ?></h3>
2115
+ <a href="https://smashballoon.com/custom-facebook-feed/?utm_source=plugin-free&utm_campaign=cff" target="_blank">Upgrade to Pro to enable the Lightbox</a>
2116
+ <p class="submit cff-expand-button">
2117
+ <a href="javascript:void(0);" class="button"><b>+</b> Show Pro Options</a>
2118
+ </p>
2119
+ <table class="form-table cff-expandable-options">
2120
+ <tbody>
2121
+ <tr valign="top" class="cff-pro">
2122
+ <th class="bump-left" scope="row"><label><?php _e('Disable Popup Lightbox'); ?></label><code class="cff_shortcode"> disablelightbox
2123
+ Eg: disablelightbox=true</code></th>
2124
+ <td>
2125
+ <input name="cff_disable_lightbox" type="checkbox" id="cff_disable_lightbox" disabled />
2126
+ <label for="cff_disable_lightbox"><?php _e('Disable'); ?></label>
2127
+ </td>
2128
+ </tr>
2129
+ <tr valign="top" class="cff-pro">
2130
+ <th class="bump-left" scope="row"><label><?php _e('Background Color'); ?></label></th>
2131
+ <td>
2132
+ <input name="cff_lightbox_bg_color" type="text" class="cff-colorpicker" disabled />
2133
+ </td>
2134
+ </tr>
2135
+ <tr valign="top" class="cff-pro">
2136
+ <th class="bump-left" scope="row"><label><?php _e('Text Color'); ?></label></th>
2137
+ <td>
2138
+ <input name="cff_lightbox_text_color" type="text" class="cff-colorpicker" disabled />
2139
+ </td>
2140
+ </tr>
2141
+ <tr valign="top" class="cff-pro">
2142
+ <th class="bump-left" scope="row"><label><?php _e('Link Color'); ?></label></th>
2143
+ <td>
2144
+ <input name="cff_lightbox_link_color" type="text" class="cff-colorpicker" disabled />
2145
+ </td>
2146
+ </tr>
2147
+ <tr valign="top" class="cff-pro">
2148
+ <th class="bump-left" scope="row"><label><?php _e('Show Comments in Lightbox'); ?></label><code class="cff_shortcode"> lightboxcomments
2149
+ Eg: lightboxcomments=true</code></th>
2150
+ <td>
2151
+ <input type="checkbox" name="cff_lightbox_comments" id="cff_lightbox_comments" disabled/>
2152
+ <span><i style="color: #666; font-size: 11px; margin-left: 5px;"><?php _e('For timeline posts only'); ?></i></span>
2153
+ </td>
2154
+ </tr>
2155
+ </tbody>
2156
+ </table>
2157
+
2158
+ <hr />
2159
+
2160
  <h3><?php _e('Filter Content by String'); ?></h3>
2161
+ <a href="https://smashballoon.com/custom-facebook-feed/?utm_source=plugin-free&utm_campaign=cff" target="_blank">Upgrade to Pro to enable Filtering</a>
2162
  <p class="submit cff-expand-button">
2163
  <a href="javascript:void(0);" class="button"><b>+</b> Show Pro Options</a>
2164
  </p>
2197
  </div>
2198
 
2199
 
2200
+ <a href="https://smashballoon.com/custom-facebook-feed/demo/?utm_source=plugin-free&utm_campaign=cff" target="_blank" class="cff-pro-notice"><img src="<?php echo plugins_url( 'img/pro.png' , __FILE__ ) ?>" /></a>
2201
 
2202
  <?php } //End General tab ?>
2203
  <?php if( $cff_active_tab == 'post_layout' ) { //Start Post Layout tab ?>
2210
  <input type="hidden" name="<?php echo $style_post_layout_hidden_field_name; ?>" value="Y">
2211
  <br />
2212
  <h3><?php _e('Post Layouts', 'custom-facebook-feed'); ?></h3>
2213
+ <a href="https://smashballoon.com/custom-facebook-feed/?utm_source=plugin-free&utm_campaign=cff" target="_blank"><?php _e('Upgrade to Pro to enable layouts', 'custom-facebook-feed'); ?></a>
2214
  <p class="submit cff-expand-button">
2215
  <a href="javascript:void(0);" class="button"><b>+</b> Show Pro Options</a>
2216
  </p>
2377
  </table>
2378
 
2379
  <?php submit_button(); ?>
2380
+ <a href="https://smashballoon.com/custom-facebook-feed/demo/?utm_source=plugin-free&utm_campaign=cff" target="_blank" class="cff-pro-notice"><img src="<?php echo plugins_url( 'img/pro.png' , __FILE__ ) ?>" /></a>
2381
  <?php } //End Post Layout tab ?>
2382
  <?php if( $cff_active_tab == 'typography' ) { //Start Typography tab ?>
2383
 
2402
  <h3><?php _e('Post Item'); ?></h3>
2403
  <table class="form-table">
2404
  <tbody>
2405
+ <tr>
2406
+ <th class="bump-left" scope="row"><label><?php _e('Post Style'); ?></label><code class="cff_shortcode"> poststyle
2407
+ Eg: poststyle=regular/boxed</code></th>
2408
+ <td>
2409
+ <?php
2410
+ //If a post style isn't set (eg on initial update) then set it to be regular unless a bgcolor is set
2411
+ if( $cff_post_style == '' || empty($cff_post_style) ){
2412
+ $cff_post_style = 'regular';
2413
+ if( strlen($cff_post_bg_color) > 1 ) $cff_post_style = 'boxed';
2414
+ }
2415
+
2416
+ ?>
2417
+ <div class="cff-layouts">
2418
+ <div class="cff-post-style cff-layout <?php if($cff_post_style == "regular") echo "cff-layout-selected"; ?>">
2419
+ <h3><input type="radio" name="cff_post_style" id="cff_post_style" class="cff_post_style" value="regular" <?php if($cff_post_style == "regular") echo "checked"; ?> />&nbsp;<?php _e('Regular'); ?></h3>
2420
+ <img src="<?php echo plugins_url( 'img/post-style.png' , __FILE__ ) ?>" alt="Regular Post Style" />
2421
+ <img src="<?php echo plugins_url( 'img/post-style.png' , __FILE__ ) ?>" alt="Regular Post Style" />
2422
+ </div>
2423
+
2424
+ <div class="cff-post-style cff-boxed cff-layout <?php if($cff_post_style == "boxed") echo "cff-layout-selected"; ?>">
2425
+ <h3><input type="radio" name="cff_post_style" id="cff_post_style" class="cff_post_style" value="boxed" <?php if($cff_post_style == "boxed") echo "checked"; ?> />&nbsp;<?php _e('Boxed'); ?></h3>
2426
+ <img src="<?php echo plugins_url( 'img/post-style.png' , __FILE__ ) ?>" alt="Box Post Style" style="margin-top: -2px;" />
2427
+ <img src="<?php echo plugins_url( 'img/post-style.png' , __FILE__ ) ?>" alt="Box Post Style" style="margin-top: 2px;" />
2428
+ </div>
2429
+
2430
+ <div class="cff-post-style-settings cff-regular">
2431
+
2432
+ <div class="cff-row">
2433
+ <label><?php _e('Separating Line Color'); ?></label><code class="cff_shortcode"> sepcolor
2434
+ Eg: sepcolor=CFCFCF</code>
2435
+ <br />
2436
+ <input name="cff_sep_color" value="#<?php esc_attr_e( str_replace('#', '', $cff_sep_color) ); ?>" class="cff-colorpicker" />
2437
+ </div>
2438
+ <div class="cff-row">
2439
+ <label><?php _e('Separating Line Thickness'); ?></label><code class="cff_shortcode"> sepsize
2440
+ Eg: sepsize=3</code>
2441
+ <br />
2442
+ <input name="cff_sep_size" type="text" value="<?php esc_attr_e( $cff_sep_size ); ?>" size="1" /><span class="cff-pixel-label">px</span> <i style="color: #666; font-size: 11px; margin-left: 5px;"><?php _e('Leave empty to hide'); ?></i>
2443
+ </div>
2444
+ </div>
2445
+
2446
+ <div class="cff-post-style-settings cff-boxed">
2447
+ <div class="cff-row">
2448
+ <label><?php _e('Background Color'); ?></label><code class="cff_shortcode"> postbgcolor
2449
+ Eg: postbgcolor=ff0000</code>
2450
+ <br />
2451
+ <input name="cff_post_bg_color" value="#<?php esc_attr_e( str_replace('#', '', $cff_post_bg_color) ); ?>" class="cff-colorpicker" />
2452
+ </div>
2453
+ <div class="cff-row">
2454
+ <label><?php _e('Rounded Corner Size'); ?></label><code class="cff_shortcode"> postcorners
2455
+ Eg: postcorners=10</code>
2456
+ <br />
2457
+ <input name="cff_post_rounded" type="text" value="<?php esc_attr_e( $cff_post_rounded ); ?>" size="3" /><span class="cff-pixel-label">px</span> <span><i style="color: #666; font-size: 11px; margin-left: 5px;">Eg. 5</i></span>
2458
+ </div>
2459
+ <div class="cff-row">
2460
+ <label><?php _e('Box Shadow'); ?></label><code class="cff_shortcode"> boxshadow
2461
+ Eg: boxshadow=true</code>
2462
+ <br />
2463
+ <input type="checkbox" name="cff_box_shadow" id="cff_box_shadow" <?php if($cff_box_shadow == true) echo 'checked="checked"' ?> /> <i style="color: #666; font-size: 11px; margin-left: 5px;"><?php _e('Adds a subtle shadow around the post'); ?></i>
2464
+ </div>
2465
+ </div>
2466
+
2467
+ </div>
2468
  </td>
2469
  </tr>
 
2470
  </tbody>
2471
  </table>
2472
  <hr />
2898
  <h3><?php _e('Shared Link Boxes'); ?></h3>
2899
  <table class="form-table">
2900
  <tbody>
2901
+
2902
+ <tr class="cff-settings-row-header"><th>Box Style</th></tr>
2903
+ <tr>
2904
+ <th class="bump-left"><label for="cff_link_bg_color" class="bump-left"><?php _e('Link Box Background Color'); ?></label><code class="cff_shortcode"> linkbgcolor
2905
+ Eg: linkbgcolor='EEE'</code></th>
2906
+ <td>
2907
+ <input name="cff_link_bg_color" value="#<?php esc_attr_e( str_replace('#', '', $cff_link_bg_color) ); ?>" class="cff-colorpicker" />
2908
+ </td>
2909
+ </tr>
2910
+
2911
+ <tr>
2912
+ <th class="bump-left"><label for="cff_link_border_color" class="bump-left"><?php _e('Link Box Border Color'); ?></label><code class="cff_shortcode"> linkbordercolor
2913
+ Eg: linkbordercolor='CCC'</code></th>
2914
+ <td>
2915
+ <input name="cff_link_border_color" value="#<?php esc_attr_e( str_replace('#', '', $cff_link_border_color) ); ?>" class="cff-colorpicker" />
2916
+ </td>
2917
+ </tr>
2918
+
2919
+ <tr>
2920
+ <th class="bump-left"><label for="cff_disable_link_box" class="bump-left"><?php _e('Remove Background/Border'); ?></label><code class="cff_shortcode"> disablelinkbox
2921
+ Eg: disablelinkbox=true</code></th>
2922
+ <td><input type="checkbox" name="cff_disable_link_box" id="cff_disable_link_box" <?php if($cff_disable_link_box == true) echo 'checked="checked"' ?> /></td>
2923
+ </tr>
2924
+
2925
+ <tr class="cff-settings-row-header"><th>Link Title</th></tr>
2926
  <tr>
2927
  <th class="bump-left"><label for="cff_link_title_format" class="bump-left"><?php _e('Link Title Format'); ?></label><code class="cff_shortcode"> linktitleformat
2928
  Eg: linktitleformat='h3'</code></th>
2968
  <input name="cff_link_title_color" value="#<?php esc_attr_e( str_replace('#', '', $cff_link_title_color) ); ?>" class="cff-colorpicker" />
2969
  </td>
2970
  </tr>
2971
+
2972
+ <tr class="cff-settings-row-header"><th>Link URL</th></tr>
2973
+ <tr>
2974
+ <th class="bump-left"><label for="cff_link_url_size" class="bump-left"><?php _e('Link URL Size'); ?></label><code class="cff_shortcode"> linkurlsize
2975
+ Eg: linkurlsize='12'</code></th>
2976
+ <td>
2977
+ <select name="cff_link_url_size" class="cff-text-size-setting">
2978
+ <option value="inherit" <?php if($cff_link_url_size == "inherit") echo 'selected="selected"' ?> >Inherit from theme</option>
2979
+ <option value="10" <?php if($cff_link_url_size == "10") echo 'selected="selected"' ?> >10px</option>
2980
+ <option value="11" <?php if($cff_link_url_size == "11") echo 'selected="selected"' ?> >11px</option>
2981
+ <option value="12" <?php if($cff_link_url_size == "12") echo 'selected="selected"' ?> >12px</option>
2982
+ <option value="13" <?php if($cff_link_url_size == "13") echo 'selected="selected"' ?> >13px</option>
2983
+ <option value="14" <?php if($cff_link_url_size == "14") echo 'selected="selected"' ?> >14px</option>
2984
+ <option value="16" <?php if($cff_link_url_size == "16") echo 'selected="selected"' ?> >16px</option>
2985
+ <option value="18" <?php if($cff_link_url_size == "18") echo 'selected="selected"' ?> >18px</option>
2986
+ <option value="20" <?php if($cff_link_url_size == "20") echo 'selected="selected"' ?> >20px</option>
2987
+ <option value="24" <?php if($cff_link_url_size == "24") echo 'selected="selected"' ?> >24px</option>
2988
+ <option value="28" <?php if($cff_link_url_size == "28") echo 'selected="selected"' ?> >28px</option>
2989
+ <option value="32" <?php if($cff_link_url_size == "32") echo 'selected="selected"' ?> >32px</option>
2990
+ <option value="36" <?php if($cff_link_url_size == "36") echo 'selected="selected"' ?> >36px</option>
2991
+ <option value="42" <?php if($cff_link_url_size == "42") echo 'selected="selected"' ?> >42px</option>
2992
+ <option value="48" <?php if($cff_link_url_size == "48") echo 'selected="selected"' ?> >48px</option>
2993
+ <option value="54" <?php if($cff_link_url_size == "54") echo 'selected="selected"' ?> >54px</option>
2994
+ <option value="60" <?php if($cff_link_url_size == "60") echo 'selected="selected"' ?> >60px</option>
2995
+ </select>
2996
+ </td>
2997
+ </tr>
2998
  <tr>
2999
  <th class="bump-left"><label for="cff_link_url_color" class="bump-left"><?php _e('Link URL Color'); ?></label><code class="cff_shortcode"> linkurlcolor
3000
  Eg: linkurlcolor='999999'</code></th>
3003
  </td>
3004
  </tr>
3005
 
3006
+ <tr class="cff-settings-row-header"><th>Link Description</th></tr>
 
 
 
 
 
 
 
 
3007
 
3008
  <tr>
3009
+ <th class="bump-left"><label for="cff_link_desc_size" class="bump-left"><?php _e('Link Description Size'); ?></label><code class="cff_shortcode"> linkdescsize
3010
+ Eg: linkdescsize='14'</code></th>
3011
+ <td>
3012
+ <select name="cff_link_desc_size" class="cff-text-size-setting">
3013
+ <option value="inherit" <?php if($cff_link_desc_size == "inherit") echo 'selected="selected"' ?> >Inherit from theme</option>
3014
+ <option value="10" <?php if($cff_link_desc_size == "10") echo 'selected="selected"' ?> >10px</option>
3015
+ <option value="11" <?php if($cff_link_desc_size == "11") echo 'selected="selected"' ?> >11px</option>
3016
+ <option value="12" <?php if($cff_link_desc_size == "12") echo 'selected="selected"' ?> >12px</option>
3017
+ <option value="13" <?php if($cff_link_desc_size == "13") echo 'selected="selected"' ?> >13px</option>
3018
+ <option value="14" <?php if($cff_link_desc_size == "14") echo 'selected="selected"' ?> >14px</option>
3019
+ <option value="16" <?php if($cff_link_desc_size == "16") echo 'selected="selected"' ?> >16px</option>
3020
+ <option value="18" <?php if($cff_link_desc_size == "18") echo 'selected="selected"' ?> >18px</option>
3021
+ <option value="20" <?php if($cff_link_desc_size == "20") echo 'selected="selected"' ?> >20px</option>
3022
+ <option value="24" <?php if($cff_link_desc_size == "24") echo 'selected="selected"' ?> >24px</option>
3023
+ <option value="28" <?php if($cff_link_desc_size == "28") echo 'selected="selected"' ?> >28px</option>
3024
+ <option value="32" <?php if($cff_link_desc_size == "32") echo 'selected="selected"' ?> >32px</option>
3025
+ <option value="36" <?php if($cff_link_desc_size == "36") echo 'selected="selected"' ?> >36px</option>
3026
+ <option value="42" <?php if($cff_link_desc_size == "42") echo 'selected="selected"' ?> >42px</option>
3027
+ <option value="48" <?php if($cff_link_desc_size == "48") echo 'selected="selected"' ?> >48px</option>
3028
+ <option value="54" <?php if($cff_link_desc_size == "54") echo 'selected="selected"' ?> >54px</option>
3029
+ <option value="60" <?php if($cff_link_desc_size == "60") echo 'selected="selected"' ?> >60px</option>
3030
+ </select>
3031
  </td>
3032
  </tr>
3033
 
3034
  <tr>
3035
+ <th class="bump-left"><label for="cff_link_desc_color" class="bump-left"><?php _e('Link Description Color'); ?></label><code class="cff_shortcode"> linkdesccolor
3036
+ Eg: linkdesccolor='ff0000'</code></th>
3037
  <td>
3038
+ <input name="cff_link_desc_color" value="#<?php esc_attr_e( str_replace('#', '', $cff_link_desc_color) ); ?>" class="cff-colorpicker" />
3039
  </td>
3040
  </tr>
3041
 
3042
+ <tr valign="top">
3043
+ <th class="bump-left" scope="row"><label class="bump-left"><?php _e('Maximum Link Description Length'); ?></label><code class="cff_shortcode"> desclength
3044
+ Eg: desclength=150</code></th>
3045
+ <td>
3046
+ <input name="cff_body_length" type="text" value="<?php esc_attr_e( $cff_body_length_val ); ?>" size="4" /><span class="cff-pixel-label"><?php _e('Characters'); ?></span> <i style="color: #666; font-size: 11px; margin-left: 5px;"><?php _e('Eg. 200'); ?></i>
3047
+ <a class="cff-tooltip-link" href="JavaScript:void(0);"><i class="fa fa-question-circle" aria-hidden="true"></i></a>
3048
+ <p class="cff-tooltip cff-more-info"><?php _e("If the link description text exceeds this length then it will be truncated with an ellipsis. Leave empty to set no maximum length."); ?></p>
3049
+ </td>
3050
  </tr>
3051
  <tr id="eventtitle"><!-- Quick link --></tr>
3052
  </tbody>
3373
  <hr />
3374
 
3375
  <h3><?php _e('Likes, Shares and Comments Box'); ?></h3>
3376
+ <a href="https://smashballoon.com/custom-facebook-feed/?utm_source=plugin-free&utm_campaign=cff" target="_blank">Upgrade to Pro to enable likes, shares and comments</a>
3377
  <p class="submit cff-expand-button">
3378
  <a href="javascript:void(0);" class="button"><b>+</b> Show Pro Options</a>
3379
  </p>
3452
  <?php submit_button(); ?>
3453
  </div>
3454
 
3455
+ <a href="https://smashballoon.com/custom-facebook-feed/demo/?utm_source=plugin-free&utm_campaign=cff" target="_blank" class="cff-pro-notice"><img src="<?php echo plugins_url( 'img/pro.png' , __FILE__ ) ?>" /></a>
3456
 
3457
  <?php } //End Typography tab ?>
3458
  <?php if( $cff_active_tab == 'misc' ) { //Start Misc tab ?>
3474
  <tbody>
3475
  <tr valign="top">
3476
  <td style="padding-top: 0;">
3477
+ <p style="padding-bottom: 10px;"><?php _e('Enter your own custom CSS in the box below', 'custom-facebook-feed'); ?> <i style="margin-left: 5px; font-size: 11px;"><a href="https://smashballoon.com/category/custom-facebook-feed/customizations/snippets/?cat=18" target="_blank"><?php _e('See some examples', 'custom-facebook-feed'); ?></a></i></p>
3478
  <textarea name="cff_custom_css" id="cff_custom_css" style="width: 70%;" rows="7"><?php echo esc_textarea( stripslashes($cff_custom_css), 'custom-facebook-feed' ); ?></textarea>
3479
  </td>
3480
  </tr>
3485
  <tbody>
3486
  <tr valign="top">
3487
  <td style="padding-top: 0;">
3488
+ <p style="padding-bottom: 10px;"><?php _e('Enter your own custom JavaScript/jQuery in the box below', 'custom-facebook-feed'); ?> <i style="margin-left: 5px; font-size: 11px;"><a href="https://smashballoon.com/category/custom-facebook-feed/customizations/snippets/?cat=18" target="_blank"><?php _e('See some examples', 'custom-facebook-feed'); ?></a></i></p>
3489
  <textarea name="cff_custom_js" id="cff_custom_js" style="width: 70%;" rows="7"><?php echo esc_textarea( stripslashes($cff_custom_js), 'custom-facebook-feed' ); ?></textarea>
3490
  </td>
3491
  </tr>
3496
 
3497
  <hr />
3498
  <h3><?php _e('Media'); ?></h3>
3499
+ <a href="https://smashballoon.com/custom-facebook-feed/?utm_source=plugin-free&utm_campaign=cff" target="_blank">Upgrade to Pro to enable Media options</a>
3500
  <p class="submit cff-expand-button">
3501
  <a href="javascript:void(0);" class="button"><b>+</b> Show Pro Options</a>
3502
  </p>
3648
  <p class="cff-tooltip cff-more-info"><?php _e("The plugin includes some basic text and link styles which can be disabled by enabling this setting. Note that the styles used for the layout of the posts will still be applied.", 'custom-facebook-feed'); ?></p>
3649
  </td>
3650
  </tr>
 
 
 
 
 
 
 
 
 
 
3651
  </tbody>
3652
  </table>
3653
 
3654
  <?php submit_button(); ?>
3655
+ <a href="https://smashballoon.com/custom-facebook-feed/demo/?utm_source=plugin-free&utm_campaign=cff" target="_blank" class="cff-pro-notice"><img src="<?php echo plugins_url( 'img/pro.png' , __FILE__ ) ?>" /></a>
3656
  <?php } //End Misc tab ?>
3657
 
3658
 
3798
  </table>
3799
 
3800
  <?php submit_button(); ?>
3801
+ <a href="https://smashballoon.com/custom-facebook-feed/demo/?utm_source=plugin-free&utm_campaign=cff" target="_blank" class="cff-pro-notice"><img src="<?php echo plugins_url( 'img/pro.png' , __FILE__ ) ?>" /></a>
3802
  <?php } //End Custom Text tab ?>
3803
 
3804
  </form>
3806
  <div class="cff-share-plugin">
3807
  <h3><?php _e('Like the plugin? Help spread the word!', 'custom-facebook-feed'); ?></h3>
3808
 
3809
+ <button id="cff-admin-show-share-links" class="button secondary" style="margin-bottom: 1px;"><i class="fa fa-share-alt" aria-hidden="true"></i>&nbsp;&nbsp;Share the plugin</button> <div id="cff-admin-share-links"></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
3810
  </div>
3811
 
3812
  <?php
3973
  add_action( 'admin_notices', 'cff_rating_notice_html' );
3974
  }
3975
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
3976
  ?>
custom-facebook-feed.php CHANGED
@@ -3,14 +3,14 @@
3
  Plugin Name: Custom Facebook Feed
4
  Plugin URI: http://smashballoon.com/custom-facebook-feed
5
  Description: Add completely customizable Facebook feeds to your WordPress site
6
- Version: 2.8
7
  Author: Smash Balloon
8
  Author URI: http://smashballoon.com/
9
  License: GPLv2 or later
10
  Text Domain: custom-facebook-feed
11
  */
12
  /*
13
- Copyright 2018 Smash Balloon LLC (email : hey@smashballoon.com)
14
  This program is free software; you can redistribute it and/or modify
15
  it under the terms of the GNU General Public License as published by
16
  the Free Software Foundation; either version 2 of the License, or
@@ -24,7 +24,7 @@ along with this program; if not, write to the Free Software
24
  Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA
25
  */
26
 
27
- define('CFFVER', '2.8');
28
 
29
  if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
30
  //Include admin
@@ -83,8 +83,10 @@ function display_cff($atts) {
83
  'include' => $include_string,
84
  'exclude' => '',
85
  //Post Style
 
86
  'postbgcolor' => isset($options[ 'cff_post_bg_color' ]) ? $options[ 'cff_post_bg_color' ] : '',
87
  'postcorners' => isset($options[ 'cff_post_rounded' ]) ? $options[ 'cff_post_rounded' ] : '',
 
88
 
89
  //Typography
90
  'textformat' => isset($options[ 'cff_title_format' ]) ? $options[ 'cff_title_format' ] : '',
@@ -102,6 +104,9 @@ function display_cff($atts) {
102
  'desccolor' => isset($options[ 'cff_body_color' ]) ? $options[ 'cff_body_color' ] : '',
103
  'linktitleformat' => isset($options[ 'cff_link_title_format' ]) ? $options[ 'cff_link_title_format' ] : '',
104
  'linktitlesize' => isset($options[ 'cff_link_title_size' ]) ? $options[ 'cff_link_title_size' ] : '',
 
 
 
105
  'linktitlecolor' => isset($options[ 'cff_link_title_color' ]) ? $options[ 'cff_link_title_color' ] : '',
106
  'linkurlcolor' => isset($options[ 'cff_link_url_color' ]) ? $options[ 'cff_link_url_color' ] : '',
107
  'linkbgcolor' => isset($options[ 'cff_link_bg_color' ]) ? $options[ 'cff_link_bg_color' ] : '',
@@ -399,12 +404,20 @@ function display_cff($atts) {
399
  $cff_link_title_styles = '';
400
  if ( !empty($cff_link_title_size) && $cff_link_title_size != 'inherit' ) $cff_link_title_styles = 'style="font-size:' . $cff_link_title_size . 'px;"';
401
 
 
 
 
 
 
 
 
 
402
  //Shared link box
403
  $cff_link_bg_color = $atts[ 'linkbgcolor' ];
404
  $cff_link_border_color = $atts[ 'linkbordercolor' ];
405
  $cff_disable_link_box = $atts['disablelinkbox'];
406
  ($cff_disable_link_box == 'true' || $cff_disable_link_box == 'on') ? $cff_disable_link_box = true : $cff_disable_link_box = false;
407
-
408
  $cff_link_box_styles = '';
409
  if( !empty($cff_link_border_color) || (!empty($cff_link_bg_color) && $cff_link_bg_color !== '#') ) $cff_link_box_styles = 'style="';
410
  if ( !empty($cff_link_border_color) ) $cff_link_box_styles .= 'border: 1px solid #' . str_replace('#', '', $cff_link_border_color) . '; ';
@@ -613,32 +626,42 @@ function display_cff($atts) {
613
 
614
  //Action
615
  $cff_video_action = $atts[ 'videoaction' ];
 
 
 
 
 
 
 
 
 
 
 
616
  //Separating Line
617
  $cff_sep_color = $atts[ 'sepcolor' ];
618
  if (empty($cff_sep_color)) $cff_sep_color = 'ddd';
619
  $cff_sep_size = $atts[ 'sepsize' ];
 
620
  //If empty then set a 0px border
621
  if ( empty($cff_sep_size) || $cff_sep_size == '' ) {
622
  $cff_sep_size = 0;
623
  //Need to set a color otherwise the CSS is invalid
624
  $cff_sep_color = 'fff';
 
625
  }
626
-
627
- $cff_post_bg_color = str_replace('#', '', $atts['postbgcolor']);
628
- $cff_post_rounded = $atts['postcorners'];
629
-
630
- ($cff_post_bg_color !== '#' && $cff_post_bg_color !== '') ? $cff_post_bg_color_check = true : $cff_post_bg_color_check = false;
631
  ($cff_sep_color !== '#' && $cff_sep_color !== '') ? $cff_sep_color_check = true : $cff_sep_color_check = false;
632
-
633
- $cff_item_styles = '';
634
  //CFF item styles
635
- if( $cff_sep_color_check || $cff_post_bg_color_check ){
 
636
  $cff_item_styles = 'style="';
637
- if($cff_sep_color_check && !$cff_post_bg_color_check) $cff_item_styles .= 'border-bottom: ' . $cff_sep_size . 'px solid #' . str_replace('#', '', $cff_sep_color) . '; ';
638
  if($cff_post_bg_color_check) $cff_item_styles .= 'background-color: #' . $cff_post_bg_color . '; ';
639
- if(isset($cff_post_rounded) && $cff_post_rounded !== '0') $cff_item_styles .= '-webkit-border-radius: ' . $cff_post_rounded . 'px; -moz-border-radius: ' . $cff_post_rounded . 'px; border-radius: ' . $cff_post_rounded . 'px; ';
640
  $cff_item_styles .= '"';
641
  }
 
 
 
642
 
643
  //Text limits
644
  $title_limit = $atts['textlength'];
@@ -674,31 +697,7 @@ function display_cff($atts) {
674
  get_option('cff_show_access_token') ? $cff_show_access_token = true : $cff_show_access_token = false;
675
 
676
  //If there's no Access Token then use a default
677
- $access_token_array = array(
678
- '1042396375891598|gn2HiZgDgjTbCMcXsSb6VK91PqM',
679
- '348613608818294|d4gRX7tNppCrI-DrOGof_O8gwvg',
680
- '1591407604237466|cHUFs9XDDJa7LDUW9zBxirwGAHE',
681
- '697312047120344|p8ST5dkrub6IoBZsClmyRBTScB0',
682
- '1024245627652108|VmyBFUaBhjmvF31kPWdLcwtA0nU',
683
- '1665626540320930|kDmIPfF8Y0mvV5mPr3927c2nRlM',
684
- '219254908466738|9AAaE_5GnONhVWUTlEBS8LDiFi8',
685
- '383334425112756|cxkb0YngoQPVkr7AngA_LOE2TV8',
686
- '1711513059125773|IuTAeRQAzhUelndJ_n7jPx3yOxs',
687
- '1425047524403499|shKbcYtt0KmDzOG5n9hkuVmP1bA',
688
- '1677248395890039|CSZsE5C-HJ8cYOraU6J6gwACZys',
689
- '162288250832230|HvQ8grGeT3QGVEFgRkooK-V55vs',
690
- '1816228771930249|xW0dj0nD-gWTl9oUEFyz7kCn4Gk',
691
- '451848331655448|YnHljWJNCMRxlo5JwAQRukxqQj0',
692
- '198080700214649|natEgdD5R82UoiLXL5UsUK82-O8',
693
- '452046251639377|sruLhZT7bktRpuPy0txclkvCMWE',
694
- '282581258595802|QRueniLvr6ppOBW9UcNpJVswGKw',
695
- '120755681588984|8IamCzI5D56psRs_726PwSgUgos',
696
- '236542103198412|YZBFLCWsx_ap_c2rmznf_tEbh6E',
697
- '444110102425340|1xyyWHpqzWy5jNrMnNAsMgIIKVI',
698
- '334097170130531|fpcajp_H4f79HoAP2j5Ryo_0OKE'
699
- );
700
-
701
- if ($access_token == '' || !$cff_show_access_token) $access_token = $access_token_array[rand(0, 20)];
702
 
703
  //Check whether a Page ID has been defined
704
  if ($page_id == '') {
@@ -779,16 +778,31 @@ function display_cff($atts) {
779
  $cff_likebox_width = $atts[ 'likeboxwidth' ];
780
  if ( !isset($cff_likebox_width) || empty($cff_likebox_width) || $cff_likebox_width == '' ) $cff_likebox_width = 300;
781
 
782
- //Set like box variable
783
- isset( $options[ 'cff_app_id' ] ) && !empty( $options[ 'cff_app_id' ] ) ? $cff_app_id = $options[ 'cff_app_id' ] : $cff_app_id = '';
784
- $cff_like_box_params = '&appId=' .$cff_app_id;
785
- $like_box = '<div class="cff-likebox';
 
 
 
 
786
  if ($cff_like_box_outside) $like_box .= ' cff-outside';
787
  $like_box .= ($cff_like_box_position == 'top') ? ' cff-top' : ' cff-bottom';
 
788
 
789
- $like_box_page_id = explode(",", str_replace(' ', '', $page_id) );
 
 
 
 
 
 
 
790
 
791
- $like_box .= '" ><script src="https://connect.facebook.net/' . $cff_locale . '/all.js#xfbml=1'.$cff_like_box_params.'"></script><div class="fb-page" data-href="https://www.facebook.com/'.$like_box_page_id[0].'" data-width="'.$cff_likebox_width.'" data-hide-cover="'.$cff_like_box_cover.'" data-show-facepile="'.$cff_like_box_faces.'" data-small-header="'.$cff_like_box_small_header.'" data-hide-cta="'.$cff_like_box_hide_cta.'" data-show-posts="false" data-adapt-container-width="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/'.$like_box_page_id[0].'"><a href="https://www.facebook.com/'.$like_box_page_id[0].'">'.$cff_facebook_link_text.'</a></blockquote></div></div><div id="fb-root"></div></div>';
 
 
 
792
 
793
  //Don't show like box if it's a group
794
  if($cff_is_group) $like_box = '';
@@ -809,12 +823,12 @@ function display_cff($atts) {
809
  $cff_header = '<h3 class="cff-header';
810
  if ($cff_header_outside) $cff_header .= ' cff-outside';
811
  $cff_header .= '" ' . $cff_header_styles . '>';
812
- $cff_header .= '<i class="fa fas fab fa-' . $cff_header_icon . '"';
813
  if(!empty($cff_header_icon_color) || !empty($cff_header_icon_size)) $cff_header .= ' style="';
814
  if(!empty($cff_header_icon_color)) $cff_header .= 'color: #' . str_replace('#', '', $cff_header_icon_color) . ';';
815
  if(!empty($cff_header_icon_size)) $cff_header .= ' font-size: ' . $cff_header_icon_size . 'px;';
816
  if(!empty($cff_header_icon_color) || !empty($cff_header_icon_size))$cff_header .= '"';
817
- $cff_header .= ' aria-hidden="true"></i>';
818
  $cff_header .= '<span class="header-text" style="height: '.$cff_header_icon_size.'px;">' . $cff_header_text . '</span>';
819
  $cff_header .= '</h3>';
820
 
@@ -872,7 +886,7 @@ function display_cff($atts) {
872
  //ALL POSTS
873
  if (!$cff_events_only){
874
 
875
- $cff_posts_json_url = 'https://graph.facebook.com/' . $page_id . '/' . $graph_query . '?fields=id,from,message,message_tags,story,story_tags,link,source,name,caption,description,type,status_type,object_id,created_time,backdated_time,call_to_action&access_token=' . $access_token . '&limit=' . $cff_post_limit . '&locale=' . $cff_locale . $cff_ssl;
876
 
877
  if( $cff_show_access_token && strlen($access_token) > 130 ){
878
  //If using a Page Access Token then set caching time to be minimum of 5 minutes
@@ -1159,7 +1173,7 @@ function display_cff($atts) {
1159
  if($cff_date_position == 'below' || (!$cff_show_author && $cff_date_position == 'author') ) $cff_date .= '<span class="cff-date-dot">&nbsp;&middot;&nbsp;&nbsp;</span>';
1160
  $cff_date .= '</p>';
1161
 
1162
- //Page name
1163
  if( isset($news->from->name) ){
1164
  $cff_author_name = $news->from->name;
1165
  $cff_author_name = str_replace('"', "", $cff_author_name);
@@ -1196,7 +1210,7 @@ function display_cff($atts) {
1196
  $cff_html_check_array = array('&lt;', '’', '“', '&quot;', '&amp;', '&gt;&gt;');
1197
 
1198
  //always use the text replace method
1199
- if( cff_stripos_arr($post_text_story, $cff_html_check_array) !== false ) {
1200
 
1201
  //Loop through the tags
1202
  foreach($text_tags as $message_tag ) {
@@ -1290,7 +1304,9 @@ function display_cff($atts) {
1290
  //Link to the post if it's a visitor post as profile link no longer available
1291
  $cff_author_link_el = 'a';
1292
  $cff_author_link_atts = ' href="https://facebook.com/' . $cff_from_id . '" '.$target.$cff_nofollow.' '.$cff_author_styles;
1293
- if( $cff_from_id != $numeric_page_id && !empty($numeric_page_id) ){
 
 
1294
  $cff_author_link_el = 'span';
1295
  $cff_author_link_atts = '';
1296
  }
@@ -1314,27 +1330,8 @@ function display_cff($atts) {
1314
 
1315
  $cff_author .= '</div>';
1316
 
1317
-
1318
  //Author image
1319
- //Get author avatar of visitor
1320
- if( ( $cff_from_id != $numeric_page_id && !empty($numeric_page_id) ) || $cff_restricted_page ){
1321
- //Check whether the profile pic exists in a transient
1322
- $cff_pic_transient_name = "fb_avatar_" . $cff_from_id;
1323
- if ( false === get_transient( $cff_pic_transient_name ) ) {
1324
- //Get the profile pic from the API
1325
- $cff_author_data_url = 'https://graph.facebook.com/' . $cff_from_id . '/?fields=picture&access_token='.$access_token;
1326
- $cff_author_data = cff_fetchUrl($cff_author_data_url);
1327
- $cff_author_json = json_decode($cff_author_data);
1328
- $cff_author_src = $cff_author_json->picture->data->url;
1329
-
1330
- //Store in a transient for 6 months
1331
- set_transient( $cff_pic_transient_name, $cff_author_src, 180 * 60 * 60 * 24 );
1332
- } else {
1333
- $cff_author_src = get_transient( $cff_pic_transient_name );
1334
- }
1335
- } else {
1336
- $cff_author_src = 'https://graph.facebook.com/' . $cff_from_id . '/picture?type=square';
1337
- }
1338
 
1339
  $cff_author .= '<div class="cff-author-img"><'.$cff_author_link_el.$cff_author_link_atts.'><img src="'.$cff_author_src.'" title="'.$cff_author_name.'" alt="'.$cff_author_name.'" width=40 height=40 onerror="this.style.display=\'none\'"></'.$cff_author_link_el.'></div>';
1340
 
@@ -1603,8 +1600,8 @@ function display_cff($atts) {
1603
  $cff_note_obj = json_decode($cff_note_json);
1604
  $cff_note_object = $cff_note_obj->attachments->data[0];
1605
 
1606
- isset($cff_note_object->title) ? $cff_note_title = htmlentities($cff_note_object->title, ENT_QUOTES | ENT_HTML5, 'UTF-8') : $cff_note_title = '';
1607
- isset($cff_note_object->description) ? $cff_note_description = htmlentities($cff_note_object->description, ENT_QUOTES | ENT_HTML5, 'UTF-8') : $cff_note_description = '';
1608
  isset($cff_note_object->url) ? $cff_note_link = $cff_note_object->url : $cff_note_link = '';
1609
  isset( $cff_note_object->media->image->src ) ? $cff_note_media_src = $cff_note_object->media->image->src : $cff_note_media_src = false;
1610
 
@@ -1708,14 +1705,40 @@ function display_cff($atts) {
1708
  if( isset($news->name) ) $cff_shared_link .= '"><'.$cff_link_title_format.' class="cff-link-title" '.$cff_link_title_styles.'><a href="'.$link.'" '.$target.$cff_nofollow.' style="color:#' . $cff_link_title_color . ';">'. $news->name . '</a></'.$cff_link_title_format.'>';
1709
  //The link source:
1710
  (!empty($news->caption)) ? $cff_link_caption = $news->caption : $cff_link_caption = '';
1711
- if(!empty($cff_link_caption)) $cff_shared_link .= '<p class="cff-link-caption" style="color:#' . str_replace('#', '', $cff_link_url_color) . ';">'.$cff_link_caption.'</p>';