I'm trying to integrate facebook plugin page into blogger ?
I am following the steps in https://developers.facebook.com/docs/plugins/page-plugin/#
My facebook page is https://www.facebook.com/YourWebsiteTraffic
First remark, there is no preview of the plugin (this normally should appear)
I had integrated the first code after the tag of blogger theme:
<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 = 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.0&appId=1639125536140367&autoLogAppEvents=1';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
However, After entering the second part below in a new widget:
<div class="fb-page" data-href="https://www.facebook.com/YourWebsiteTraffic/" data-tabs="timeline" data-width="300" data-height="300" data-small-header="false" data-adapt-container-width="false" data-hide-cover="false" data-show-facepile="true"></div>
I get this new code after the body tag:
I'm totally lost now, can somebody please help. Thanks a lot
To solve it: go to the page settings and chane page visibility to Published :)
Related
The greeting_dialog_display is not working. Or have I misunderstood something..? I've set greeting_dialog_display="hide", but the popup still shows up.
[See live example of issue on codepen][1]
[fork and edit pen][2]
Code example:
<!-- Load Facebook SDK for JavaScript -->
<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 = 'https://connect.facebook.net/fi_FI/sdk/xfbml.customerchat.js#xfbml=1&version=v2.12&autoLogAppEvents=1';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- Your customer chat code -->
<div class="fb-customerchat"
attribution=setup_tool
page_id="1160695934081727"
greeting_dialog_display="hide">
</div>
False alarm. The plugin just caches what ever position it's in. So to test you'll need e.g. Chrome incognito with always closing all incognito windows in between.
I am trying to add Facebook Comment Box as well as Messenger Plugin in my Angular/Ionic App (PWA).
The Messenger plugin when included separately works well. But with the following code, where I try to combine both, the Messenger fails to load, with no errors in console.
index.html
<!-- Load Facebook SDK for JavaScript -->
<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/sdk/xfbml.customerchat.js#xfbml=1&version=v2.12&autoLogAppEvents=1';
fjs.parentNode.insertBefore(js, fjs);
js = d.createElement(s); js.id = id + '1';
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.0&appId=1423348794345669&autoLogAppEvents=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-customerchat"
attribution="setup_tool"
page_id="838973246246775"
greeting_dialog_display="hide"
logged_in_greeting="Hi! How can we help you?"
logged_out_greeting="Hi! How can we help you?">
</div>
Messenger only working code # https://change.grassrootsapp.in/
Combined broken code # https://alpha4.uat.grassrootsapp.in/
chat.html
<ion-content id="event-chat-content" *ngIf="cEvent">
<div id="fb-root"></div>
<div class="fb-comments" [attr.data-href]="cEvent.shortURL" data-numposts="10"></div>
</ion-content>
chat.ts (from https://blog.f5.works/using-facebook-comment-plugin-in-angular-2/)
ionViewDidEnter() {
// https://samkirkiles.svbtle.com/angular-4-facebook-login-integration
let wind = <any>window;
if (wind.FB) {
wind.FB.XFBML.parse();
}
}
Now to combine both, I am unsure
where to put
how to include script tag for sdk.js as well as xfbml.customerchat.js
I tried the following scenario and it fails:
Have my index.html undisturbed.
Remove just <div id="fb-root"></div> from chat.html, as its already included in index.html
With this, when I load the app, the messenger works fine.
But when I navigate to the component which has Comment box, it's not loading the Comment box and also break the Messenger.
Any help?
I used the following script in my web page
In body tag i used the following code
<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/sdk.js#xfbml=1&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
In my blog listing I used the following in each blog:
<div class="fb-share-button" data-href="http://test.com" data-layout="button"></div>
Its displayed fine. After 10 blogs while scroll the remaining data are loaded dynamically by using the ajax file.
Here also I used the above script and Div share button. But it is not displayed with the ajax loaded file.
I googled a lot and I couldn't find a right solution. Please help me to fix this.
after ajax, call function FB.XFBML.parse(); to force the refresh/rendering FB share buttons
I want to sync FB posts to my own website, which is Drupal site.
I found this embed code that allow me to embed posts to any website.
<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/zh_CN/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-post" data-href="https://www.facebook.com/Abner.Ma.1989/posts/411557558943779" data-width="466">
<div class="fb-xfbml-parse-ignore">由
马昕睿贴出
贴子。</div>
</div>
You can see if I change the code posts part
data-href="https://www.facebook.com/Abner.Ma.1989/posts/411557558943779"
to something else, then the embed content will change too.
So I think this might be one way to sync posts from FB to my own website.
So the question is : How could I obtain recent FB post ID?
Or: Any way to sync FB posts to my own website?
Thanks!
Having a weird problem with social icons on my page.
G+ is working perfectly but the Twitter Share button + FB Like button do not load up when my html page has finished loading.
Twitter:
Tweet
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
here I only see the plain text "Tweet" (as a link) when the page finished loading. Not the actual twitter button.
Facebook (using some rails code here to display the current URL), here I don't see anything:
<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=.......";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="<%= request.original_url %>" data-width="100" data-colorscheme="light" data-layout="button_count" data-action="like" data-show-faces="false" data-send="false"></div>
Funny thing is:
After the page has loaded and when I hit the reload button (CMD+R), the icons are showing up perfectly!
No idea how to solve that issue.
I have tried to show the content using JS only when the document has finished loading but that did not solve it.
The turbolinks gem caused the problem.
Solved by following these tips here:
http://reed.github.io/turbolinks-compatibility/twitter.html
http://reed.github.io/turbolinks-compatibility/facebook.html
<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/fr_FR/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-post"
data-href="https://www.facebook.com/photo.php?v=10153444775720220"
data-width="550">
<div class="fb-xfbml-parse-ignore">
<a href="https://www.facebook.com/photo.php?v=10153444775720220">
Publication</a> de
<a href="https://www.facebook.com/tsahalfr">
Tsahal-Armée de Défense d'Israël</a>.
</div>
</div>