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>
Related
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 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}
I want to add the Twitter widget into React, but I don't know where to start or how to do it. I am very new to React JS.
Here is the HTML version of the code:
<div class="Twitter">
<a class="twitter-timeline" href="https://twitter.com/<%= #artist.twitter %>" data-widget-id="424584924285239296" data-screen-name='<%= #artist.twitter %>'>Tweets by #<%= #artist.twitter %></a>
<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>
</div>
And here is what I have so far:
React.DOM.div
className: 'Twitter'
children: [
React.DOM.a
className: 'twitter-timeline'
href: "https://twitter.com/" + artist.twitter
'data-widget-id': "424584924285239296"
'data-screen-name': artist.twitter
children: 'Tweets by ' + artist.twitter
React.DOM.script
children: ...
]
I was planning to add the script where the dots (...) are, but that doesn't work. Thank you for your help.
First load Widget JS in your index.html(before your React scripts). Then in your component, simply do the following. The widget JS will rescan the DOM.
componentDidMount: function() {
twttr.widgets.load()
}
See: https://dev.twitter.com/web/javascript/initialization
This works for me!
Please note that I use React v0.14 and ECMAScript 2015 (aka ES6) with Babel.
index.html (after body tag):
<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>
Twitter component:
const Twitter = () => (
<a href="https://twitter.com/your-twitter-page"
className="twitter-follow-button"
data-show-count="false"
data-show-screen-name="false"
>
</a>
);
Some React Component (that uses Twitter button):
class SomeReactComponent extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<Twitter />
</div>
);
}
}
Or if you want to have a customized button, you can simply do this:
const Twitter = () => (
<a href="https://twitter.com/intent/tweet?via=twitterdev">
<i className="zmdi zmdi-twitter zmdi-hc-2x"></i>
</a>
);
It seems to be much easier to just use Twitter's widgets.js, more specifically createTimeline.
class TwitterTimeline extends Component {
componentDidMount() {
twttr.ready(() => {
twttr.widgets.createTimeline(widgetId, this.refs.container)
})
}
render() {
return <div ref="container" />
}
}
You can load the library directly from https://platform.twitter.com/widgets.js, but they recommend the following snippet:
<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>
More information on setting up the library is here.
It's easy, all you need just use React's componentDidMount hook
{createClass, DOM:{a}} = require "react"
#TwitterWidget = createClass
componentDidMount: ->
link = do #refs.link.getDOMNode
unless #initialized
#initialized = yes
js = document.createElement "script"
js.id = "twitter-wjs"
js.src = "//platform.twitter.com/widgets.js"
link.parentNode.appendChild js
render: ->
{title, content, widget} = #props
a
ref: "link"
className: "twitter-timeline"
href: "https://twitter.com/#{widget.path}"
"data-widget-id": widget.id,
widget.title
TwitterWidget
widget:
id: "your-widget-id"
title: "Your Twitts"
path: "widget/path"
Try to install the react-twitter-embed by doing npm install react-twitter-embed. Once installed, the usage is pretty simple. Take a look at the screenshot below.
Code Sample:
import React from 'react';
import { TwitterTimelineEmbed } from 'react-twitter-embed';
const TwitterTimeLine = () => {
return (
<TwitterTimelineEmbed
sourceType="profile"
screenName="accimeesterlin" // change to your username
options={{height: 1200}}
/>
);
}
export default TwitterTimeLine;
They also have a list of other components that you can use as well.
List of available components
TwitterShareButton
TwitterFollowButton
TwitterHashtagButton
TwitterMentionButton
TwitterTweetEmbed
TwitterMomentShare
TwitterDMButton
TwitterVideoEmbed
TwitterOnAirButton
Here is a link to the npm package https://www.npmjs.com/package/react-twitter-embed
IMHO you should split it down in two.
A part of your code could be somehow rendered in a React component
/**
* #jsx React.DOM
*/
var React = require('react');
var twitterWidget = React.createClass({
render: function () {
return (
<div class="Twitter">
<a class="twitter-timeline"
href={this.props.link}
data-widget-id={this.props.widgetId}
data-screen-name={this.props.screenName} >
Tweets by {this.props.screenName}
</a>
</div>
);
}
});
React.renderComponent(<twitterWidget link="..." widgetId="..." />, document.getElementById('containerId');
Your script tag could be placed, as a separate React component or as normal HTML just above the closing body tag.
class TwitterShareButton extends React.Component {
render() {
return Tweet
}
componentDidMount() {
// scriptタグが埋め込まれた後にTwitterのaタグが置かれても機能が有効にならないので、すでにscriptタグが存在する場合は消す。
var scriptNode = document.getElementById('twitter-wjs')
if (scriptNode) {
scriptNode.parentNode.removeChild(scriptNode)
}
// ボタン機能の初期化（オフィシャルのボタン生成ページで生成されるものと同じもの）
!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');
}
http://qiita.com/h_demon/items/95e638666f6bd479b47b
You can use this React Social Embed Component.
Disclaimer: It is a component created by me.
Install by: npm i react-social-embed.
Usage:
import TweetEmbed from 'react-social-embed'
<TweetEmbed id='789107094247051264' />
/>
There are few interesting solutions out there, but all of those are injecting twitters code to website.
What would I suggest is to create another empty html file just for this widget. Eg. /twitter.html, where you can place all dirty JavaScripts and render widget.
Then when you include:
<iframe src="/twitter.html" />
It will work without any issues. Plus, you have separated external scripts - so it's good for security.
Just add some styling to make it look fine:
twitter.html
html,
body {
margin: 0;
padding: 0;
}
React's iframe
iframe {
border: none;
height: ???px;
}
I knows exactly where is the problem, first you need to understand how does react works.
React is frontend framework, works like all DOM is handled by react, if we directly integrate with DOM then sometimes it very difficult to code, cos React is also Updating that DOM.
As per the Twitter documentation, we cannot add twitter.js after init of web page.
https://dev.twitter.com/web/javascript/initialization
so it better to use some package, react-twitter-embed
Simple step
npm install --save react-twitter-embed
import { TwitterTimelineEmbed } from 'react-twitter-embed';
<TwitterTimelineEmbed
sourceType="profile"
userId={"1029587508445630465"}
options={{height: 400}}
/>
You can check other than timeline integration also using package.
https://romik-mk.medium.com/embed-twitter-timeline-widgets-reactjs-a27cafd7cfb6
I have this simple code That is suppose to alert "I just Tweeted", does not seem to work, i have tried all examples. Even visited this link for help https://dev.twitter.com/discussions/671 but still never worked.
<script>
function alertAfterTweet() {
alert('I just Tweeted')
}
//Bind the custom function with twitter event
twttr.ready(function (twttr) {
twttr.events.bind('click', alertAfterTweet);
});
function jsTweet() {
var urlTW = "https://twitter.com/intent/tweet?text=Text&url=http://example.com";
window.open(urlTW, "", "toolbar=0, status=0, width=650, height=360");
}</script>
Tweet
</script>
Please any help will be appreciated. Thanks
1.First include twitter api
<script>window.twttr = (function (d, s, id) {
var t, js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src= "https://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
return window.twttr || (t = { _e: [], ready: function (f) { t._e.push(f) } });
}(document, "script", "twitter-wjs"));</script>
2.Create the share button using the twitter API and then bind the event (it looks like you want to bind tweet not click):
twttr.ready(function(twttr) {
twttr.widgets.createShareButton(
'your url',
document.getElementById('your-element-id'), {
url: 'your url',
count: 'none',
text: 'your text',
size: 'large',
hashtags: 'your hashtag'
}).then(function(el) {
console.log("Twitter Button created.")
});
twttr.events.bind('tweet', function(event) {
//add ur post tweet stuff here
console.log('tweet');
});
});
There are many options you can set using the API. for more info:
Javascript: https://dev.twitter.com/web/javascript
Events: https://dev.twitter.com/web/javascript/events
By the way, you can also create the button this way:
<a class="twitter-share-button" href="https://twitter.com/share"
data-related="twitterdev"
data-size="large"
data-count="none">
Tweet
</a>
Hope that helps!
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]