share` libraryto use Facebook share button with react and this is the code
render(){
var url = `http://localhost:3000/${this.props.match.params.id}/${this.props.match.params.name}`
return (
{/*some other codes*/}
<FacebookShareButton url={url} quote={"გააზიარე"} className="share">
<FacebookIcon size={32} round={true}/>
</FacebookShareButton>
)
}
but it does not work, I mean it opens facebook window but showing some error
about domain name, i think this problem is common, because i did everything according to documentation. what is problem?
You cannot share a localhost link, that link is only available on your own computer. Shared URLs need to be accessible by Facebook in public.
Related
I test on my local environment the plugins react-messenger-customer-chat.
I just installed the plugin and insert this folowing code in my render view
render() {
const { src, title, tracks, scrollTop } = this.state;
return (
<div id="lz-app">
<Header scrollTop={scrollTop}/>
<main className="main">
<MessengerCustomerChat
pageId="xxxxxx"
appId="xxxxxx"
/>
</main>
<Footer/>
</div>
</div>
);
}
When run my react app , i have the error :
Refused to frame 'https://web.facebook.com/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors https://web.facebook.com".
How I resolve this issue please?
Thanks
I found the solution here
Solution here
https://www.youtube.com/watch?v=8e_4KIj4jBs
You need to whitelist your domain in the Facebook page settings. To do this, navigate to: Your FB Page > Settings > Advanced Messaging > White-listed domains and enter your domain here.
I would like to know how when launching my native react application, the application redirects me to a specific website
Example when I launch the application, I am redirected to https://www.google.com/ in the default browser
Thank you
yeah, easily make your main page a full page WebView and give the url to it
for more info check this link
const App=()=>{
return(
<View style={{flex:1}}>
<WebView style={{flex:1}}/>
</View>
)
}
i want to restrict page with url say "myurl/view". Only admin users can view this page and other users cannot access this page.
Currently when view button is clicked it redirects to url "/view". and this view button is visible only to admin users.
below is my code,
render = () => {
const admin = //some logic here and this admin value is boolean;
return (
<>
{admin && <a href="/view">
<button>View</button>
}
</>
);
}
As seen from above code this button is visible only to admins and clicking it will redirect to "/view".
now when user who is not admin types "/view" it gets him to the same page which he is not supposed to view.
how can i restrict this access using react router. i am doing this for the first time and not sure how to do this. could someone help me with this. thanks.
You can use redirect component from react-router-dom. Here is the documentation page. This is the example usage based upon your situation.
<Route exact path="/view">
{isAdmin ? <AdminPage /> :<Redirect to="/" />}
</Route>
FYI, this is how you import it
import { Redirect } from "react-router-dom";
store a jwt token and verify the token on backend and see if the token corrsponds to the connected account trying to access url. If token is owned by an admin, return admin page otherwise an error page appear.
I'm using google oauth with React js and it is loading google account and
after i click on my profile popup get closed.
my code chunk
<GoogleLogin
clientId={GCLIENT_ID}
buttonText="Google Login"
onSuccess={() => this.googleResponse}
onFailure={() => this.googleResponse}
cookiePolicy={'single_host_origin'}
/>
Tried all suggestions given on the net. Still it seems not working. Appreciate your help.
onSucces={() => this.googleResponse} does not call your googleResponse method, it returns it to the caller of the function.
I recommend you change your code as follows:
<GoogleLogin
onSuccess={this.googleResponse}
onFailure={this.googleResponse}
/>
I am not able to share image on twitter using react-share. My code is :
<TwitterShareButton
url={window.location.href}
title={props.data.breadcrumb}
imageURL={props.data.product_info.image_path}
children={<TwitterIcon size={32} round={true} />}
/>
image is being loaded from api.
i have changed imageURL to media and it is still not working.
Can i share image or not?
Seems like you could share this as a base64 url from this response https://github.com/react-native-community/react-native-share/issues/119 which is pretty cool and easy.
So basically set the url prop:
url: "data:image/png;base64,<base64_data>"