We Keep Coding

Wait for firebase data before creating twitter metadata

I'm trying to add a user profile picture and username to a twitter card when someone shares their profile link. For that I'm doing this on the guest-profile page:
getUser() {
this.authService.getSingleUser(null, this.username).then(user => {
if (user && !this.user) {
const image = user?.photoURL != 'assets/no-avatar.png' ? user?.photoURL : 'https://nonicapp.web.app/assets/no-avatar.png'
this.meta.updateTag(
{ name: 'og:title', content: user?.displayName + ' on NONIC' }
)
this.meta.updateTag(
{ name: 'og:description', content: 'Ask ' + user?.displayName + ' anonymous questions!' }
)
this.meta.updateTag(
{ name: 'og:image', content: image }
)
this.meta.updateTag(
{ name: 'twitter:title', content: user?.displayName + ' on NONIC' }
)
this.meta.updateTag(
{ name: 'twitter:description', content: 'Ask ' + user?.displayName + ' anonymous questions!' }
)
this.meta.updateTag(
{ name: 'twitter:image', content: image }
)
(...)
I'm updating the tags because it already exists in case the link is being shared and not connected to a user account.
Problem is, twitter reads metadata long before my data is fetch from firebase so the twitter card just comes as default. Any way I can make twitter wait for me to fetch and update the meta tags before it reads it?

Collecting the ID from a user-submitted Youtube URL in Javascript (for a Meteor project)

I'm looking to embed Youtube videos into a Meteor project, using urls submitted by users. I want to collect only the 11-character ID at the end of users' Youtube URLs. Someone seems to have figured something out for a browser's current url here. I just need a similar solution for a url provided in a form:
How to get anything following the domain in a url, using Javascript
Can anyone help this insert statement do that? Any help would be much appreciated.
Template.vidForm.events({
'submit #vid-form' : function(e, t) {
var title = t.find('#vid-title').value
, url = t.find('#vid-url').value;
if (isNotEmpty(title)
&& isNotEmpty(url))
{
vids.insert({user: Meteor.userId(), username: Meteor.user().username, date: new Date(), title: title, url: url}, function(err){
if (err)
Alerts.add('Submission error: ' + err.reason, 'warning');
else {
Alerts.add('Your video has been accepted.', 'success');
}
}
);
}
return false;
}
});

Here's what I settled on. I made use of one of the answers from here: How to replace multiple strings with the .replace() Method?
Template.vidForm.events({
'submit #vid-form' : function(e, t) {
var title = t.find('#vid-title').value,
youtube = t.find('#vid-url').value,
url = youtube.replace(/http:|https:|www.|youtube.com|watch\?v=|youtu.be|\//g,'');
if (isNotEmpty(title)
&& isNotEmpty(url))
{
vids.insert({user: Meteor.userId(), username: Meteor.user().username, date: new Date(), title: title, url: url}, function(err){
if (err)
Alerts.add('Submission error: ' + err.reason, 'warning');
else {
Alerts.add('Your video has been accepted.', 'success');
}
}
);
}
return false;
}
});

getVideoId = function(url) {
var a = document.createElement('a');
a.href = url;
return a.pathname;
}
Template.vidForm.events({
'submit #vid-form' : function(e, t) {
e.preventDefault();
var title = t.find('#vid-title').value
, url = getVideoId(t.find('#vid-url').value);
if (isNotEmpty(title)
&& isNotEmpty(url))
{
vids.insert({user: Meteor.userId(), username: Meteor.user().username, date: new Date(), title: title, url: url}, function(err){
if (err)
Alerts.add('Submission error: ' + err.reason, 'warning');
else {
Alerts.add('Your video has been accepted.', 'success');
}
}
);
}
}
});

Customizing 'Facebook Share' Content

I am editing this question so that it makes more sense than what I originally wrote.
I am implementing the code below in order to add a Facebook "Share" button to my website. My problem is that this script calls for actual values for 'link', 'picture', 'name', 'caption', and 'description' directly in the script.
How can I change this code so that it pulls this information from my website automatically. For example, I need it to pull the URL from the current and assign it to 'link'. Another example: instead of providing the URL for the picture, I want to point the code to a certain class.
<script>
FB.init({appId: "YOUR_APP_ID", status: true, cookie: true});
function postToFeed() {
// calling the API ...
var obj = {
method: 'feed',
link: 'https://developers.facebook.com/docs/reference/dialogs/',
picture: 'http://fbrell.com/f8.jpg',
name: 'Facebook Dialogs',
caption: 'Reference Documentation',
description: 'Using Dialogs to interact with users.'
};
function callback(response) {
document.getElementById('msg').innerHTML = "Post ID: " + response['post_id'];
}
FB.ui(obj, callback);
}
</script>
This is from http://developers.facebook.com/docs/reference/dialogs/feed/

window.location.pathname will only return the path portion of a URL, you also need to add your domain also. window.location.href will return this. Pretty easy to change your code to do this:
<script>
FB.init({appId: "YOUR_APP_ID", status: true, cookie: true});
function postToFeed() {
// calling the API ...
var obj = {
method: 'feed',
link: window.location.href,
picture: 'http://fbrell.com/f8.jpg',
name: 'Facebook Dialogs',
caption: 'Reference Documentation',
description: 'Using Dialogs to interact with users.'
};
function callback(response) {
document.getElementById('msg').innerHTML = "Post ID: " + response['post_id'];
}
FB.ui(obj, callback);
}
</script>

Facebook post to wall JavaScript not allowing me to change the "Say something..." text

I am trying to change the "Say something..." text part of a post to feed function of the FB.ui
All else shows but it doesn't change the text in the text area.
My code is below :
function postToFeed() {
// calling the API ...
var obj = {
method: 'feed',
link: 'http://solarhelper.net',
picture: 'http://solarhelper.net/icon',
name: 'Find your result using Solar Helper',
caption: 'Click the link to download the app or get your result online.',
description: 'I could save ' + incomeYear25 + ' over 25 years and save ' + totalCO2Level + ' tonnes of CO2!',
message: 'Testing'
};
function callback(response) {
if (response && response.post_id) {
alert('Post was published.');
} else {
alert('Post was not published.');
}
}
FB.ui(obj, callback);
}
Thanks for your help

Unfortunately, you're not and you will not be able to change this part of a dialog.
I suppose this prevention should restrict event more spam ?

Facebook: Posting to Multiple Friend's Walls Using Multiple Friend Selector and JS SDK

I have tried putting together some code based on some other SO questions and various web tutorials.
The error I am getting is right at the end when I try and post to my friend's walls.
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<p><input type="button" onclick="sendRequestViaMultiFriendSelector(); return false;" value="Recommend friends for another chance to win!" /></p>
<div id="response"></div>
<script>
FB.init({
appId : 'xxxxxxxxxx',
status : true,
cookie : true,
oauth: true
});
function sendRequestViaMultiFriendSelector() {
FB.ui({method: 'apprequests',
message: 'My Great Request'
}, requestCallback);
}
function requestCallback(response) {
// Handle callback here
if (response.request && response.to) {
var request_ids = [];
for(i=0; i<response.to.length; i++) {
var temp = response.request + '_' + response.to[i];
var friend_id = response.to[i];
request_ids.push(temp);
//send message in here
var opts = {
message : 'Message',
name : 'Name',
link : 'http://www.facebook.com/pages/xxxxx/xxxxxxxxxxxxxxx',
description : 'Description here',
picture : 'http://www.example.com/img/some.jpg'
};
FB.api('/'+friend_id+'/feed', 'post', opts, function(response) {
if (!response || response.error) {
// This is the error I am getting:
alert('Error occured');
} else {
alert('Post ID: ' + response.id);
}
});
// end send message
}
var requests = request_ids.join(',');
} else {
alert('Didn't send recommendation to friends');
}
}
</script>

The code is actually working great, it worked as soon as I granted myself the access token in graph api explorer.
Just need to set up my auth dialogue now, lots of fun!
Just thought I'd better answer this incase anyone else runs into the same situation.