I have added a tweet button in my app that appears when I land on a page initially or refresh the page but doesn't display the button when I navigate through a link. It only displays the text written within a tag. I can see the difference in the two cases through inspect element.
Tweet
<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>
I have copied the above code from this link https://dev.twitter.com/web/tweet-button
The difference in the two cases:
Case 1: When the button appears:
<iframe id="twitter-widget-0" scrolling="no" frameborder="0" allowtransparency="true" src="http://platform.twitter.com/widgets/tweet_button.7d9dd43d4f18b1bb51cc9d8f0997995e.en.html#_=1427878870272&count=horizontal&dnt=false&id=twitter-widget-0&lang=en&original_referer=http%3A%2F%2Flocalhost%3A3000%2Fusers%2Fedit&size=l&text=Draft%20Picks&url=http%3A%2F%2Fexample.com&via=sometext" class="twitter-share-button twitter-tweet-button twitter-share-button twitter-count-horizontal" title="Twitter Tweet Button" data-twttr-rendered="true" style="width: 140px; height: 28px;"></iframe>
<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>
Case 2: When the button disappears
Tweet
<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>
I will be really thankful if someone figure out how is iframe displayed or removed over here or a proper solution to this. A very many thanks in advance!!
It was basically a turbolink issue. My javascript was not loaded.
Those links on which I did want javascript to work I just added this line of code after link_to tag
data: {no_turbolink: true}
Related
createTweet don't work from angular, I see in chrome -> elements that the script added after 3 sec, if I copy the script that added from the HTML that rendered and run it in console it's working,
so why the twit not showing?
also the result from create twit function is
ZoneAwarePromise {__zone_symbol__state: null, __zone_symbol__value: Array(0)}
footer script in index.html
<script>
window.twttr = (function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0],
t = window.twttr || {};
if (d.getElementById(id)) return t;
js = d.createElement(s);
js.id = id;
js.src = "https://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
t._e = [];
t.ready = function(f) {
t._e.push(f);
};
return t;
}(document, "script", "twitter-wjs"));
</script>
<div id="scripts-footer"></div>
code in component
const element = document.getElementById('scripts-footer');
var script = document.createElement('script');
script.type = 'text/javascript';
var code = ` setTimeout(() => {
twttr.widgets.createTweet('1422119154639949826',document.getElementById('mytwit'));
}, 3000);
`;
script.appendChild(document.createTextNode(code));
element?.parentNode?.insertBefore(script, element);
HTML in component
<div id="mytwit" ></div>
Hello I am using gem 'facebook-messenger' and follow all the steps same given in gem. My requirement is to add send to messenger button in my app I had included following code
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'APP_ID',
xfbml : true,
version : 'v2.6'
});
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk')
);
</script>
<div class="fb-messenger-checkbox"
origin=PAGE_URL
page_id=PAGE_ID
messenger_app_id=APP_ID
user_ref= <%= #order.number%>
prechecked="true"
allow_login="true"
size="large"></div>
It gives me error
Refused to display
'https://www.facebook.com/v2.6/plugins/messenger_checkbox.php?allow_login=true&app_id='APP_ID'&channel=https%3A%2F%2Fstaticxx.facebook.com%2Fconnect%2Fxd_arbiter%2Fr%2FXBwzv5Yrm_1.js%3Fversion%3D42%23cb%3Df379bc53d47b1%26domain%3D3aa1d074.ngrok.io%26origin%3Dhttps%253A%252F%252F3aa1d074.ngrok.io%252Ff2ea378cba3d818%26relation%3Dparent.parent&container_width=1273&locale=en_US&messenger_app_id=219206268600034&origin=https%3A%2F%2Fwww.facebook.com%2Fmy-test-716683128523791%2F&page_id='PAGE_ID'&prechecked=true&sdk=joey&size=large&user_ref=S906106687' in a frame because an ancestor violates the following Content Security
Policy directive: "frame-ancestors https://www.facebook.com".
Please guide me how to resolve this error.
Adding this answer in case anyone else comes across this in the future.
You're getting a CSP error and need to whitelist your domain. Covered here
I'm using Facebook's Comment plugin.
I would like to trigger a custom JS function after a user successfully posts from my site.
Is there a callback / function / method to accomplish this? Is this even possible?
Thanks in advance!
Thanks to this post, the following works, hope it helps someone
//INCLUDE THE SCRIPT FIRST
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId={YOURAPPID}";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//INITIALIZE THE OBJECTS
window.fbAsyncInit = function() {
FB.init({
appId: '{YOURAPPID}',
status: true,
cookie: true,
xfbml: true,
oauth: true
});
//AND THOSE WILL FIRE THE EVENTS :)
FB.Event.subscribe('comment.create',
function (response) {
console.log('create', response);
});
FB.Event.subscribe('comment.remove',
function (response) {
console.log('remove', response);
});
};
I am trying to use the Facebook Javascript SDK, and right now I am just pasting this code into my erb template that has the like button:
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/es_LA/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
However, in the Facebook developer docs, it is said that something like this is prefered direct right after the body open tag:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : 'YOUR_APP_ID', // App ID from the app dashboard
channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel file for x-domain comms
status : true, // Check Facebook Login status
xfbml : true // Look for social plugins on the page
});
// Additional initialization code such as adding Event Listeners goes here
};
// Load the SDK asynchronously
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
So, my question is:
-> Where should I place this code? In my layout or in a Javascript file that using jQuery does all this logic?
put the code into bottom of your main templates eg application.html.erb or base.html.erb[if your have base controller that inherited from application controlller]
Im trying to load the twitter widget api in my ajax loaded page.
I have tryed to load the script in a couple of different ways and Im getting the alert to run each time but not the script itself.
So the first time I load the page, then the script is working, but if I go back to the menu and back to this page, then it doesnt load it?
This is the ajax loaded page.
<div id="twitterwid">
<a class="twitter-timeline" width="320" height="500" href="https://twitter.com/my account" data-widget-id="my widget id number">Loading tweets by #me</a>
<script>
alert("alert is working");
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
</script>
<div>
Any input appreciated, thanks.
All you have to do is: invoke a re-render of the widget tags on the page by calling:
twttr.widgets.load()
Similar question on Twitter Dev Channel
Note: inline script is not executed upon AJAX Load.
See: this SO Q&A for the solution to that.
Add first :
<script>window.twttr = (function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0],
t = window.twttr || {};
if (d.getElementById(id)) return t;
js = d.createElement(s);
js.id = id;
js.src = "https://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
t._e = [];
t.ready = function(f) {
t._e.push(f);
};
return t;
}(document, "script", "twitter-wjs"));</script>
So you can use :
twttr.widgets.load()