not sure but seems I've read this is the unofficial forum to use for Facebook developer questions (and no doubt the source for many solutions in general).
I've recently tried to add a like and comment plugin to the end of my articles on an online newspaper, however, nothing shows up on any browser. I created it as an app (for app id purposes) and created a page for said app.
I've generated the code via this link ( https://developers.facebook.com/docs/plugins ).
Like button example:
added the API call just below the body tag...
<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=XXXXXXXXXXXXXXXX";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
...
and the required html tags...
<div class="fb-like" data-href="http://mywebsite.com/article.php?num=<? echo $number; ?>" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>
I get the following errors via chrome's console...
1)The endpoint used to load this resource has been deprecated.
Please update to the current Facebook JavaScript SDK.
https://developers.facebook.com/docs/reference/javascript/
FB.Share:53
2) Invalid App Id: Must be a number or numeric string representing the application id. FB.Share:53
3) The "fb-root" div has not been created, auto-creating FB.Share:53
4) FB.getLoginStatus() called before calling FB.init().
Any ideas as to why this is happening would be great. I can provide a live link, but preferably only if necessary.
Looks like the old method I was using stopped all calls to the Facebook API. The following line was the culprit...
<script src="static.ak.fbcdn.net/connect.php/js/FB.Share"; type="text/javascript"></script>
Related
I Want to develop a flask navigation bar like Google Contacts.
I Want to Render a particular HTML page inside the red box (as in the picture) when I click each of the navigation buttons (the green box as in picture) without refreshing the page.
I have already tried using
{% extends "layout.html" %}
As #Klaus D. mentioned in the comments section, what you want to achieve can be done using Javascript only. Maybe your question were
How can I send a request to my server-side (to get or fetch some information) and receive back a response on the client-side without having to refresh the page unlike the POST method usually does?
I will try to address the aforementioned question because that's probably your case.
A potential solution
Use Ajax for this. Build a function that sends a payload with certain information to the server and once you receive back the response you use that data to dynamically modify the part of the web-page you desire to modify.
Let's first build the right context for the problem. Let's assume you want to filter some projects by their category and you let the user decide. That's the idea of AJAX, the user can send and retrieve data from a server asynchronously.
HTML (div to be modified)
<div class="row" id="construction-projects"></div>
Javascript (Client-side)
$.post('/search_pill', {
category: category, // <---- This is the info payload you send to the server.
}).done(function(data){ // <!--- This is a callback that is being called after the server finished with the request.
// Here you dynamically change parts of your content, in this case we modify the construction-projects container.
$('#construction-projects').html(data.result.map(item => `
<div class="col-md-4">
<div class="card card-plain card-blog">
<div class="card-body">
<h6 class="card-category text-info">${category}</h6>
<h4 class="card-title">
${item.title_intro.substring(0, 40)}...
</h4>
<p class="card-description">
${item.description_intro.substring(0, 80)}... <br>
Read More
</p>
</div>
</div>
</div>
`))
}).fail(function(){
console.log('error') // <!---- This is the callback being called if there are Internal Server problems.
});
}
Build a function that will fetch the current page via ajax, but not the whole page, just the div in question from the server. The data will then (again via jQuery) be put inside the same div in question and replace old content with new one.
Flask (Server-side)
''' Ajax path for filtering between project Categories. '''
#bp.route('/search_pill', methods=['POST'])
def search_pill():
category = request.form['category']
current_page = int(request.form['current_page'])
## Search in your database and send back the serialized object.
return jsonify(result = [p.serialize() for p in project_list])
Thank you #CaffeinatedCod3r,#Klaus D and #newbie99 for your answers.
I Figured it out. instead of using Flask we can use Angular JS Routing for navigation.
Here is the example that i referred:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
<head>
<base href="/">
</head>
<body ng-app="myApp">
<p>Main</p>
Banana
Tomato
<p>Click on the links to change the content.</p>
<p>Use the "otherwise" method to define what to display when none of the links are clicked.</p>
<div ng-view></div>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider, $locationProvider) {
$routeProvider
.when("/banana", {
template : "<h1>Banana</h1><p>Bananas contain around 75% water.</p>"
})
.when("/tomato", {
template : "<h1>Tomato</h1><p>Tomatoes contain around 95% water.</p>"
})
.otherwise({
template : "<h1>Nothing</h1><p>Nothing has been selected</p>"
});
$locationProvider.html5Mode(true);
});
</script>
</body>
</html>
By Using $locationProvider.html5Mode(true) i was able to remove the # from the URL.
I've got my first Django app in production and would like to setup Google Analytics to see pageviews/timespent/etc by page title for the order flow. I've added the GA javascript to the of my base.html template with the hope that it would track each page with page title.
However, when I look at Google Analytics, I only see page views by my root domain 'mysite.com', and I cannot get get page views by '/app/pagetitle1', '/app/pagetitle2', '/app/pagetitle3', etc. 'app' is the Django app that the root domain gets redirected to 'mysite.com/app'. I'm assuming that Google Analytics would show entire path after root domain, if it were to work.
It seems like there is probably something simple I've overlooked, and would appreciate any advice.
Here's the GA tag I put in base.html right after per GA instructions:
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=XXX"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'XXX');
</script>
Each template extends base.html as follows:
{% extends "base.html" %}
{% block content %}
<section class="container container-interior">
etc - rest of <body>
I made two changes to address lack of page title and double counting.
Remove this gtag call from my base.html template
gtag('config', 'G-ID',{'send_page_view': true});
Added this to each page that I wanted to track using a block tag.
gtag('event', 'page_view', { page_title: '', page_path: ', send_to: '<G-ID'> })
I am trying to use the Facebook Like Button at its maximum. I am a webmaster in charge of many websites. I read a lot of answers and question, but I still reach the problem. When somebody use the like button on my Website, and let a comment, it will not publish to its profile.
First I tried to use the simple way:
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
<div id="fb-root"></div>
<div class="fb-like" data-href="http://www.example.com" data-width="100" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>
I have the common message in debug "Invalid App Id: Must be a number or numeric string representing the application id.", because I did not use an app_id.
I setup the OpenGraph meta and crawl them with Facebook debug, OK, no error. I use the Domain insight on this domain to get a fb:admins.
<meta property="og:site_name" content="IT IS IT" />
<meta property="og:title" content="Name of page" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://www.example.com/" />
<meta property="og:description" content="blablab" />
<meta property="fb:admins" content="10000000xxxxxx" />
<meta property="og:image" content="http://www.example.com/og-image-fb.jpg?v=14170000000" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="1800" />
<meta property="og:image:height" content="945" />
<meta property="og:locale" content="fr_FR" />
And using also in HTML declaration:
prefix="og: http://ogp.me/ns# fb: http://www.facebook.com/2008/fbml"
In a very few websites, I get the feed published on the wall. But on all the others, I get nothing.
After that, I tried to make a WWW Facebook App per website, using "Information" for the type of the app (Using the App_id in OpenGraph meta + the load of the FB SDK, in addition of my fb:admins). It was working well, except I need to create 1 App for 1 site, because on every feed, it will sho MrX like a link on "Name of my App", linked to the url of the website, so I can not use a general app for all my websites.
But after 5 App, Facebook hang my account.... So I am opening a new FB personnal account at my name (I don't want to use FB for anything else then this work), so I am able to provide an ID if they block my account again.
My first question: Is creating 1 app for 1 website is a normal and legal way for Facebook ?
My second question: No way to publish on wall without app_id ? It works on 2 website I have, without it, so I am a little confused ...
Thanks !
Usually, Facebook blocks an account for a very good reason. So you must have done something wrong, usually you do get a reason why they blocked it. Take a look if you can appeal and if there is more information in here: https://developers.facebook.com/appeal
In general, 1 app for 1 Website/Domain is normal and you should ALWAYS use an App ID. Facebook decides about publishing it into the stream of user friends, you can´t really "force" this. It depends on many factors (popularity of the website, spam reports, ...). It will most likely get posted if the user adds a comment though - but of course you can´t force that.
TL;DR, the direct answers to your questions:
Yes.
You should ALWAYS use an App. It may work without one, but it´s not recommended.
I know there are many threads on this subject; I read them all (I think) and none of them is an answer to my problem, so here goes:
I want a facebook 'like' button om my website; the kind which invites the liker to add a comment. It is working 'a bit', but not the way I'd expect. I use a special fb-account for testing and found that:
The fact that I 'liked' my webpage shows up under 'actions', but NOT under 'likes'.
The 'comment' gets lost (is not published). Consequently, the 'like doesn't show up in the timeline. (From FB's documentation, I gather that 'likes' are published on the timeline only if a comment was added. And indeed, it seems to work that way when I click the like-button on other websites and add a comment.) Consequently, it doesn't show up on the 'newsfeed' of my 'friends' either.
What did I do wrong?
Of course I used the FB debugger (the 'linter') to make sure my webpage passed all tests.
I used the iFrame version as well as the javascript version of the button, but that doesn't seem to make a difference.
I used the code as generated by fb's own code-generator (that is the xdbml-version using javascript), as well as iFrame code from other code-generators. Finally, I copied the exact iFrame-code from another website, which DOES exactly work as expected (that is: the like action shows up in the timeline with the provided comment and the 'like is added to my set of 'likes'.) I just replaced the URL with my own, taking care it is properly url-encoded. But this code, while clearly working for someone else, is not working for me: I get the same disappointing result.
There is, in fact, another difference still: when, in facebook, I click on the link of some other website I 'liked' I am immediately taken to that website and the page I 'liked'. But when I click on the link to my wn website, I first get a 'warning' dialogue-box, informing me of the dangers of clicking links. For the life of me I can't understand why these differences in behaviour occcurr.
A hint that something is wrong may be (?) that on my website, when the 'comment-box' appears after clicking the button, it doesn't close when I click 'publish'; instead the box stays visible until I click 'close'.
Here is the code I use:
Meta-tags:
<meta property="og:title" content="Modern soefisme - Modern Sufism" />
<meta property="og:description" content="Home Page of Mabel van Asperen, devoted to sufism, sufi acivities and sufi literature" />
<meta property="og:type" content="non_profit" />
<meta property="og:url" content="http://www.phlogiston.nl/speeltuin/" />
<meta property="og:image" content="http://www.phlogiston.nl/speeltuin/images/hearts_with_wings.jpg" />
<meta property="og:site_name" content="Sufi Stuff" />
<meta property="fb:admins" content="100000985117039" />
<meta property="og:locale" content="en_US" />
The iFrame:
<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww%2Ephlogiston%2Enl%2Fspeeltuin%2F&layout=standard&show_faces=true&width=450&action=like&colorscheme=light&height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100%; height:80px;" allowTransparency="true"></iframe>
The xfbml-version:
<script Language="javascript">
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/nl_NL/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-like" data-href="http://www.phlogiston.nl/speeltuin/" data-send="true" data-width="450" data-show-faces="false"></div>
Can anybody shed some light on this? I would be most grateful, as I'm getting rather frustrated since 'everybody' seems to be able to make a well-functioning like-button but I can't. (And I'm also getting tired of the fact that 'experimenting' seems to be so difficult: after clicking the like-button once I can't use it again. So, for each try I have to make up a new webpage. Or does someone know a better way?)
I'm not really sure if this will solve your problem but try changing the overflow css value in the iframe to something other than hidden.
The facebook reference for the like plugin states:
When I click the Like button, the popup window (or "flyout") doesn't
show. Why?
If the Like button is placed near the edge of an HTML element with the
overflow property set to hidden, the flyout may be clipped or
completely hidden when the button is clicked. This can be remedied by
setting the overflow property to a value other than hidden, such as
visible, scroll, or auto.
As far as 'unliking' your like button, its hard to see but if you move your mouse cursor to the left side of the like button, a grey 'x' will appear.
Click on that and you will unlike.
Hope that helps!
I'm having a tough time with this too so your not alone! I can't seem to get the pop up from the like button which allows me to share a link in my feed. I keep getting this 'Unknown RPC service: widget-interactive' error. Wish it was easier.
There are lots of questions about how to get a Facebook Like button working, but I would like to know: does anyone know of an example of the Facebook Like button, coded in XFBML and Javascript, where clicking on it makes the comments box show up, in Internet Explorer? Specifically, I'm trying to figure out if this behavior is broken on IE. I know that particular behavior works under Firefox and Safari.
I see examples of the iframe version of the Like button that pops the comments box in IE when you click "Like". But that's the iframe version, not the xfbml / javascript version. Also, (weirdly enough) the iframe version of the Like button doesn't display the comments box if you don't have show_faces turned on.
The Levi's site is sort of the gold standard in Like usage. Check out http://us.levi.com/family/index.jsp?categoryId=4305605&cp=3146842.3146844.3146854 -- the Like button with comments works in Firefox and Safari, but not IE.
There are lots of different moving pieces here to track down -- for example, namespaces, app_ids, xhtml doctype, etc, etc. But before I get that far, I'm just wondering if the javascript / FBML version of the Like button with comments ever works under IE? And if does, is there an example somewhere? I have never seen one.
Thanks!
Yes, I have this working in IE on http://www.WasupPalmSprings.com. If you click on any of the stories from the home page, there is a like button at the bottom that shows the comments box in IE.
I have had issues with the comment box not showing in IE on other sites. Here is the checklist I use:
Make sure you have the right xmlns attrs in the HTML tag on your page.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http:// www.facebook.com/2008/fbml" xmlns:og="http:// opengraphprotocol.org/schema/">
Make sure you have <div id="fb-root"></div> somewhere on your page.
Make sure you have set up an app for your webpage because you need an app id. If you don't have an app, create one here: http:// www.facebook.com/developers/
Use javascript to load the Facebook connect javascript file. Do not just drop a <script src="..."> tag on the page. If you use jquery or similar, ideally this would go in the onReady handler. Otherwise, put it in <script> tag at bottom of the page.
Be sure to substitute your actual app id from the Facebook app you create where it says 'INSERT YOUR APP ID HERE'
window.fbAsyncInit = function() {
FB.init({appId: 'INSERT YOUR APP ID HERE', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
Add meta tags with open graph information for your page.
<meta property="og:title" content="YOUR PAGE TITLE HERE"/>
<meta property="og:site_name" content="YOUR WEBSITE NAME HERE"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="URL OF PAGE HERE"/>
<meta property="og:image" content="URL OF IMAGE YOU WANT TO SHARE"/>
<meta property="og:description" content="YOUR PAGE DESCRIPTION HERE"/>
<meta property="fb:app_id" content="YOUR FB APP ID HERE"/>
Finally add the like button wherever you want it to appear on the page. Be sure to substitute your own page URL.
<fb:like href="INSERT YOUR PAGE URL HERE" layout="button_count" show_faces="false" width="570" font="arial"></fb:like>