How to share webpage image with description into Facebook page? - javascript

I am adding FB share button in my webpage and on click of share button I want to share share the image with some description. I followed this link
https://developers.facebook.com/docs/plugins/share-button
even am able to share on FB but not able to pick the image and description .Its just accepting only the domain name.
Am not able to identify the issue...please guide me ..any help will be
appreciated ,Thanks in advance
Meta Tag is not affecting at all...
<meta property="og:url" content="http://www.example.com/projectfoldername/aa.php" />
<meta property="og:type" content="website" />
<meta property="og:title" content="image Title" />
<meta property="og:description" content="image description" />
<meta property="og:image" content="http:///www.example.com/projectfoldername/imagefolder/image.jpg" />
</head>
<body>
<!-- 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/en_US/sdk.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- Your share button code -->
<div class="fb-share-button"
data-href="http://www.example.com/projectfoldername/aa.php"
data-layout="button_count">
</div>
</body>
</html>
This warning am getting
Warnings That Should Be Fixed
Inferred Property
The 'og:image' property should be explicitly provided, even if a value can be inferred from other tags.
Missing Properties
The following required properties are missing: og:url, og:type, og:title, og:image, og:description, fb:app_id
error snapshot ...pls guide me

You would appear to be missing the Open Graph tags in your page head. Facebook uses these to scrape the page preview. If you look at the Full Code Example at the link in your post, you can see some sample tags.
If you specify the image and text in the OG tags, your sharer should work correctly.

Related

Facebook Like button Jquery Javascript

I have a little problem hopefully someone can help with :)
I have a Facebook like button on a page, that I would like to, when 'clicked' to display a form underneath it. So far I have tried .click and it doesn't work, however, .hover does! But I don't want it that way.
Any info would be greatly appreciated!
(for testing purposes the like button doesn't refer to any page yet, also for facebook script to work needs to be on a server, localhost or otherwise)
Here is my code:
<!-- Add Jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!--My styles -->
<style>
#form{display: none;width:400px;}
</style>
<!-- Facebook 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 = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<!-- MY click Event -->
<script>
$(document).ready(function(){
$(".fb-like").click(function(){ //click doesnt work, hover does
$("#form").css("display","block");
});
});
</script>
<!-- the Button -->
<div class="fb-like" data-href="#" data-layout="button_count" data-action="like" data-size="large" data-show-faces="false" data-share="false"></div>
<!-- The Form -->
<form id="form">
<input type="text" name="name" value="First Name"><br>
<input type="email" name="email" value="Your Email">
<button type="submit" name="submit" value="submit">Sign Up</button>
</form>
A scratch my previous answer. I looked again and found out that the like button is rendered in an iframe. That means it is protected by first origin policy and you CANNOT access DOM components on another domain. Tough luck.

Facebook open graph not working

My script:
<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.3";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Meta tags
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="..
all over Malaysia. Visit us now for Home Tuition and More!"/>
<meta name="keywords" content="content goes here"/>
<title>Tutor Registration: Gloopal- Home tuition and More!</title>
<meta property="og:title" content="Malaysia's Best Private Tutoring Website" />
<meta property="og:image" content="https://[sample.com]/img/fb.png" />
<meta property="og:image:secure_url" content="https://[sample.com]/img/fb.png" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="300" />
<meta property="og:description" content="Visit [sample.com] today for the most reliable, brilliant and honest tutors from all over Malaysia! We've got you covered, for the widest ever range of subjects. We charge ZERO fees/commission for students and tutors, for all tutoring arrangements- we're one of a kind indeed!" />
<!--open graphs ends-->
jquery appended html
<div class='fb-share-button' data-href='https://gloopal.com/index.php' data-layout='button'></div>
When I tried the above on [https://sample.com] it worked fine after few round of refresh on the browser.
Next I tried to share more specific posts instead of the whole website in general. So refered to a page with ID on each share button.However it simply ignored it and just showing the general website. I don't understand why I didn't get the specific page with ID and show contents of that page.
<div class='fb-share-button' data-href='https://gloopal.com/search2.php?TID="+ tid +"' data-layout='button'></div>
Now, I tried sharing back the website in general as I've created a subdomain for revamp work. In this domain the basic sharing of the button not showing the images and descriptions attached to it, let alone sharing by ID.
When I debugged in facebook debug, it shows this error:
Error parsing input URL, no data was cached, or no data was scraped.
Then I read few questions on this learnt few tips:In order to facebook to scrape the content, must set with and height for the image. ALso, facebook doesn't show the image in the first load so must keep refreshing. Facebook also doesn't remove the previously cached content though I change them in my file. SO I need to refrech the facebook debug after placing my URL once or twice.Not just this, I l also learnt that even HTTPS can cause problem, so I even tried replacing it with http and also added secured_url on the image meta tag.
Despite all my attempts, I still can't share image and content in the facebook.If anybody knows where I lack, please also do me a favour by letting me know on how to share posts by ID which means different image,content per ID.
Thanks for your help in advance.
You might just need to re-parse the DOM. Put your button in a container with a 'fb' id, like so:
<div id="fb"><div class='fb-share-button' data-href='https://gloopal.com/search2.php?TID="+ tid +"' data-layout='button'></div></div>
Then try this just after jQuery's append
FB.XFBML.parse(document.getElementById('fb'));

single page application can't get current page meta tag for facebook share

I'm trying to implement the facebook share button in my app, however I can't seem to get it to work on and idk why this is what I have so far.
html(/post/some-random-string)
<div id="fb-root"></div>
<meta property="og:site_name" content="App">
<meta property="og:url" content="/post/{{data.permalink}}">
<meta property="og:title" content="{{data.title}}">
<meta property="og:type" content="blog">
<meta property="og:image" content="https://i1.ytimg.com/vi/tIWPnxEpNQg/maxresdefault.jpg">
<meta property="og:description" content="{{data.preview}}">
<body >
<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&appId=580882498674160&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
// this facebook share button doesn't appear.
<div class="fb-share-button" data-href="https://developers.facebook.com/docs/plugins/" data-type="button"></div>
//so i manually make one.
<a href="" ng-click='facebookShare();'>Share</a>
</body>
controller.js
$scope.facebookShare= function(){
return window.open('http://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent(location.href), 'facebook_share', 'height=320, width=640, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, directories=no, status=no');
}
it works however it didn't read the meta tag i have written above on the html page instead it reads from my index page
index page
<!DOCTYPE html>
<html ng-app='app'>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<noscript>
<meta http-equiv="refresh" content="7">
<style type="text/css">
.pagecontainer {display:none;}
</style>
<div class="pure-u-1 text-center">
<title>Symsal- Oh no ! We need Javascript to work !</title>
<h3> Please Enable javascript </h3>
</div>
</noscript>
<head>
<title ng-bind='title'></title>
// some css file
</head>
<body>
<div class='puretype'>
<div ng-controller="MasterCtrl">
<div id="layout">
<!-- Menu toggle -->
<a href="" id="menuLink" class=" white menu-link">
<span></span>
</a>
<div id='menu' class="pure-u-1">
<div ng-bind-html="userView"></div>
</div>
</div>
<div class="pure-g-r">
<div id="feed-container" class='pure-u-1 slide'ng-view=''></div>
</div>
</div>
</div>
// some javascript files
</body>
</html>
facebook debugger
What jackypan1989 said is true, you will have to use the absolute url.
But one other thing that I'm pretty sure happens is that Facebook won't run your JavaScript code, thus the part
<meta property="og:url" content="/post/{{data.permalink}}">
will never get replaced with
<meta property="og:url" content="/post/the-page-that-was-shared">
This problem that you are having could also prevent Google from crawling your page.
We had the same problem, and we used https://prerender.io to get around it.
You can use it on your own server, or use one of their free/paid services.
You already have a body defined around your ng-view. Then your view has its own body. So you are trying to inject a body inside of a body which isn't going to do what you want.
Notice that your controller does not control the HTML element that contains the Meta tags. It only controls code that it contains (a div within the body in your case).
You can add a controller to the HTML tag or you can use $rootScope.
Lots of answers to this here: How to dynamically change header based on AngularJS partial view?
In your controller that handles the ng-view:
app.controller('MainControl', function ($rootScope, $scope, Config) {
...
$rootScope.canonical = Config.domain;
});
I needed to dynamically set a canonical link, but the principal for metas is the same. In your header:
<link rel="canonical" ng-href="{{ canonical }}" />
You'll probably want to use ng-bind for a meta tag.
I would add to the previous answers that prerender will solve crawling problems but facebook share is a bit different I think ( feel free to prove me wrong :) ). To avoid annoying {{}} you can define your own meta directive <meta meta-description> and use a template:
app.directive('metaDescription', [ 'metaData', function(metaData){
return {
restrict: 'A',
replace: true,
template: '<meta name="description" content="{{metaData.pageDesc}}">',
link: function(scope,element){
scope.metaData = metaData;
}
};
}]);
We are still figuring out SEO/sharing issues with angularJS here but that's what we currently use.
In your codes, you should set up your absolute url on attr 'data-href' of fb-share-button.
For example:
<div class='fb-share-button' data-href='https://yourabsoluteurl.com' data-type='button'>
</div>
I made it work using express. There may be some gaps in this, so if anyone tries it, feel free to fill in the gaps in the comments and I'll update...
I have both express and react running in two different consoles locally. For some reason, I only needed to run node on the express file in prod. Do whatever you need to to get it running. This will forward the request to the react server.
app.get('*', function(req, res) {
res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
Then I have a route for the pages that I share that looks something like this.
app.get('/details/:itemId', function(req, res) {
const fileName = path.join(__dirname, 'build', `${req.params.itemId}.html`);
var fileContents = fs.readFileSync(path.join(__dirname, 'build', 'index.html'), 'utf8');
fileContents = fileContents.replace("og tags", "new values");
fs.writeFileSync(fileName, fileContents);
res.sendFile(fileName);
});
You probably will want to search for the file and serve that up first if it exists so you aren't having problems with multiple clients writing to the same file at the same time in a high volume environment. Or better yet, do it in memory. Remember, order counts in express, so you really need to reverse the order of these two functions in your express file.

AddThis: Facebook share ignores sharing configuration

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>

facebook like button website description

I've added a Facebook like button to my website, by following these instructions. Basically, I added this HTML:
<div class="fb-like" data-href="http://www.festivals.ie"
data-send="false" data-width="100"data-show-faces="false" data-font="verdana"
data-layout="button_count">
</div>
And this 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/en_GB/all.js#xfbml=1&appId=29208799875673";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
When the button is pressed, the following popout appears:
The popout contains some text that describes the website (circled in red). This text seems to be copied from the first non-empty <p> element that appears on the page (starting from the top).
Is there a way that I can change this to something that better describes the site? I tried adding a
<meta name="description" content="my website description"/>
But it didn't make any difference.
Use the opengraph description meta tag. You might also want to add the title unless your page title is always what you want to appear on Facebook.
<meta property="og:title" content="..." />
<meta property="og:description" content="..." />
See https://developers.facebook.com/docs/opengraph/objects/ for further information.

Categories

Resources