How can I integrate social content locker in blogger blogs? We see in numbers of WordPress blogs and websites,
But in blooger.com blogs you see no plugin option
does anybody has another way or something like this?
I Want visitor to like, tweet or g+ before reading my posts.
thanks
I found this working script for this what you need to do is first backup you template.
then edit HTML >search <head> tag and put this code after <head>
<script src='http://code.jquery.com/jquery-1.10.2.min.js' type='text/javascript'/>
After that search </head> tag and put below code before this tag
<link href='https://sites.google.com/site/menightfury/home/social-locker/public/sociallocker_v1.6.0.css' rel='stylesheet'/>
<script src='https://sites.google.com/site/menightfury/home/social-locker/public/sociallockermin_v1.6.0.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function ($) {
$('#default-usage .to-lock').sociallocker({
buttons: {order:["facebook-like","twitter-tweet","google-plus"]},
twitter: {url:"https://www.facebook.com/www.mostsharedposts"},
facebook: {url:"https://www.facebook.com/www.mostsharedposts"},
google: {url:"https://plus.google.com/u/0/b/110589424466302901501/110589424466302901501"},
text: {
header: "Like us To Unlock This Content",
message: "This content is locked. Like us on Twitter, Facebook or Google plus to unlock it."
},
locker: {close: false, timer: 0,},
theme: "secrets"
});
});
//]]>
</script>
this is how to hide your code in post editor
go to post edit HTML and add this code
<article id="default-usage">
<div class="to-lock" style="display:none;">
Hello i am the hidden content
</div>
</article>
I implemented this in my blog check demo
Related
Well, I'm integrating the Google Identity Services into my application. But it doesn't run.
I'm following the instruction give in https://developers.google.com/identity/gsi/web
So I added these lines into the head of the index.html file
<meta name="google-signin-client_id" content="MY_GOOGLE_ID.apps.googleusercontent.com">
<script src="https://accounts.google.com/gsi/client" async defer></script>
and these at the beginning of the body:
<script>
function handleCredentialResponse(response) {
console.log('hello, world');
console.log("Encoded JWT ID token: " + response.credential);
}
window.onload = function () {
google.accounts.id.initialize({
client_id: 'MY_GOOGLE_ID.apps.googleusercontent.com',
callback: handleCredentialResponse
});
// Display the One Tap prompt
google.accounts.id.prompt();
// Display the Sign In With Google Button
google.accounts.id.renderButton(
document.getElementById("buttonDiv"),
{ theme: 'outline', size: 'large' }
);
}
</script>
Then added this line into my Navbar.js
<li className='nav-item'>
<div id="buttonDiv" class="g-signin2" data-onsuccess="onSignIn"></div>
</li>
As far as I understood, when the user correctly sign-in, the handleCredentialResponse callback should be called by Google, but nothing appeared on my console.log.
I can login correctly, using different credentials. The user image and email address appear into the button, but I'm not notified of the event.
I tried to follow the instruction, but seems that Google suggest these new approach referred in the link at the top, but the instruction still are for the old implementation.
Can anyone help, please?
So when you initialise the button in your tag, it will have a "data-callback" parameter. Pass your handler in that like below.
<html>
<body>
<script src="https://accounts.google.com/gsi/client" async defer></script>
<div id="g_id_onload"
data-client_id="YOUR_GOOGLE_CLIENT_ID"
**data-callback="handleCredentialResponse"**
data-login_uri="https://your.domain/your_login_endpoint"
data-auto_prompt="false">
</div>
<div class="g_id_signin"
data-type="standard"
data-size="large"
data-theme="outline"
data-text="sign_in_with"
data-shape="rectangular"
data-logo_alignment="left">
</div>
</body>
</html>
i have a code that is just basically showing stars i want that to be added to my wordpress website i have successful uploaded and linked the css and js files in header.php and when i run any page it is infact loading the files i know due to security concerns wordpress wont let you add script in its editor what is the solution? here's my html and js code
<!DOCTYPE html>
<html lang="en">
<head>
<title>RateYo - Scratchpad</title>
<meta charset="utf-8"></meta>
<link rel="stylesheet" href="jquery.rateyo.min.css"/>
</head>
<body>
<div>
<div id="rateYo1" style="margin: 10px"></div>
</div>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.rateyo.min.js"></script>
<script>
$(function () {
$("#rateYo1").rateYo({
rating: 3.5,
readOnly: true
});
});
</script>
</body>
</html>
You can easily add anything you like via hooks.
add_action( 'wp_footer', 'my_custom_scripts', 500 );
function my_custom_scripts() { ?>
<script type="text/javascript">
(function ($, document, undefined) {
// Your custom code goes here.
}(jQuery, document))
</script><?php
}
Alternatively you could add it to the head as well using:
add_action( 'wp_footer', 'my_custom_scripts', 500 );
So if I copy and paste the google translate plugin code snippet:
<div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
It changes all my site css [from headings, animations to even boostrap css].
I did some research and ofcourse I found class="notranslate" and yes I applied for headings and stuff.
I will try by myself, but an answer would be cool.
It was easy.
So for everyone who has this problem you just have to add class="notranslate" to the stylesheet's Link tag, for each one which actually does something on that specific page.
e.g:
<link rel="stylesheet" type="text/css" href="/Templates/CSS/bootstrap.min.css" title="standard" class="notranslate" />
I have solution width config javascript
<script>
$(".class-name").addClass("notranslate");
</script>
After checking a few related questions in stackoverflow and wordpress.stackexchange.com, I am not being able to display a colorbox in my wordpress site, in localhost, when I add the code below to the of my header.php:
<link rel="stylesheet" href="localhost/apoise/wp-content/themes/virality/colorbox-master/example1colorbox.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="localhost/apoise/wp-content/themes/virality/colorbox-master/jquery.colorbox.js"></script>
<script type="text/javascript">
jQuery.noConflict();
$(document).ready(function () {
$.colorbox({
width: 500,
height: 600,
href: "#colorbox_text"
)};
});
</script>
</head>
In a post, I placed the html:
<div id="colorbox_test" style="border: 1px solid black">
<p> This is supposed to display when the colorbox function is called </p>
</div>
No box is displaying when any of the posts load. Do I need to specify a location? Or is it errors in the code?
I think your code is wrong. Try
$('#colorbox_test').colorbox({width: 500, height: 600});
You'll also want to get familiar with your browser's javascript console for debugging things in the future.
I am using mediaelement.js plugin for WordPress (v2.1.7) and want to display a video with this beautifull "Backlight" style which you can see
here in action:
http://mediaelementjs.com/examples/?name=backlight
On this page there are two setup instructions which I guess is only for the non-Wordpress version:
I. Add Plugin Script
<script src="jquery.js"></script>
<script src="mediaelement-and-player.min.js"></script>
<link rel="stylesheet" href="mediaelementplayer.css" />
<!-- here's the plugin -->
<script src="mejs-feature-backlight.js"></script>
Ok to achieve this I added this script:
<script type='text/javascript' src='<?php echo bloginfo('template_url'); ?>/js/mejs-feature-backlight.js></script>
in my header.php file of my theme & copied the file "mejs-feature-backlight.js" in the folder .../wp-content/themes/themename/js .
The second instruction says the following:
II. Include the plugin in the features list
jQuery(document).ready(function($) {
// create player
$('#player1').mediaelementplayer({
// add desired features in order
features: ['playpause','current','progress','duration','volume','fullscreen','backlight'],
// the time in milliseconds between re-drawing the light
backlightTimeout: 200
});
});
I am not really sure where to copy this code-snippet. So while just guessing I copied it in the file: "mediaelement-and-player.js" which seemed to be the best choice for me in this situation.
But now when I try to post a video
which shortcode I have to use? I have tried the following:
[video src="http://mysite.com/mymedia.mp4" width="640" height="360" backlight="true"] or
[video src="http://mysite.com/mymedia.mp4" width="640" height="360" id="player1"]
But sadly it do not work. The Video plays fine but I do not see any backlight...
Any help would be greatly appreciated.
First off,
<script type='text/javascript' src='<?php echo bloginfo('template_url'); ?>/js/mejs-feature-backlight.js></script>
is wrong. It should be:
<script type='text/javascript' src='<?php bloginfo('template_directory'); ?>/js/mejs-feature-backlight.js></script>
or
<script type='text/javascript' src='<?php echo get_bloginfo('template_directory'); ?>/js/mejs-feature-backlight.js></script>
Secondly the id for the video player must match the ID in:
jQuery(document).ready(function($) {
// create player
$('#player1').mediaelementplayer({
// add desired features in order
features: ['playpause','current','progress','duration','volume','fullscreen','backlight'],
// the time in milliseconds between re-drawing the light
backlightTimeout: 200
});
});
that is "#player1". If you can dynamically generate the ID and put in the script then you are fine. Hence the location of the script should be in the same page (or php file if required) as the file that generates the video player not in an external JS file.
Hope that helps.