How to share a hyperlink to a parametrized view in reactjs - node.js

I created a web-app that uses reactjs. Now the basics of the app are :-
Create Topics/Sub topics.
Display them (this uses react )
Now 2nd task is explained as :-
Show all the topics/sub topics list.
Clicking any of them sends json req and the data is recieved and displayed.
Now I want to share the topic with link , however on clicking any of the topic only one elemnt of the html renders and the url remains the same.
So this is what i want to do -
On clicking , send json req and recieve data ( done )
Change the url ( I want to know if it is possible using the same react page? )

Related

Add sample image in template header in whatsapp cloud API

I am doing a project using WhatsApp cloud API. I need to create a template with a media header. I have created a template with a media header without a sample image and it gets rejected. So I want to create a template with a sample image in Node JS.
Template with a media header
Add sample image for a template
curl -X POST "https://graph.facebook.com/v14.0/{whatsapp-business-account-ID}/message_templates
?name={template-name}
&language=en_US
&category=TRANSACTIONAL,
&components=[{
type:BODY,
text:{message-text}
},
{
type:HEADER,
format:IMAGE,
example:{header_handle:[{uploaded-image-file-url}]}
}],
&access_token={system-user-access-token}"
I want to add a sample image using Node JS (Not manually like the second picture).
header_handle requires a encrypted file upload provided by facebook.
This can be done by calling 2 apis.
First,
We have to create a session for the file to be uploaded.
For creating session refer this
After creating session, we will get session id to upload the original file to it.Response will look something like this:
{"id":"upload:MTphdHRhY2htZW50Ojlk2mJiZxUwLWV6MDUtNDIwMy05yTA3LWQ4ZDPmZGFkNTM0NT8=?sig=ARZqkGCA_uQMxC8nHKI"}
Second,We have to upload the file to
https://graph.facebook.com/v14.0/{above_id}
This will give a response something similar to
{"h":"2:c2FtcGxlLm1wNA==:image/jpeg:GKAj0gAUCZmJ1voFADip2iIAAAAAbugbAAAA:e:1472075513:ARZ_3ybzrQqEaluMUdI"}
Finally,
{header_handle:["2:c2FtcGxlLm1wNA==:image/jpeg:GKAj0gAUCZmJ1voFADip2iIAAAAAbugbAAAA:e:1472075513:ARZ_3ybzrQqEaluMUdI"]}
Should be added during the request to create template.
It worked for me.
See this for better understanding on how to do it.
The answer Provided by Aravindh is correct, you can follow This document from Meta to upload the Image you want.
Just make sure you use a supported type by WhatsApp API ( For WhatsApp Business Platform Cloud API , For WhatsApp Business Platform On-Premises API ) and the upload end point (file-type — The file's MIME type. Valid values are: image/jpeg, image/jpg, image/png, and video/mp4
)
Double Check if you are following exacly the types supported, for example in case of png, you need to set "file_type" to "image/png" no just "png" when creating the upload session.
I have tested it and it works for me.
Hope this helps

How do i do a Contact form hosted in an Azure app using Mailgun?

I finally got my html website working in an Azure App.
Now I want to add a Contact Form.
I have done a simple HTML form that calls the MailGun API but nothing happens when I click submit.
There are no errors showing in the browser.
I followed the instructions here to create the form.
It turned out that I had incorrect settings in
$api_key = 'INSERT_API_KEY_HERE';
$api_domain = 'INSERT_DOMAIN_HERE';
$send_to = 'YOUR_EMAIL';
This became apparent after displaying the error from the Ajax call.
As explained here

Google analytics stores username and password as a part of url

Issue Context:
I am using meteor js for a mobile app.
I have hooked it up with google analytics calls and basically I am using two type of calls:
Screen views
Events
Screen views are just fine, but I'm facing an issue with the events.
When I go to Behavior -> Events -> Screens, in the google analytics dashboard, I can see the URL of every page that has triggered an event under the Screen Name column. My problem is that the page URLs for my login page look something like this:
meteor.local/login?username=*******&password=+++++++&rememberMe=on
Where ******* is an actual username and +++++++ is the corresponding password!
Reason:
Since I have to share this analytics account with multiple people, I do not want this information to be available over here.
Clues:
CLUE 1:
I used to do GET http calls, but I have changed them all to POST and it still has not fixed the issue as I expected it not to pass plain parameters through URL anymore.
CLUE 2:
I've noticed that the default google analytics js framework is working with http and not https. I was wondering if it is calling the analytics server with a GET as well. If so, is there anyway to change that?
CLUE 3:
Here is how I am initiating the GA instance:
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
ga('create', googleKey, 'auto');
CLUE 4:
I have also noticed that these URLs are getting captured very occasionally. E.g. in the pas 12,500 unique events (about 30,000 total events) it has captured just 9 URLs with the username and password. The remaining 12,491 events have
meteor.local/login
OR
meteor.local/--
OR
localhost/--
as the Screen Name.
CLUE 5:
I have also put 4 "search and replace" global filters on the analytics account to search for this string
meteor.local/.*
and replace it with this one
meteor.local/concealedURI
This does not seem to be working either.
I have added this filter on 4 different fields (Since I still really don't know where the URLs are coming from):
Host Name
Page Title
Referral
Request URI
CLUE 6:
This is how I am calling the GA instance to send the event:
ga('send', 'event', 'button', 'click', eventName);
Okay. So, I had to run a lot of experiments and try out different things to solve this issue.
After trying all the things that I have described in the question, I finally found a way to address this problem.
The main cause of this problem was that I was using a google analytics account set to track an App, to capture the data from an app that was built with meteor js (which basically utilizes cordova).
Using meteor means that my app's screens are actually web pages rendered as a mobile app. It seems like meteor uses URLs to navigate through these screens.
On the other hand, google analytics looks at (and captures) the screen name of an app's page, when an event is triggered from that page. In native apps this screen name will be something similar to "About us", "Contact Us", "Home", etc.
Now since a meteor app is not the same, the screen name returned by meteor is actually the URL of the page that has triggered the event.
This does not have anything to do with the http calls (Whether or not they are GET or POST), because it is the local URL used by meteor for navigating that is being passed down to google analytics and not any http calls.
Solutions
1.
If I had the google analytics account set as a web page tracker, I could have access to "Exclude URL Query Parameters" field and I could potentially exclude username and password as was suggested by #Mike and #PhilipPryde in the comments.
However, I needed to use google analytics set as an app tracker. So, this did not work for me.
Failed
2.
I did put a filter on the whole view in the google analytics and searched for meteor.local/.* and replaced that with hiddenURL. The filters on
Host Name
Page Title
Referral
Request URI
did not work.
But when I put the same filter on
Screen Label
field, it worked.
However, this only looked at the screen names returned by screen view hits and not the event. Thus, this did not actually solve my issue either.
Failed
Finally, I had to do this:
There is a method call on GA instance that lets you set different options up. I ended up using this:
ga('set', 'screenName', 'hiddenURL');
This changed the screen name to "hiddenURL". So, I used this before every event and it worked for me.
My code for sending events to google analytics looked like this:
ga('set', 'screenName', 'hiddenURL');
ga('send', 'event', 'button', 'click', eventName);
PS:
This changes the screen name that was showing up in real-time reports of google analytics to "hiddenURL", whenever someone triggered an event. But, it changes back to a screen name as soon as they go to another page. So, it would not also mess with any of your screen view data either, since it is not being captured as a screen view.
Of course that is because, I pass the screen name to my GA instance every time I send a screen view. So it looks like this:
sendScreenViewToGA = function (screenName) {
ga('send', 'screenview', {
'appName': 'Something',
'screenName': screenName,
'appVersion': x.x
});
}
If I had used the screen name, that is being set on the environment tight now, I would have ended up with all my screen names in analytics set to "hiddenURL".
I really hope this post will help others with same issues and save them some time.

Flickr api - call photo sets

I have API key and API secret and i have downloaded the recent library 3.1.
When i use the example mentioned, i get public photos. And the library i am using included this file phpFlickr.php which has all methods.
I am now trying to access the photo sets api, which is not returning anything. And the document says there is no other authentication that is required. please check the code below
require_once("phpFlickr.php");
$f = new phpFlickr("56cc01317fdce40c31c8f66498746c4d");
$sets = $f->photosets_getList();
#sandy : If you want to show flickr slider gallery in your website then you can use pictobrowser its best way to display flickr and Piccasa albums on website.
Using PictoBrowser one can easily embed Flickr and Picasa photostreams in anywebsite. All you need is follow few simple steps given here.
- visit http://pictobrowser.com/
- Click PictoBuilder at the top left corner of the page.
- Enter your Flickr/Picasa username.
- Choose images/ albums.
- Set Tag or Groups.
- It outputs some HTML code
- Copy that HTML code and paste it in your website or blog.

How to provide information in the html link for Facebook open graph api call of "property name" when posting trying to post an action

I am trying to create an html object dynamically with the necessary header information depending on the query string in the link I provide to Facebook. I am hoping that Facebook open graph will call this html link as I provided. However it seems that query string info are not getting passed to my server. Do anyone know how to make this work or what is the more appropriate way to do this. BTW, I am writing my code in Node.js.
To get more info about Facebook open graph api, look here, https://developers.facebook.com/docs/beta/opengraph/actions/.
For example, the link I am trying to pass to Facebook is, "http://xxx-url.com/getFacebookObject?objectId=&description=first dynamic post", so I sent a request with the link as, "https://graph.facebook.com/me/app-name:action-name?object=http://xxx-url.com/getFacebookObject?objectId=&description=first dynamic post". However, when I check the log on the server, I don't see anything in the query string.
Instead of using the query string, you can embed the data in the URL:
http://some-domain.com/getFacebookObject/id/description
Then, depending on what node.js packages you're using, extract the data from the request:
// expess.js style
app.get("/getFacebookObject/:id/:description", function(req, res) {
var id = req.params.id,
desc = req.params.description;
// your code...
});
(See http://expressjs.com/guide.html.)
Sorry, Facebook will strip off all query string information from the URL when they launch your site in the iframe. If it was a page tab app, then you could add it to the app_data query string parameters which in turn gets passed to your iframe's page tab app via the app_data part of the signed_request parameter.

Resources