Cant figure out how to add FacebookMessengerShareButton from react share.
FacebookShareButton works with no issues, but i need Messenger button.
According to docs
https://www.npmjs.com/package/react-share
I need to add
appId (string): Facebook application id
however, i am not sure what id can i put there since page will be shared by other users.
Demo doesnt work as well. This is the error message:
Sorry, this content isn't available at the moment
Has anyone succeeded in adding facebook messenger share button?
Cheers!
Related
I create one of my own project which is DevConnector in React. This is a MERN stack project. In this profile picture of the user set on gravatar based email address. Now I have to set a GitHub profile picture as a user profile picture. One of my friends suggests me to use Github API ("https://api.github.com/users/${username}") and get avatar_url instead of gravatar.url.
Now the question is how to use this API in my project.
Here is my GitHub link: https://github.com/urjit2498/DevConnector
Please check this repo and give me some solution to how to use it in my code.
There's an undocumented trick with how avatars are created that you could try:
find your GitHub User ID - it' in the response from https://api.github.com/users/{username}
test the URL in a browser - https://avatars2.githubusercontent.com/u/{id}
if that returns the avatar you expect, you can use that in your project
The avatar_url is the canonical value here and may change down the track, but that might help achieve what you're trying to do today.
I have a problem with my first PWA.
I have created one with reactjs and configured good manifest.
I follow step by step google guide.
PWA, works perfectly, and i see "add to home button".
After QA i wanted to publish it in store.
I used https://appmaker.xyz/pwa-to-apk.
Now i have app publish in the store but when i open it, i see a browser toolbar and i can't use it as a native app.
Someone can help me?
How about using TWA (Trusted Web Activity)?
Using Trusted Web Activities
This can be achieved by proving that the app and the web trust each other.
If you can prove it, you can prevent the browser toolbar from being displayed.
I'm sorry if you don't get the answer you want.
I am using the below Share Plugin of LinkedIn in my ReactJS app:
<script src="https://platform.linkedin.com/in.js" type="text/javascript">lang: en_US</script>
<script type="IN/Share" data-url="https://www.linkedin.com"></script>
From LinkedIn Docs: https://learn.microsoft.com/en-us/linkedin/consumer/integrations/self-serve/plugins/share-plugin
It is working completely fine on Chrome/Firefox/Safari. But, on clicking the LinkedIn Share button (generated by the above scripts), the LinkedIn Share Popup appears and I get an error in my app console which says:
[object Error]: {description: "[Messenger] Required property 'target'
was not provided", message: "[Messenger] Required property 'target'
was not provided", nr#seenError: true, stack: "Error: [Messenger]
Required property 'target' was not provided at Anonymous function
(https://platform.linkedin.com/xdoor/scripts/in.js:7:55143) at
Array.prototype.forEach (native code) at t
(https://platform.linkedin.com/xdoor/scripts/in.js:7:54936) at e
(https://platform.linkedin.com/xdoor/scripts/in.js:7:56462) at e
(https://platform.linkedin.com/xdoor/scripts/in.js:7:34661) at value
(https://platform.linkedin.com/xdoor/scripts/in.js:18:23834) at s
(https://platform.linkedin.com/xdoor/scripts/in.js:18:38221) at
nrWrapper
([MY_SITE_LINK_ADDRESS]:9:16587)"}
Note: I hid the [MY_SITE_LINK_ADDRESS].
The problem here seems to be that you're relying on the plugin's JS, CSS, and HTML to handle every browser. Take a look: Here's someone else posting in 2018 having the same exact problem, Issue on IE with LinkedIn Share plugin. And, officially from LinkedIn, if you want this plugin to work, you need to ask your users to do this:
Open Internet Explorer.
Click Tools and select Compatibility View Settings.
Uncheck the box next to "Display all websites in compatibility view".
Click Close.
Is it reasonable to ask your users to reconfigure their browser just to be able to click one, single button on your website? Answer: No.
You don't need to rely on the LinkedIn Share Plugin. All you really ought to need is...
https://www.linkedin.com/sharing/share-offsite/?url={url}
Then making sure it works cross-browser is in your hands.
Source: Microsoft LinkedIn Share URL Documentation.
Sure, everyone says: Don't Reinvent the Wheel! I totally agree! But when you find a car that has square, cubic wheels, then maybe you want to reconsider!
If you are interested in a regularly maintained GitHub project that keeps track of this so you don't have to, check it out! Social Share URLs
I'm implementing an application using the full MEAN stack.
I created a login page to signup with facebook to be able to show a profile page. But I discovered some problems. For this reason, I created a smaller version of my webapp, maintaining the same project structure.
The complete code, executable (only replacing "client id" and "secret") with "npm install" and after "nodemon" is available here: https://github.com/Ks89/MEAN-OAuth_Example
If I'll call (with a browser) the rest API that I created to login with facebook at "http://localhost:3000/api/auth/facebook", everything will be ok!
But if I'll want to do the same thing, clicking on the "Login" button, I'll receive the error as in figure:
I know that the problem is related to CORS, but how can I'll fix this in my application, maintaining the same project structure?
I don't want to put the "rest path" inside the HTML. I tried for many days different solutions without success.
If you want, experiment directly on my application that I created exactly to write this question ;).
If really necessary, I'll able to post the entire source code here, but I prefer an organized and executable code into a repository for this particular question.
Please, give me some ideas and hopefully a solution, because I'm really blocked.
The example routes from the passport-facebook repo are intended for multipage apps, not ajax requests. If you look at what those routes are doing, /auth/facebook is just a redirect to Facebook where the user is expected to log in if necessary and authorize your application. When you make that same request from angular, it follows the redirect and tries to load the Facebook page, but the browser blocks you as your console screenshot shows. CORS would be relevant if Facebook wanted to allow you to request their login form across origins, but they don't because that would basically make you a phisher.
It looks like you're trying to handle authentication without leaving the page, but at some point you're going to need the user to leave your site and be redirected to Facebook in order to complete the OAuth flow. You can either open a pop-up containing the Facebook OAuth dialog (it looks like this is what the Facebook JavaScript SDK does by default) or just use your app's current tab with something as simple as <a ng-href="{{facebookOauthUrl}}">Log in with Facebook</a>.
I am using sharekit SDK for twitter and facebook sharing. It seemed to be working fine, so we delivered the product. Now, we found a problem like There was a problem to accessing Twitter while the Facebook sharing works fine.
I have searched and found this link
and
Twitter Integration issue using sharekit in ios?
I set the callback to my app's website. Now I am redirecting to the website after login to the twitter through app. I don't know how to pass an oauth_callback value to oauth/request_token.
Does anyone know how to solve this issue?
https://github.com/ShareKit/ShareKit/pull/692/files Try this link.I hope it will help you