PluginProbe
Taboola / 2.2.3
Taboola v2.2.3
1.0.4 1.0.5 1.0.6 1.0.8 2.0.1 2.0.2 2.1.0 2.1.1 2.2.2 2.2.3 3.0.0 3.0.1 3.0.2 3.1.0 trunk 1.0 1.0.1 1.0.10 1.0.11 1.0.12 1.0.13 1.0.14 1.0.15 1.0.2 1.0.3
← All changes | settings.php +561 -169 1.0 → 2.2.3 View file →
@@ -1,194 +1,586 @@
1 +<!-- Latest font-awesome include-->
2 +<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
3 +
4 +<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
5 +<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
6 +<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
7 +
1 8 <style>
2 - .taboola-container {
3 - padding: 20px;
4 - padding-left: 0;
5 - width: 400px;
6 - font-size: 14px;
9 + <?php include 'css/main.css'; ?>
10 +</style>
11 +
12 +<div class="taboola-container">
13 + <div class="theme_image">
14 + <img src='<?php echo $this->plugin_url.'img/taboola.png' ?>' style='width:150px;'/>
15 + </div>
16 +
17 + <h2 style="font-size:1.7em;">Taboola WordPress Plugin</h2>
18 +
19 + <h2 class="nav-tab-wrapper">
20 + <a href="#tab1" class="nav-tab" id="tab1-link">Web</a>
21 + <a href="#tab2" class="nav-tab" id="tab2-link">Web Push</a>
22 + </h2>
23 +
24 +<!-- errors/success message -->
25 +
26 + <?php
27 + if($_SERVER['REQUEST_METHOD'] == 'POST' && count($taboola_errors) == 0){
28 + echo "<div class='label-success'>";
29 + echo "<h3 style='color:green;'>Changes applied!</h3>";
30 + echo "<span>Verify the new changes by browsing to your site.</span>";
31 + echo "</div>";
7 32 }
8 - table {
9 - width: 380px;
10 - margin-left: 20px;
33 +
34 + if(count($taboola_errors) > 0){
35 + echo "<div class='label-error'>";
36 + echo "<h3 style='color:red;'>Missing or incorrect values</h3>";
37 + echo "<p>The following fields contained missing or incorrect values:</p>";
38 + echo "<ul>";
39 + for($i = 0; $i < count($taboola_errors); $i++){
40 + echo "<li>".$taboola_errors[$i]."</li>";
41 + }
42 + echo "</ul>";
43 + echo "<p><b>All values</b> have been reverted to the last successful save.</p>";
44 + echo "</div>";
11 45 }
12 - table td img {
13 - position: relative;
14 - top: 3px;
15 - margin-left: 5px;
46 +
47 + ?>
48 +
49 +<script>
50 + function setEnabledDisabled(divID, chkToggle) {
51 + /*
52 + JS function for form.
53 + Enables/disables fields for the given section ('divID'), depending on whether 'chkToggle' is checked.
54 + */
55 +
56 + var applyColor = (chkToggle.checked ? "#000" : "#666");
57 +
58 + // Set all labels in that section ('divID') to the relevant color.
59 + $(divID).find("label").css("color", applyColor);
60 +
61 + // Disable (/enable) all input fields in that section ('divID'), except for 'chkToggle'.
62 + // Once done, apply a gray border color.
63 + $(divID).find("input").not("#" + chkToggle.id).prop("disabled", !chkToggle.checked).css("borderColor", "#ccc");
64 + $(divID).find("select").not("#" + chkToggle.id).prop("disabled", !chkToggle.checked).css("borderColor", "#ccc");
65 +
16 66 }
17 - /* table {
18 - padding: 12px;
19 - border: 3px solid #467FD7;
20 - border-radius: 5px;
21 - margin-top: 10px;
22 - width: 100%;
23 - }*/
24 - table tr td:first-child {
25 - width: 110px;
67 +</script>
68 +
69 +<!-- tab-switching JQuery -->
70 +<script>
71 +jQuery(document).ready(function($) {
72 + function showTab(tabId) {
73 + $('.nav-tab').removeClass('nav-tab-active');
74 + $('.tab-content').removeClass('active').hide();
75 +
76 + $('a[href="' + tabId + '"]').addClass('nav-tab-active');
77 + $(tabId).addClass('active').show();
26 78 }
27 - table input {
28 - width: 100%;
79 +
80 + // On tab click, update the URL hash and hidden input value
81 + $('.nav-tab').click(function(e) {
82 + e.preventDefault();
83 + var tabId = $(this).attr('href');
84 + window.location.hash = tabId;
85 + $('#active_tab').val(tabId);
86 + showTab(tabId);
87 + });
88 +
89 + // On page load, show the tab from the URL hash or default to the first tab
90 + var hash = window.location.hash;
91 + if (hash) {
92 + showTab(hash);
93 + $('#active_tab').val(hash);
94 + } else {
95 + showTab('#tab1');
29 96 }
30 - input[type='text'] {
31 - border-radius: 3px;
97 +
98 + // Set the active tab before form submission
99 + $('form').submit(function() {
100 + var activeTab = $('.nav-tab.nav-tab-active').attr('href');
101 + $('#active_tab').val(activeTab);
102 + });
103 +});
104 +</script>
105 +
106 +<script>
107 +$(document).ready(function(){
108 + // On page load:
109 + if ($('#mid_paragraph_ui_mode').val() == 'Other') {
110 + $("#mid_css_selector_div").show();
32 111 }
33 - hr {
34 - margin-top: 15px;
35 - margin-bottom: 15px;
36 - border-bottom: none;
37 - }
38 - input[type='checkbox'] {
39 112
40 - }
41 - input[type='submit']{
42 - float: right;
43 - }
44 - .checkbox {
45 - margin-bottom: 10px;
46 - }
47 - .request_link {
48 - float: right;
49 - margin-right: 10px;
50 - line-height: 26px;
51 - }
52 - table .tooltip {
53 - /* position:relative;
54 - top:50px;
55 - left:50px;*/
56 - }
57 - .tooltip div { /* hide and position tooltip */
58 - background-color: black;
59 - color: white;
60 - border-radius: 5px;
61 - opacity: 0;
62 - position: absolute;
63 - -webkit-transition: opacity 0.5s;
64 - -moz-transition: opacity 0.5s;
65 - -ms-transition: opacity 0.5s;
66 - -o-transition: opacity 0.5s;
67 - transition: opacity 0.5s;
68 - width: 200px;
69 - padding: 10px;
70 - margin-left: 30px;
71 - margin-top: -45px;
72 - }
73 - table .tooltip:hover div { /* display tooltip on hover */
74 - opacity:1;
75 - }
76 - .label-success {
77 - font-size: 17px;
78 - display: block;
79 - margin-top: 10px;
80 - color: green;
81 - }
82 - .label-error {
83 - font-size: 17px;
84 - display: block;
85 - margin-top: 10px;
86 - color: red;
87 - }
113 + if ($('#home_enabled').prop("checked") === true) {
114 + $("#homepage").show();
115 + var ad = $('#show-advanced-settings');
116 + ad.text("<< Hide advanced settings");
117 + }
118 +});
119 +</script>
88 120
89 -</style>
121 +<script>
122 +$(document).ready(function(){
123 + // On clicking 'Advanced settings'
124 + $("#show-advanced-settings").click(function() {
125 + $("#homepage").slideToggle("fast");
126 + var ad = $('#show-advanced-settings');
127 + ad.text() == "Show advanced settings >>" ? ad.text("<< Hide advanced settings") : ad.text("Show advanced settings >>");
128 + });
129 +});
130 +</script>
90 131
91 -<div class="taboola-container">
92 - <img src='<?php echo $this->plugin_url.'img/taboola.png' ?>' style='width:200px;'/>
93 - <hr>
94 132
95 - <form method="POST">
96 - <table>
97 - <tr>
98 - <td>Publisher ID</td>
99 - <td>
100 - <input type="text" name="publisher_id" placeholder="publisher" value="<?php echo $settings->publisher_id ?>"/>
101 - </td>
102 - <td class='tooltip'>
103 - <img src='<?php echo $this->plugin_url.'img/question-mark.png' ?>'/>
104 - <div>Please contact your Taboola representative to receive the Publisher ID </div>
105 - </td>
106 - </tr>
107 - <tr>
108 - <td colspan='2' style='line-height: 26px; font-size: 13px;'>
109 - Don't have a Publisher ID?
110 - <a style='float: inherit; margin-left:5px; class='request_link' href=' http://taboola.com/contact' target='_blank'>Contact Taboola here</a>
111 - </td>
112 - </tr>
113 - </table>
133 +<script>
134 +$(document).ready(function(){
114 135
115 - <hr style='margin-bottom: 25px; margin-top: 5px;'>
136 + // On selecting an item in the dropdown:
137 + $('#mid_paragraph_ui_mode').on('change', function(e){
138 + e.preventDefault();
139 + if ( this.value == 'Other')
140 + {
141 + $("#mid_css_selector_div").show();
116 142
117 - <div class='checkbox'>
118 - <input id="first_bc_enabled" type="checkbox" <?php echo $settings->first_bc_enabled ? "checked='checked'" : "" ?> name="first_bc_enabled"/>
119 - Taboola widget below article
143 + // Highlight relevant fields:
144 + $("#mid_location_string, #mid_occurrence").addClass('highlight');
145 + setTimeout(() => $("#mid_occurrence, #mid_location_string").removeClass('highlight'), 1500);
146 +
147 + }
148 + else
149 + {
150 + $("#mid_location_string").val("p"); // Set it back to the default value of 'p'
151 + $("#mid_css_selector_div").hide();
152 +
153 + // Highlight the 'occurrence' field:
154 + $("#mid_occurrence").addClass('highlight');
155 + setTimeout(() => $("#mid_occurrence").removeClass('highlight'), 1000);
156 + }
157 + });
158 +});
159 +</script>
160 +
161 +
162 +<!-- Welcome Massage -->
163 +
164 + <div class="publisher_welcome_massage">
165 + <h2 class="welcome_heading">Welcome to Taboola WordPress Plugin</h2>
166 + <p class="first_p">For detailed instructions, see the <a href="https://developers.taboola.com/web-integrations/docs/wordpress-plugin-managing-placements" target='_blank'>Taboola Dev Center.</a></p>
167 + <p class="second_p"><b>Stuck? Need a hand?</b> Feel free to reach out via our <a href="https://developers.taboola.com/web-integrations/discuss" target='_blank'>Online Community</a>.</p>
168 + <div class="list_l1">
169 + <p>Usage of this plugin is subject to <b>Taboola's</b> <a href="https://www.taboola.com/policies/platform-terms-of-service" target='_blank'>terms of service.</a></p>
120 170 </div>
121 - <table>
122 - <tr>
123 - <td>Widget ID</td>
124 - <td>
125 - <input type="text" value="<?php echo $settings->first_bc_widget_id ?>" name="first_bc_widget_id" placeholder="Widget ID" />
126 - </td>
127 - <td class='tooltip'>
128 - <img src='<?php echo $this->plugin_url.'img/question-mark.png' ?>'/>
129 - <div>Please contact your Taboola representative to receive the Widget ID</div>
130 - </td>
131 - </tr>
132 - <!-- <tr>
133 - <td>Custom CSS</td>
134 - <td>
135 - <input type="text" value="<?php echo $settings->first_bc_custom_css ?>" name="first_bc_custom_css" placeholder="Custom CSS" />
136 - </td>
137 - </tr>-->
138 - </table>
139 - <hr>
171 + </div>
140 172
141 - <div class='checkbox'>
142 - <input id="second_bc_enabled" type="checkbox" <?php echo $settings->second_bc_enabled ? "checked='checked'" : "" ?> name="second_bc_enabled"/>
143 - Taboola widget below the first one
173 +<!-- Welcome Massage-->
174 +
175 +<form method="POST">
176 +<?php
177 + // Generate a nonce and pass it via a hidden field
178 + $my_nonce = wp_create_nonce( 'my_plugin_update_field_action' );
179 +?>
180 +<input type="hidden" name="my_plugin_nonce" value="<?php echo esc_attr( $my_nonce ); ?>"/>
181 +
182 +<div id="tab1" class="tab-content">
183 + <h2 class="general_h2">General Settings</h2>
184 +
185 + <div class="settings_block">
186 + <div class="style_box1"><label id="pub_id">Publisher ID :</label>
187 + <div class="tooltip">
188 + <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
189 + <!-- <img class="helpTooltip__icon___1XWGN" src='<?php echo $this->plugin_url.'img/tooltip_image.svg' ?>'/> -->
190 + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN_first">
191 + <g fill="none" fill-rule="evenodd"><path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path>
192 + </g>
193 + </svg>
194 + <!-- <div id="arrow" ></div> -->
195 + <div>Your Publisher ID, as provided by Taboola.</div>
196 + </div>
197 + </div>
198 + <div class="pub_id">
199 + <input id="publisher-id" type="text" name="publisher_id" placeholder="publisher" value="<?php echo !empty($settings->publisher_id) ? strip_tags($settings->publisher_id) : '' ?>"/>
200 + </div>
201 + <div class="statement">
202 + <label style="color: #000000; padding-">
203 + Don't have an account with taboola? <a href='http://taboola.com/contact' target='_blank'>Contact us</a> to get started.
204 + </label>
205 + </div>
206 + </div>
207 +
208 + <!-- Below Article Widget -->
209 + <h2 class="widget_h2">Taboola Units</h2>
210 + <div id="below_article" class="settings_block widget_settings_block">
211 + <div class="switch_style">
212 + <label class="switch">
213 + <input id="first_bc_enabled" type="checkbox" <?php echo !empty($settings->first_bc_enabled) ? "checked='checked'" : "" ?> onclick="setEnabledDisabled('#below_article', this)" name="first_bc_enabled" />
214 + <span class="slider round"></span>
215 + </label>
216 + <b style="font-size:15px;">Below-article</b>
217 + </div>
218 + <div class="label_below">
219 + <div class="mode_style">
220 + <label id="first_bc_widget_id_label" style="float:left;">Mode (Widget ID):</label>
221 + <div class="tooltip">
222 + <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
223 + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
224 + <g fill="none" fill-rule="evenodd">
225 + <path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path>
226 + </g>
227 + </svg>
228 + <div>Your <i>below-article</i> Mode (Widget ID), as provided by Taboola. </div>
229 + </div>
230 + </div>
231 + <div class="placement_style">
232 + <label id="first_bc_placement_label" style="float:left;">Placement Name:</label>
233 + <div class='tooltip'>
234 + <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
235 + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
236 + <g fill="none" fill-rule="evenodd">
237 + <path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path>
238 + </g>
239 + </svg>
240 + <div>Your <i>below-article</i> Placement Name, as provided by Taboola. <br>
241 + <br> When upgrading from v1, fill in 'below-article'. <br>
242 + <br> For more information, reach out via our <a href="https://developers.taboola.com/web-integrations/discuss" target='_blank'>Online Community</a>, or contact Taboola Support.
243 + </div>
244 + </div>
245 + </div>
246 + </div>
247 + <div class="input_below">
248 + <div class="widget_below">
249 + <input id="first_bc_widget_id" type="text" value="<?php echo !empty($settings->first_bc_widget_id) ? strip_tags($settings->first_bc_widget_id) : "" ?>" name="first_bc_widget_id" placeholder="Widget ID" />
250 + </div>
251 + <div class="placement_below">
252 + <input type="text" id="first_bc_placement" value="<?php echo !empty($settings->first_bc_placement) ? strip_tags($settings->first_bc_placement) : "" ?>" name="first_bc_placement" placeholder="Placement Name" />
253 + </div>
254 + </div>
255 +
256 + <!-- Below Article Widget -->
257 + <!-- Advanced Settings -->
258 + <br />
259 + <div class='location_section'>
260 + <div class='checkbox_read'>
261 + <input id="out_of_content_enabled" type="checkbox" <?php echo !empty($settings->out_of_content_enabled) ? "checked='checked'" : "" ?> name="out_of_content_enabled" />
262 + <label id="out_of_content_enabled_label">Place the feed/widget just after the article container (required for <b>Read More</b>)</label>
263 + </div>
264 + <div class='tooltip'>
265 + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN_read">
266 + <g fill="none" fill-rule="evenodd">
267 + <path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path>
268 + </g>
269 + </svg>
270 + <div>
271 + Required in order for Taboola to activate <i>Read More</i>.<br><br>
272 + Read More buttons can boost audience engagement significantly, especially on mobile devices.<br><br>
273 + For more information, see the <a href="https://developers.taboola.com/web-integrations/docs/wordpress-plugin-managing-placements#below-article-widget" target='_blank'>Taboola Dev Center</a>.</div>
274 + </div>
275 + </div>
276 + </div>
277 + <!-- Advanced Settings -->
278 +
279 + <!-- Mid Article Widget -->
280 +
281 + <div id="mid_article" class="settings_block widget_settings_block">
282 + <div class="switch_style">
283 + <label class="switch">
284 + <input id="mid_enabled" type="checkbox" <?php echo !empty($settings->mid_enabled) ? "checked='checked'" : "" ?> onclick="setEnabledDisabled('#mid_article', this)" name="mid_enabled"/>
285 + <span class="slider round"></span>
286 + </label>
287 + <b style="font-size:15px;">Mid-article</b>
288 + </div>
289 +
290 + <div>
291 + <div class="mode_style_mid"><label id="mid_widget_id_label" style="float:left;">Mode (Widget ID):</label>
292 + <div class='tooltip'>
293 + <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
294 + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
295 + <g fill="none" fill-rule="evenodd"><path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path>
296 + </g>
297 + </svg>
298 + <div>Your <i>mid-article</i> Mode (Widget ID), as provided by Taboola.</div>
299 + </div>
300 + </div>
301 + <div class="placement_style_mid"><label id="mid_placement_label" style="float:left;">Placement Name:</label>
302 + <div class='tooltip'>
303 + <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
304 + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
305 + <g fill="none" fill-rule="evenodd"><path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path>
306 + </g>
307 + </svg>
308 + <div>Your <i>mid-article</i> Placement Name, as provided by Taboola.</div>
309 + </div>
310 + </div>
311 + </div>
312 + <div>
313 + <div class="widget_below_mid">
314 + <input id="mid_widget_id" type="text" value="<?php echo !empty($settings->mid_widget_id) ? strip_tags($settings->mid_widget_id) : "" ?>" name="mid_widget_id" placeholder="Widget ID" />
315 + </div>
316 + <div class="placement_below_mid">
317 + <input id = "mid_placement" type="text" value="<?php echo !empty($settings->mid_placement) ? strip_tags($settings->mid_placement) : "" ?>" name="mid_placement" placeholder="Placement Name" />
318 + </div>
319 + </div>
320 +
321 + <div id="mid_occurrence_div">
322 + <div class="mode_style_mid_selector"><label id="mid_location_string_label" style="float:left;">Position the widget below:</label>
323 + <div class='tooltip'>
324 + <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
325 + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
326 + <g fill="none" fill-rule="evenodd"><path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path>
327 + </g>
328 + </svg>
329 + <div>
330 + Enter the paragraph number to target. <br>
331 + E.g. To target the <b>5th</b> paragraph, fill in <i>5</i>.<br><br>
332 + ----<br>
333 + <i>Advanced</i> - to use a <b>custom</b> selector:<br><br>
334 + 1) Choose 'Other'. <br>
335 + 2) Fill in a selector (<i>right</i>), and an occurrence (<i>left</i>).
336 + </div>
337 + </div>
338 + </div>
339 + <div class="placement_below_mid_occurrence">
340 + <select name="mid_paragraph_ui_mode" id="mid_paragraph_ui_mode">
341 + <option value="Paragraph" <?php echo (!empty($settings->mid_paragraph_ui_mode) && $settings->mid_paragraph_ui_mode == "Paragraph") ? "selected" : ""?> >Paragraph</option>
342 + <option value="Other" <?php echo (!empty($settings->mid_paragraph_ui_mode) && $settings->mid_paragraph_ui_mode == "Other") ? "selected" : ""?>>Other</option>
343 + </select>&nbsp;
344 + <input type="number" id="mid_occurrence" value="<?php echo !empty($settings->mid_location_string_occurrence) ? $settings->mid_location_string_occurrence : "1" ?>" name="mid_location_string_occurrence" placeholder="" style="width:65px;">
345 + </div>
346 +
347 + </div>
348 + <div id="mid_css_selector_div">
349 +
350 + <div class="placement_style_mid_occurrence"><label id="mid_occurrence_label" style="float:left;">CSS selector :</label>
351 + <div class='tooltip'>
352 + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
353 + <g fill="none" fill-rule="evenodd"><path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path>
354 + </g>
355 + </svg>
356 + <div>
357 + <i>Advanced</i> - fill in a selector to target - e.g.:<br><br>
358 + <i>#my-id</i> - to target an <i>ID</i> of "my-id".<br>
359 + <i>.my-class</i> - to target a <i>class</i> of "my-class".
360 + </div>
361 + </div>
362 + </div>
363 + <div class="widget_below_mid_selector">
364 + <input id = "mid_location_string" type="text" value="<?php echo !empty($settings->mid_location_string) ? strip_tags($settings->mid_location_string) : "p" ?>" name="mid_location_string" placeholder="E.g. p for paragraph" />
365 + </div>
366 + </div>
144 367 </div>
368 + <!-- Mid Article Widget -->
145 369
146 - <table>
147 - <tr>
148 - <td>Widget ID</td>
149 - <td>
150 - <input type="text" value="<?php echo $settings->second_bc_widget_id ?>" name="second_bc_widget_id" placeholder="Widget ID" />
151 - </td>
152 - <td class='tooltip'>
153 - <img src='<?php echo $this->plugin_url.'img/question-mark.png' ?>'/>
154 - <div>Please contact your Taboola representative to receive the Widget ID</div>
155 - </td>
156 - </tr>
157 - <!-- <tr>
158 - <td>Custom CSS</td>
159 - <td>
160 - <input type="text" value="<?php echo $settings->second_bc_custom_css ?>" name="second_bc_custom_css" placeholder="Custom CSS" />
161 - </td>
162 - </tr>-->
163 - </table>
164 - <hr style='border-bottom: 1px solid #fafafa;'>
370 + <!-- Right Rail Article Widget -->
165 371
166 - <input class='button-secondary' type="submit" value="Apply Changes ✔"/>
167 - <!-- <a class='request_link' href=' http://taboola.com/contact' target='_blank'>Request Widget</a> -->
372 + <div id="right-rail" class="settings_block widget_settings_block">
373 + <label id="right-rail-label"><b style="font-size:15px;margin-left: 10px;">Right-rail (sidebar)</b> </label>
374 + <div style="font-size:14px;margin: 5px 10px 10px 10px;">You can insert a <b>Taboola</b> unit in your website <b>sidebar</b> (if your <b>WordPress</b> theme provides one):</div>
375 +
376 + <div id="rightrail-banner">
377 + 1. In the <b>sidebar menu</b> (<i>left</i>) select <b>Appearance</b> > <b>Widgets</b>, or click <a href="widgets.php" target="_blank">here</a> to open the <b>Widgets</b> panel. </br>
378 + 2. Click on the <span style="font-size: 18px; font-weight:bold">+</span> icon (<i>top, left</i>) and type in <b>"Taboola".</b></br>
379 + 3. Drag the <b>Taboola</b> widget to the desired position in the sidebar (<i>right</i>).</br>
380 + 4. Enter the <b>Widget ID (Mode)</b>, as provided by <b>Taboola</b>.</br>
381 + 5. Click on <b>Update</b> (<i>top, right</i>) to save your changes.</br>
382 + 6. Browse to your website and verify that the newly added unit displays correctly.</br>
383 + <hr>
384 + To <b>watch a demo</b> of the above steps, see our <a href="https://developers.taboola.com/web-integrations/docs/sidebar-widget" target="_blank">online docs</a>.
385 + </div>
386 + </div>
387 +
388 +<!-- Right Rail Article Widget -->
389 +
390 +<!-- Homepage mid widget -->
391 +
392 +<div id="homepage" class="settings_block widget_settings_block">
393 + <div class="switch_style">
394 + <label class="switch">
395 + <input id="home_enabled" type="checkbox" <?php echo !empty($settings->home_enabled) ? "checked='checked'" : "" ?> onclick="setEnabledDisabled('#homepage', this)" name="home_enabled"/>
396 + <span class="slider round"></span>
397 + </label>
398 + <div>
399 + <b style="font-size:15px;float: left;">Homepage (front page)</b>
400 + <div class='tooltip'>
401 + <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
402 + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
403 + <g fill="none" fill-rule="evenodd"><path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path>
404 + </g>
405 + </svg>
406 + <div>Settings will be applied to the page that you marked as your 'front page'.</div>
407 + </div>
408 + </div>
409 + </div>
410 +
411 + <div>
412 + <div class="mode_style_home"><label id="home_widget_id_label" style="float:left;">Mode (Widget ID):</label>
413 + <div class='tooltip'>
414 + <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
415 + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
416 + <g fill="none" fill-rule="evenodd"><path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path>
417 + </g>
418 + </svg>
419 + <div>Your <i>homepage</i> Mode (Widget ID), as provided by Taboola.</div>
420 + </div>
421 + </div>
422 + <div class="placement_style_home"><label id="home_placement_label" style="float:left;">Placement Name:</label>
423 + <div class='tooltip'>
424 + <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
425 + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
426 + <g fill="none" fill-rule="evenodd"><path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path>
427 + </g>
428 + </svg>
429 + <div>Your <i>homepage</i> Placement Name, as provided by Taboola.</div>
430 + </div>
431 + </div>
432 + </div>
433 + <div>
434 + <div class="widget_below_home">
435 + <input id="home_widget_id" type="text" value="<?php echo !empty($settings->home_widget_id) ? strip_tags($settings->home_widget_id) : "" ?>" name="home_widget_id" placeholder="Widget ID" />
436 + </div>
437 + <div class="placement_below_home">
438 + <input id = "home_placement" type="text" value="<?php echo !empty($settings->home_placement) ? strip_tags($settings->home_placement) : "" ?>" name="home_placement" placeholder="Placement Name" />
439 + </div>
440 + </div>
441 +
442 + <div class='heading_mid_home'><label style="float:left;">Position the widget immediately below the element:</label>
443 + <div class='tooltip'>
444 + <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
445 + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
446 + <g fill="none" fill-rule="evenodd"><path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path>
447 + </g>
448 + </svg>
449 + <div>The widget will be placed <i>just beneath</i> this element.<br><br>
450 + To target an element, 2 pieces of information are needed:<br><br>
451 + i) A CSS selector - e.g. <i>p</i> (for paragraph).<br>
452 + ii) An occurrence - e.g. 1st, 2nd, 3rd, etc.<br><br>
453 + For more information, see the <a href="https://developers.taboola.com/web-integrations/docs/wordpress-plugin-managing-placements" target='_blank'>Taboola Dev Center</a>.
454 + </div>
455 + </div>
456 + </div>
457 +
458 +
459 + <div class="home_occurrence">
460 + <div class="mode_style_home_selector"><label id="home_location_string_label" style="float:left;">CSS selector :</label>
461 + <div class='tooltip'>
462 + <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
463 + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
464 + <g fill="none" fill-rule="evenodd"><path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path>
465 + </g>
466 + </svg>
467 + <div>
468 + The element to target - e.g.:<br><br>
469 + <i>section</i> - to target a <i>section</i>.<br>
470 + <i>#my-id</i> - to target an <i>ID</i> of "my-id".<br>
471 + <i>.my-class</i> - to target a <i>class</i> of "my-class".
472 + </div>
473 + </div>
474 + </div>
475 + <div class="placement_style_home_occurrence"><label id="home_occurrence_label" style="float:left;">Occurrence :</label>
476 + <div class='tooltip'>
477 + <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
478 + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
479 + <g fill="none" fill-rule="evenodd"><path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path>
480 + </g>
481 + </svg>
482 + <div>For a <b>non-unique</b> selector - e.g. <i>section</i> - fill in the <b>occurrence</b> to target.<br><br>
483 + E.g. To target the <b>2nd</b> section, fill in <i>2</i>. <br><br>
484 + For a <b>unique</b> selector - e.g. <i>#my-id</i> - leave the default value of '1'.</div>
485 + </div>
486 + </div>
487 + </div>
488 + <div class="home_placement">
489 + <div class="widget_below_home_selector">
490 + <input id = "home_location_string" type="text" value="<?php echo !empty($settings->home_location_string) ? strip_tags($settings->home_location_string) : "" ?>" name="home_location_string" placeholder="E.g. p for paragraph" /></td>
491 + </div>
492 + <div class="placement_below_home_Occurrence">
493 + <input type="number" id="home_occurrence" value="<?php echo !empty($settings->home_location_string_occurrence) ? $settings->home_location_string_occurrence : "1" ?>" name="home_location_string_occurrence" placeholder="" style="width:65px;">
494 + </div>
495 + </div>
496 +</div>
497 +
498 +<!-- Homepage mid widget -->
499 +
500 +<div id="advanced-settings-main">
501 + <a id="show-advanced-settings">Show advanced settings >></a>
502 + <div class="change_button">
503 + <input class='apply_button' type="submit" value="Apply Changes"/>
504 + </div>
505 +</div>
506 +
507 +</div>
508 +
509 +<div id="tab2" class="tab-content" style="display: none;">
510 +<h2 class="general_h2">General Setting</h2>
511 +<div id="web_push" class="settings_block widget_settings_block">
512 + <div class="style_box1"><label id="pub_id">Web Push Account ID:</label>
513 + <div class="tooltip">
514 + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN_first">
515 + <g fill="none" fill-rule="evenodd"><path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path>
516 + </g>
517 + </svg>
518 + <!-- <div id="arrow" ></div> -->
519 + <div>Your SC web-push numeric account ID, as provided by Taboola.<br>
520 + This integration is only for sponsored web-push <br> <br>
521 + The header script and service worker will only be injected if the publisher already has the taboola widget running on their site.
522 + </div>
523 + </div>
524 + <div class="switch_style_push">
525 + <label class="switch">
526 + <input id="web_push_enabled" type="checkbox" <?php echo !empty($settings->web_push_enabled) ? "checked='checked'" : "" ?> onclick="setEnabledDisabled('#web_push', this)" name="web_push_enabled" />
527 + <span class="slider round"></span>
528 + </label>
529 + </div>
530 + </div>
531 + <div class="web_push_id">
532 + <input type="number" id="publisher_id_push" value="<?php echo !empty($settings->publisher_id_push) ? strip_tags($settings->publisher_id_push) : "" ?>" name="publisher_id_push" placeholder="Publisher ID Web Push" />
533 + </div>
534 + <div class="statement">
535 + <label style="color: #000000; padding-">
536 + Don't have an account with taboola? <a href='http://taboola.com/contact' target='_blank'>Contact us</a> to get started.
537 + </label>
538 + </div>
539 +</div>
540 +
541 + <div id="advanced-settings-main">
542 + <div class="change_button">
543 + <input class='apply_button' type="submit" value="Apply Changes"/>
544 + </div>
545 + </div>
546 +</div>
547 +
168 548 </form>
169 549 <div style='clear:both'></div>
550 +
170 551 <?php
171 - if($_SERVER['REQUEST_METHOD'] == 'POST' && count($taboola_errors) == 0){
172 - echo "<span class='label-success'>Your changes have been made! You can now see them on your site</span>";
173 - }
174 - if(count($taboola_errors) > 0){
175 - for($i = 0; $i < count($taboola_errors); $i++){
176 - echo "<span class='label-error'>".$taboola_errors[$i]."</span>";
177 - }
178 - }
552 + $logPublisher = empty($settings->publisher_id) ? "wordpressplugin" : $settings->publisher_id;
553 + $userDetails = wp_get_current_user();
554 + $detailsString = $userDetails->first_name." ".$userDetails->last_name;
179 555 ?>
556 + <img src="https://logs-01.loggly.com/inputs/d14862f3-64ad-49ca-b28d-1b5d155414ec.gif?source=wp&type=settings&pub=<?=$logPublisher?>&user=<?=urlencode($detailsString)?>&email=<?=urlencode($userDetails->user_email)?>&url=<?=urlencode("//{$_SERVER['HTTP_HOST']}{$_SERVER['REQUEST_URI']}")?>"/>
557 + <!-- <form name="install_log" style="display:none;" method="post" action="http://logs-01.loggly.com/inputs/d14862f3-64ad-49ca-b28d-1b5d155414ec/tag/http/">
558 + <input name="tim" type="hidden" value="<?=date("H:i:s.000")?>">
559 + <input name="pub" type="hidden" value="<?=$logPublisher?>">
560 + <input name="data" type="hideen" value="WORDPRESS_PLUGIN_INSTALL|<?="//{$_SERVER['HTTP_HOST']}{$_SERVER['REQUEST_URI']}|{$detailsString}"?>">
561 + </form> -->
180 562 </div>
563 +
181 564 <script>
182 - function sync_checkboxes(){
183 - if(jQuery('#first_bc_enabled').attr("checked")){
184 - jQuery('#second_bc_enabled').prop('disabled',false)
185 - } else {
186 - jQuery('#second_bc_enabled').prop('checked', false);
187 - jQuery('#second_bc_enabled').prop('disabled',true)
188 - }
189 - }
190 - jQuery('#first_bc_enabled').change(sync_checkboxes);
191 - setTimeout(function(){jQuery('.label-success').fadeOut()}, 6000);
192 - setTimeout(function(){jQuery('.label-error').fadeOut()}, 6000);
193 - sync_checkboxes()
565 +
566 + // Set enabled/disabled appearance upon page load
567 + // (Function is defined earlier on the page.)
568 + setEnabledDisabled('#below_article', document.getElementById("first_bc_enabled"));
569 + setEnabledDisabled('#mid_article', document.getElementById("mid_enabled"));
570 + setEnabledDisabled('#homepage', document.getElementById("home_enabled"));
571 + setEnabledDisabled('#web_push', document.getElementById("web_push_enabled"));
572 +
573 +</script>
574 +
575 +<script>
576 +
577 + // Fadeouts for error/success messages
578 + setTimeout(function(){jQuery('.label-success').fadeOut()}, 5000);
579 + setTimeout(function(){jQuery('.label-error').fadeOut()}, 8000);
580 +
581 + // PC
582 + // window.onload = function(){
583 + // document.forms['install_log'].submit()
584 + // }
585 +
194 586 </script>