I have created a facebook app with subscription.
When the user opens the app, there is a button called "SUBSCRIBE". When it is clicked, the javascript function completePayment(), is called. The facebook popup with subscribe appears. However, there is a big problem. If I change the og:image URL and set the price to let's say 10.00 USD and the billing period to 1 month and I upload the file to the server and then I click on the SUBSCRIBE button, I can still see the subscription page saying 5.00 USD/week and the image is blank.
It's like everything remained the same way that it was when I first set the data, even though I updated all the data from https://www.mydomain.com/_product.php , with the new values. I even logged out and relogged in, and still no changes are reflected.
I even emptied the _product.php page and uploaded it to the server and the subscription still works and shows 5.00 USD/week and the image is blank.
Any ideas on how to fix this?
I have this code on the main page:
<a href="#" onclick="completePayment()">
<img src="https://www.**********.com/subscribe.png" alt="Subscribe" title="Subscribe" style="vertical-align: top"/>
<script src="https://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
FB.init({
appId:'2***********6',
cookie:true,
status:true,
xfbml:true
});
function completePayment(){
var obj = {
method: 'pay',
action: 'create_subscription',
product: 'https://www.mydomain.com/_product.php'
};
FB.ui(obj);
}
</script>
</a>
This is the HTML code from the 'https://www.mydomain.com/_product.php' page:
<html>
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# fbpayment: http://ogp.me/ns/fb/fbpayment#">
<meta property="og:title" content="********* Subscription" />
<meta property="og:image" content="https://s-static.ak.fbcdn.net/images/devsite/attachment_blank.png" />
<meta property="og:description" content="****** Subscription" />
<meta property="fbpayment:price" content="5.00 USD" />
<meta property="fbpayment:alternate_price" content="3.49 EUR" />
<meta property="fbpayment:alternate_price" content="3.49 GBP" />
<meta property="fbpayment:trial_duration" content="7 days" />
<meta property="fbpayment:billing_period" content="1 week" />
<meta property="fb:app_id" content="2*************6" />
<meta property="og:url" content="https://www.mydomain.com/_product.php" />
<meta property="og:type" content="fbpayment:subscription" />
</html>
The facebook page have a looong if not semi permanent cache about share content:
3 options are possible:
1) try to clear the page cache on: https://developers.facebook.com/tools/debug
but you will fall in the same problem next time you share the page
2) add a dynamic parameter to your url (https://www.mydomain.com/_product.php?q=123), than you will have a unique value associated with this url, but you need to set the og for this specific url with a php_get on the parameter. If you have few value you can make it manually, on the other hands if you have more value or dynamic value you need a DB table to store the data with the link url and the associated og and get the value in the php_get
3) Clear the cache programatically by re-scraping it. See: https://developers.facebook.com/docs/payments/product?locale=en_GB#scraping-object
I've done somthing similar on my site but only with random generated value: http://www.paris-web.it/test.html
Related
I am working on a simple Facebook quiz application to learn React and NextJs.
The issue I am facing is with Facebook tags, when I share the user results It shows the quiz question page meta tags Because Facebook crawler renders the html before I add the new meta tags(The meta tags with answers base on user's provided data). How can I add the new description to the meta tags. Because the description is only available after the user click find my results button.
I am using react-share and NextJs Head to add meta tags
So, if the ShareResult variable has data load the results page otherwise load the question page
{ShareResult ? (
<QuizResult response={ShareResult} />
) : (
<CurrentQuiz id={props.query.playquiz} />
)}
Inside CurrentQuiz I load the Quiz to play and inside QuizResult I show the Results.
QuizResult page has all meta tags using next/head from NextJs
<Head>
<title>Your Results</title>
<meta property="og:url" content="http://testurl.com" />
<meta property="og:type" content="article" />
<meta
property="og:title"
content="When Great Minds Don’t Think Alike"
/>
<meta
property="og:description"
content="How much does culture influence creative thinking?"
/>
<meta
property="og:image"
content="http://static01.nyt.com/images/2015/02/19/arts/international/19iht-btnumbers19A/19iht-btnumbers19A-facebookJumbo-v2.jpg"
/>
</Head>
But this head is not generated from Server Side Because each user answer will depend on users data.
How can I add this Head so the Facebook crawler can read it?
Its my second day learning Server side rendering.
So after searching and trying many things i redirected the user to a new page using
Router.push({
pathname: "/result/quizshare",
query: {
name: ShareResult.name,
imageurl: url,
quizid: props.query.playquiz,
},
On the next page i get the props from server side rendering
export const getServerSideProps = async ({ query }) => {
return { props: { query } };
};
export default QuizShare;
Also added meta tags With NextSeo
I want to add my current url inside a meta tag for content value, currently its incorrect using some objects that are pointing at the wrong url.
<meta property="og:url" content="${request.requestURL.toString}" />
This returns the wrong url, this tag is inside a component that is used in many other pages through out the site, so its recycled and i cant just hardcode the url.
This is what i tried to do with some javascript but it is not working and i believe it runs the script before it knows what url it is in .
<script>
var currentLocation = window.location;
</script>
<meta property="og:url" content="${currentLocation}" />
but it does not return the current location
it just shows this when i do view page source
it does not even show the content attribute
<meta property="og:url"/>
If i inspected i can see the url being reference in the variable
html does not process javascript...it is a static language. You need to set it with the script
<meta id="meta-location" property="og:url" content="" />
<script>
document.querySelector('#meta-location').setAttribute('content', location.href)
</script>
You can try something like this, with this you will achieve the full url in your meta tag.
<meta property="og:url" content="${request.scheme}://${request.serverName}:${request.serverPort}${currentpage.path}.html" />
You'll have to run your script after your meta tags are loaded since JS edits the DOM after its initialized. Get the meta by property selector like so:
<meta property="og:url" content="" />
<script>
document.querySelector('meta[property]="og:url"').setAttribute('content', location.href)
</script>
or you can use the name:
<meta name="url" property="og:url" content="" />
<script>
document.querySelector('meta[name]="url"').setAttribute('content', location.href)
</script>
Try using Java Classes for business logic (whether sling model or extending WCMPojo class)
I had similar functionality with canonical tags. What I did is returned a string (Url) from My Model and updating it acc to the given condition.
String url;
// getter of url
#PostConstruct
public void afterCreated() {
url = url + domainName + slingRequest.getRequestURI();
or
url = slingRequest.getRequestURL().toString();
or
url = "Any modification you like";
}
in HTML
<sly data-sly-use.tagModel="Full class name" >
<meta property="og:url" content="${tagModel.url}"/>
</sly>
This way you can debug easily and modify it accordingly.
Hope this helps.
Select the meta tag using .querySelector()
Set window.location.href (Your current URL) as the content of the
meta tag using .setAttribute()
<meta name="url" property="og:url" content="www.sample.com" />
<script>
document.querySelector("meta[name=\"url\"]").setAttribute("content", window.location.href);
</script>
This post is just to learn something, Recently I came across a domain called as www.content-queen.me/PtWkz in a page from facebook.com, on clicking the post with this link it redirected me another domain http://www.wittyfeed.com/story/18644/when-9-cops-sat-down-at-red-robin-the-waitress-realized-something-is-terribly-wrong?utm_source=undefined&utm_medium=SOCIAL&utm_campaign=33-campaign&utm_hash=PtWkz&i=2...Initially I dint see it, but the next time I did with another url, the same thing happened..so my question is how to do it, I know how create a redirect, as it can be done in .htaccess, but this kind of redirect is very new and interesting, And I even tried to dissect the code and found this source code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<meta charset="UTF-8">
<title>When 9 Cops Sat Down At Red Robin, The Waitress Realized Something Is Terribly Wrong</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="article" />
<meta property="og:title" content="When 9 Cops Sat Down At Red Robin, The Waitress Realized Something Is Terribly Wrong" />
<meta property="og:description" content="You never know when any deed done by you can make anyone's day. Hence, being on the good side of the threshold is always preferable. Jessica Dunbar definitely understands the effect good actions have and she is definitely doing everything the right way. Especially, when it is about men in uniform. When she notices a group of cops sitting in her section, this happens." />
<meta property="og:url" content="http://www.content-queen.me/PtWkz" />
<meta property="og:image" content="http://cdn.wf-media.com/18644/pvoaelaw7buvswooe47x.jpeg" />
<meta property="og:site_name" content="www.content-queen.me" />
<meta property="article:section" content="Pictures" />
<a href="https://www.viral9.com/tr_hs_vs/PtWkz" id='myLink'></a>
<style type="text/css">
#myLink {
display: none;
}
</style>
</head>
<body>
<div id="output">
</div>
</body>
</html>
<script type="text/javascript">
// view_count_update();
function view_count_update()
{
var jUTM = "utm_source=SOURCE&utm_medium=referral&utm_campaign=CAMPAIGN&utm_hash=HASH";
var redirect_url = "http://www.wittyfeed.com/story/18644/when-9-cops-sat-down-at-red-robin-the-waitress-realized-something-is-terribly-wrong?utm_source=SOURCE&utm_medium=SOCIAL&utm_campaign=33-campaign&utm_hash=PtWkz&i=2";
redirect_url = redirect_url.replace("SOURCE", document.referrer.split('/')[2]);
window.location = redirect_url;
}
function myFunc(){
}
//hello
</script>
<script>
try{
(function(){
var d = {
'user_id' : "33",
'url_id' : "2609257" ,
'advertiser_id' : "1",
'user_agent' : navigator.userAgent,
'campaign_id' : "18362" ,
}
$.ajax({
url: "http://www.asapoo.com/mysql_testing",
type:'GET',
data: d,
success : function(data) {view_count_update();},
error : function(){ view_count_update();},
complete: function() {view_count_update();},
timeout : 2000
});
})();
}catch(e){ view_count_update(); }
</script>
<script src="//c.fqtag.com/tag/implement-r.js?org=T6tuwESp3TrUwruYu4eZ&p=NOTSET&a=33&cmp=PtWkz&rt=display&sl=1&fmt=banner&ctu=http%3A%2F%2Fwww.wittyfeed.com%2Fstory%2F18644%2Fwhen-9-cops-sat-down-at-red-robin-the-waitress-realized-something-is-terribly-wrong%3Futm_source%3DSOURCE%26utm_medium%3DSOCIAL%26utm_campaign%3D33-campaign%26utm_hash%3DPtWkz%26i%3D2&fq=1"></script>
I hope there will be guys who would have done this here and would like to learn how to do it.
That code is pretty much it, really. The redirects are coming from a site set up just for that. It most likely has a database driving it, mapping those random strings of letters to sites. Then it had a template for the page you posted here where it fills in values from the database.
You can see in the code where it updates a page view counter. Then, right after that it sets window.location to where they want you to go, which makes the browser load the page.
This is called a url shortener, you need a back-end script to do the redirect.
The application works as follows, when a request for www.content-queen.me/PtWkz, it will analyze the url. and take the random string PtWkz as a key, this key is connected to the orginal url and the relation stored somewhere in database or cache memory.
What the script do is to match the short string to the orginal url and send to our browser http redirect 302.
There are some feathers to the shortener like you can change the destination the original url with keep sharing the short url.
The back-end script can be written in all programing languages and scripts, you may use python or php for it.
There are many online url shortener services like goo.gl and bitly.com.
I had a working share dialog until 2 days ago and now all of a sudden it doesn't work anymore. No changes were made on my side, not in the code, and not in the developer center.
Suddenly, clicking the share button opens a blank popup instead of the share dialog, even though the URL of the popup is correct. And when I reload the popup, it shows the dialog correctly!
For simplicity, I have created a test page within my app containing only the share button. Here is the code of the page:
<!DOCTYPE>
<html>
<head>
<script src="https://connect.facebook.net/en_US/sdk.js"></script>
<meta property="fb:app_id" content="453494284796333" />
<meta property="og:type" content="fircikonline:share" />
<meta property="og:url" content="http://light-speed-games.com/apps/sharebuttons/sharebutton.php?id=58667&desc=Igraj%20i%20ti%20Fircik%20besplatno%20onlajn,%20zabavi%20se%20i%20takmi%C4%8Di%20sa%20prijateljima.&img=https://light-speed-games.com/apps/fircik/images/logo125.png&title=Pobedio%20sam%20u%20Firciku!&url=https://apps.facebook.com/fircikonline/&aid=453494284796333?id=4&desc=Igraj i ti Fircik besplatno onlajn, zabavi se i takmiči sa prijateljima.&img=https://light-speed-games.com/apps/fircik/images/logo125.png&title=Pobedio sam u Firciku!" />
<meta property="og:title" content="Pobedio sam u Firciku!" />
<meta property="og:image" content="https://light-speed-games.com/apps/fircik/images/logo125.png" />
<meta property="og:description" content="Igraj i ti Fircik besplatno onlajn, zabavi se i takmiči sa prijateljima." />
</head>
<body style='padding:0;margin:0;'>
<div id="fb-root"></div>
<script>
FB.init({
appId : '453494284796333',
xfbml : true,
version : 'v2.2'
});
function share() {
FB.ui({
method: 'share_open_graph',
action_type: 'fircikonline:share',
action_properties: JSON.stringify({
type: 'fircikonline:share',
object: 'http://light-speed-games.com/apps/sharebuttons/sharebutton.php?id=58667&desc=Igraj%20i%20ti%20Fircik%20besplatno%20onlajn,%20zabavi%20se%20i%20takmi%C4%8Di%20sa%20prijateljima.&img=https://light-speed-games.com/apps/fircik/images/logo125.png&title=Pobedio%20sam%20u%20Firciku!&url=https://google.com&aid=453494284796333?id=4&desc=Igraj i ti Fircik besplatno onlajn, zabavi se i takmiči sa prijateljima.&img=https://light-speed-games.com/apps/fircik/images/logo125.png&title=Pobedio sam u Firciku!',
href: 'https://google.com'
})
});
}
</script>
Share now
</body>
</html>
This is the URL of the popup: click here
This is the actual share button with the real URL, app ID and everything. The share button will not work for you because you are not a user of the app, but if you give me your FB ID I will add you as a test user and you can test it yourself.
I'm not getting my hopes up, but does anyone have any idea whatsoever what Facebook is up to now and how I can work around it?
Ideally I would like to get this to work properly, but if not possible for whatever insane reason there may be, then are any of the following hacks possible:
1) load the share dialog once in an invisible iframe, then load it again in the popup hoping the second one will work?
2) make the API return the URL so I can load it in an invisible iframe directly before showing the popup, again hoping the second one will work?
3) reload the blank popup?
4) fire off the API twice but somehow force it to open in the same popup instead of loading a new one the second time?
Get your URL working here and you’ll be back to good.
I'm trying to add an AddThis toolbox dynamically. Twitter & email receive some variables from the sharing configuration file, but the Facebook Share gets no info from there.
What am I missing?
HTML:
<span class="toolbox1 addthis_toolbox">
<a class="addthis_button_facebook"></a>
<a class="addthis_button_twitter"></a>
<a class="addthis_button_linkedin"></a>
<a class="addthis_button_email"></a>
</span>
JS:
toolbox_obj = $('.toolbox1').get(0);
addthis.toolbox(toolbox_obj,sharing_config,{title: 'aaa'});
You may try this
HTML
<span class="toolbox1 addthis_toolbox"></span>
JS
var tbx = $(".toolbox1").get(0),
svcs = {facebook: 'Facebook', twitter: 'Twitter', linkedin:'Linkedin', email: 'Email'};
$.each(svcs, function(k, v){
$('<a></a>', { class:'addthis_button_'+k }).appendTo(tbx);
});
Working Example Here..
As written on AddThis documentation:
Some services, most notably Facebook and LinkedIn, do not use
parameters we send to them. Rather, they use meta tags to determine
the URL, title, and description to share.
some services (Facebook and Linkedin, for example) just ignore those configurations info because grab data from the Open Graph metatags.
So you should add Open Graph metatags to your HTML (try reading this useful resource) and, if you encounter some problem with AJAX loaded content, maybe you can solve by forcing the url via the specific addthis method (obviously after the new content has been loaded):
addthis.update('share', 'url', window.location.href); // re-parse the url
addthis.ready(); // re-render the buttons.
Now the Share via Facebook will correctly gain its data from the open Graph metatags in page.
This has been a good resource to solve a similar problem I faced:
AddThis buttons wont update to include fragment (#Hash Tag)
Hope this can help, bye!
<HEAD>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
<meta property="og:title" content="Your Title" />
<meta property="og:type" content="website" />
<meta property="og:image" content="Your Thumbnail Image Link" />
<meta property="og:url" content="Your URL" />
<meta name="description" content="Your Description" />
<HEAD>
<a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.php">Share</a>