Cant get Facebook like button to include certain image - facebook-like

I cant seem to get the Facebook like button to include my image, checked the facebook dev docs and implemented what they say but i must be doing something wrong cause its picking a completely different image.
Here is my code:
in
<meta property="og:image" content="http://url.com/images/81341089.jpg" />
And the button..
<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=313222255403082";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="http://url.com/index.php" data-send="false" data-layout="button_count" data-width="120" data-show-faces="true"></div>
Any ideas?
Getting super frustrated :))

Try this
<script>function fbs_click() {u=location.href;t=document.title;
window.open(‘http://www.facebook.com/sharer.php?u=’+encodeURIComponent(u)+
’&t=’+encodeURIComponent(t),’sharer’,'toolbar=0,status=0,width=626,height=436′);
return false;}</script>
<a href=”http://www.facebook.com/share.php?u=<url>” onclick=”return fbs_click()” target=”_blank”>
<img src=”**ADD_IMAGE_URL_HERE**” alt=”Share on Facebook” />
</a>
I found it here http://www.business.com/b2bmarketing/create-share-buttons/

Related

Maps java script API to Django project

I am creating a real estate web platform with Django and postgresql back-end. I have implemented maps API in my HTML template in order to show where the real estate is located.
The code:
<!--Map-->
<div class="row mb-5">
<div class="col-md-12">
<style>
#map{
height:250px;
width: 100%;
}
</style>
<div id="map"></div>
<script>
function initMap(){
var myLatLng = {lat:-33.90, lng:151.16};
var options = {
zoom:10,
center:myLatLng
};
var map = new
google.maps.Map(document.getElementById('map'),options);
}
</script>
</div>
</div>
Markers will be added in the next step because I have to figure out how I can retrieve my LAT and LNG values from the database and display them inside the script. Does anyone have the answer?
To explain that a bit further, I want to make something like
<script>
function initMap(){
var myLatLng = {lat:{{listing.geo_lat}}, {{listing.geo_lng}}};
var options = {
zoom:10,
center:myLatLng
};
But I have tried that and it seems that either google api cant read the proper format of my values or listing.geo_lat is not properly working inside the script.
Dont really know if it's an optimised solution but that works.
<div class="row mb-5">
<div class="col-md-12">
<style>
#map{
height:250px;
width: 100%;
max-width: none;
}
</style>
<div id="map"></div>
<script>
let lat = "{{listing.lat}}";
let lng = "{{listing.lng}}";
let geo_lat = parseFloat(lat);
let geo_lng = parseFloat(lng);
function initMap(){
var myLatLng = {lat:geo_lat, lng:geo_lng};
var options = {
zoom:11,
center:myLatLng
};
var map = new
google.maps.Map(document.getElementById('map'),options);
}
</script>
</div>
</div>

Facebook like button will not show

I am trying to add a facebook like button following the instructions https://developers.facebook.com/docs/plugins/like-button
but it will not show. I have even put the code in an empty html document but it still doesn't work.
Any help greatly appreciated, it is driving me mad!
Here is my code:
<!doctype html>
<html>
<head>
<title>facebook like</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<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_GB/sdk.js#xfbml=1&version=v2.3";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="https://mdolbear.com/" data-width="200" data-layout="standard" data-action="like" data-show-faces="false" data-share="true"></div>
</body>
</html>

Raphael Javascript text not displaying correctly

I have some text being displayed and I am using the Raphael JS library. I want the 'firstname' text to be size 25px, but it is not working. I am passing in a JS variable to the Raphael part and maybe that is part of the problem. If anyone could help me I would appreciate it.
<html>
<head>
<script src="raphael.js"></script>
<script src="jquery-1.7.2.js"></script>
<script type="text/javascript">
var string = "J\no\ne";
</script>
</head>
<body>
Text: <input type="text" id="words" value="" />
<input type="button" value="Animate" onclick="animate()" />
<div id='msg'></div>
<div id='num'></div>
<div id='letters'></div>
<!--<div id="letters2"></div>-->
<div id="draw-here-raphael" style="height: 200px; width: 400px; margin-top:0px;">
</div>
<div id="elps" style="margin-left:100px;"/>
<script type="text/javascript"> //all your javascript goes here
var r = new Raphael("draw-here-raphael");
var firstname = r.text(95,100, string).attr({font: "25px"});
var name = r.text(100,100, string);
name.blur(1);
</script>
</body>
</html>
Try var firstname = r.text(95,100, string).attr({"font-size": 25});
Try calling the raphael js file after the jQuery file.
<script src="jquery-1.7.2.js"></script>
<script src="raphael.js"></script>

How to get Access Token with JavaScript API dynamically

I'm trying to publish an action for the Facebook Grahp in order to get my App approval..
Error:
Publish Actions
You must publish at least one action to your Timeline using this action type.
So I created a simple page to publish the action (I got the code form: Graph API) and it's this one:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="de-DE" xmlns:fb="https://www.facebook.com/2008/fbml">
<head prefix="og: http://ogp.me/ns# fashion_econtest: http://ogp.me/ns/apps/fashion_econtest#">
<title>Fashion</title>
<meta property="fb:app_id" content="MyAppId" />
<meta property="og:type" content="fashion:contest" />
<meta property="og:title" content="eContest" />
<meta property="og:image" content="The Image" />
<meta property="og:description" content="Registrati e vinci cli accessori più fashion dell'anno!" />
<meta property="og:url" content="MyURL">
<script type="text/javascript">
function postSubscribe(){
FB.api(
'/me/fashion:subscribe',
'post',
{share:'MyUrl'},
function(response){
if(!response){
alert('Error');
}else if(response.error) {
alert(response.error.message);
}else{
alert('Subscribe was successful! Action ID: ' + response.id);
}
});
}
</script>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function(){
FB.init({
appId : 'MyAppId', // App ID
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/it_IT/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
<h3>Fashion</h3>
<p>
<img title="Vinci i premi più Fashion!" src="http://xxxxxx.de/img/yyyyyy.jpg" width="550"/>
</p>
<br>
<form>
<input type="button" value="Subscribe" onclick="postSubscribe();" />
</form>
</body>
But once I send the Request, I get the follwonig Error:
An active access token must be used to query information about the current user.
How can I get the Access Token with Java Script FB-API dynamically and make this working?
Many Thanks for your help!!
Amin
Facebook exchanges access_tokens automatically based on your application Id. I think you are looking for getting the currently active access_token using FB API methods.
Try FB.getLoginStatus API call. For more details see...
http://developers.facebook.com/docs/reference/javascript/FB.getLoginStatus/
Call FB.login first, and ask for the appropriate permission (publish_actions).
(Or just do the whole things using the Graph API explorer instead of writing a script for something you’ll only need once.)

Like button showing same number of likes on different pages

I have a site problemio dot com (not posting url so it doesnt look like I am just trying to get links, etc.)
On the photo in the home page, there are 7 different links to categories. In each category there is the same number of likes. I don't understand why.
Here is the FB snippet I use:
<div style="margin: 0 auto; width: 100px; padding-left: 55px; padding-bottom: 15px;">
<center><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=234415063262341";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="http://www.problemio.com" data-send="false" data-layout="button_count" data-width="450" data-show-faces="true"></div>
</center>
</div>
Thanks!
Does data-href="http://www.problemio.com" have to be a unique page?
like data-href="http://www.problemio.com/category/photos" and or
data-href="http://www.problemio.com/about"
so that way each page can be liked?
Use each page's own canonical URL on each data-href.