I'm trying to add social media share/like buttons to a web page, the share functionality is working but I'm finding that no image or description is being scraped from the page.
I have been setting open graph meta tags but that doesn't have any affect, I've raised the issue with LinkedIn but haven't had any correspondence back from them:
https://developer.linkedin.com/forum/share-button-not-reading-open-graph-metatags
I'm using the HTML5 doctype and html opener tag with appropriate namespaces and the JSESSIONID cookie is not being set:
<%#page contentType="text/html" pageEncoding="UTF-8" session="false"%>
<!DOCTYPE html>
<html xmlns:fb="http://ogp.me/ns/fb#" itemscope itemtype="http://schema.org/Article">
Here's the implementation of the button:
<script src="http://platform.linkedin.com/in.js" type="text/javascript"></script>
<script type="IN/Share" data-url="<%=shortUrl%>"></script>
<script type="text/javascript" language="javascript">
document.getElementById("fands-include-photo").setAttribute("value", "false");
$( window ).ready( function() {
$( '.IN-widget' ).click( function() {
_gaq.push( [ '_trackSocial', 'LinkedIn', 'Share', '<%=shortUrl%>' ] );
});
});
</script>
I have tried calling undocumented methods from the LinkedIn plugin API like IN.init() and IN.parse() but that doesn't seem to make any difference.
Looking at the console in Firebug there are no javascript errors or warnings...
I've created a test page to demonstrate the problem:
http://www.claytonutz.com/publications/testSocialMedia.jsp
Any help is much appreciated, thanks in advance!
Chris.
It is likely that the data is cached from a previous share of this page. The cache is flushed on a periodic basis, but there is (unfortunately) no way for you to force us to flush the cache for you.
That's a known limitation and is on the feature request list.
Related
I’m including one HTML file in another, as a way to reuse my header and navigation generation logic.
The trouble is that when I browse to pages on my site, I can see the HTML that isn’t included in the include files load first. Only then you can see the menus and banners load afterwards. I’d like everything to appear to load at the same time.
Here's the rendered HTML.
And here’s a code snippet showing you how I generate these pages:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="assets/js/jquery-2.1.3.min.js"></script>
<script>
$(function(){
$("#includeHeader").load("includes/templates/header.html");
$("#includeNavigation").load("includes/templates/navigation.html");
});
</script>
<div id="includeHeader"></div>
</head>
<body>
<div id="wrapper">
<!-- Navigation -->
<div id="includeNavigation"></div>
I’m currently working with the code to try to move any external libraries / CSS to the bottom of the page vs. in the header. But so far, that hasn’t really changed or improved anything.
You should use one of the templating languages.
If your includes are simple HTML files then you could use Handlebars or Dust - you could just copy your code and that's it, then in Javascript you would need just render these templates - see the documentation.
You could use Jade/Pug instead, but its syntax is different from the HTML, so that's not just question of copy-paste.
You are using $(handler) to load them, which is a form for $.ready(). So it waits for the document to load everything before loading your header.html and navigation.html.
Try
<head>
<script src="assets/js/jquery-2.1.3.min.js"></script>
</head>
<body>
<div id="includeHeader"></div>
<script>
$("#includeHeader").load("includes/templates/header.html");
$("#includeNavigation").load("includes/templates/navigation.html");
</script>
</body>
Your problem is that the load function does not run until the document.ready event has fired. Which is probably after your page has started rendering. To get everything to appear at the same time you could use the callback from .load to show everything. So everything is hidden,
$( "#result" ).load( "ajax/test.html", function() {
/// show your stuff
});
You will of course need to know both has loaded.
I would recommend not using javascript to render HTML from a static path and would use a server side lang instead for speed.
I think it make some level fast its not waiting for load all dom element, I am considering #includeNavigation element is under #includeHeader element
<head>
<script src="assets/js/jquery-2.1.3.min.js"></script>
</head>
<body>
<div id="includeHeader"></div>
<script>
$("#includeHeader").load("includes/templates/header.html", function(data){
console.log("header loaded");
$("#includeNavigation").load("includes/templates/navigation.html", function(data){
console.log("navigation loaded");
});
});
</script>
</body>
I have the trio button social media share using Share This API. Everything is ok. They are all sharing right contents. But except for the facebook share image, it cannot be registered as part of the og properties. No image is shown when the facebook popup share shows up. Can someone help please? Thanks in advance!
I actually just followed the template given by client and I dont want to change API/plugin as much as possible. And I cant find any documentation of this kind of service in the API's site http://developer.sharethis.com/.
This is the code.
<script type="text/javascript" src="http://w.sharethis.com/button/sharethis.js#publisher=71dfd17f-04ad-4bd7-acfc-7a47e609cc6f&type=website&post_services=email%2Cfacebook%2Ctwitter&button=false"></script>
<script type="text/javascript">
var BASE_URL = "http://mydemosite.com/";
var shared_object1 = SHARETHIS.addEntry({
title:"My Site | This is showing in fb debugger",
url: BASE_URL,
summary:'My summary. This is showing in fb debugger.',
content:'My Content. This is showing in fb debugger.',
image: BASE_URL + 'share.png'
});
console.log(BASE_URL + 'share.png'); //This returns exactly the url of the image
shared_object1.attachChicklet("email", document.getElementById("share_email"));
shared_object1.attachChicklet("facebook", document.getElementById("share_fb"));
shared_object1.attachChicklet("twitter", document.getElementById("share_twitter"));
</script>
I also checked in facebook's debugger. No image was listed under og: properties.
https://developers.facebook.com/tools/debug
It now worked when I hardcoded also in my <head> tag:
<meta property="og:image" content="<?php echo $base_url; ?>share.png"/>
I have been puzzling with this for quite a while and can't get it to work. Here is the situation. I want a SOCIAL MEDIA bar to ONLY appear if people click some DIV. It should not be loaded unless people click the div. For Social Media I have ADD THIS, and the GOOGLE+1 icon. But I can not get them to load by such an external call. Here is the code so far:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=ISO-8859-1" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#socialmedia").live('click',function(){
$("#loadhere").load('html-part.html');
$.getScript('js-part.js');
});
});
</script>
</head>
<body>
<div id="socialmedia">
Show the Social Media
</div>
<div id="loadhere">
</div>
</body>
</html>
In the HTML part I have the HTML info that needs to be loaded:
html-part.html:
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_counter addthis_pill_style"></a>
</div>
<!-- AddThis Button END -->
<g:plusone size="medium" id="gg"></g:plusone>
</div>
For the JS part I am struggling. Here is what needs to be loaded:
<script type="text/javascript">var addthis_config = {"data_track_clickback":true};</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ID"></script>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
I have tried to call them one by one:
$.getScript('http://s7.addthis.com/js/250/addthis_widget.js#pubid=ID');
$.getScript('https://apis.google.com/js/plusone.js');
But I guess this is a crossdomain problem...?
If I use PHP to obtain the content, and load a local PHP file, it still does not work. Before spending one more day on this... is this possible to achieve?
The problem here is that addthis code fires on dom ready event. When you load it with jQuery the dom has already been loaded so the code is not executed. The fix is to use addthis.init() method to force the code execution after you load the code. There is no cross domain problem or anything.
Note that according to addthis documentation it should be possible by just passing a get variable through the widget url like this http://s7.addthis.com/js/250/addthis_widget.js#pubid=[PROFILE ID]&domready=1 but it didn't work for me.
I would also recommend you store the html in a string variable, that way you don't have to do unnecesary requests for a little static html.
See working demo here: http://jsfiddle.net/z7zrK/3/
$("#socialmedia").click(function(){
var add_this_html =
'<div class="addthis_toolbox addthis_default_style ">'+
'<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>'+
'<a class="addthis_button_tweet"></a>'+
'<a class="addthis_counter addthis_pill_style">'+
'</a>'+
'</div>'+
'<g:plusone size="medium" id="gg"></g:plusone>';
$("#loadhere").html(add_this_html);
$.getScript('http://s7.addthis.com/js/250/addthis_widget.js#pubid=xxx',
function(){
addthis.init(); //callback function for script loading
});
$.getScript('https://apis.google.com/js/plusone.js');
});
Just used amosrivera's answer (huge kiss to you btw :) and ran into another issue :
Addthis object can only be loaded once, so when you have multiple addthis toolboxes on the same page it may only work for the first clicked toolbox.
The workaround is to do :
if (window.addthis){ window.addthis = null; }
before calling
addthis.init();
Here's what I've just done to start loading the buttons only when an article is hovered long enough :
HTML:
<article data-url="someUrl" data-title="someTitle" data-description="someDesc">
.....
<div class="sharing">
<div class="spinner"></div>
<div class="content"></div>
</div>
</article>
JS :
// Only throw AJAX call if user hovered on article for more than 800ms
// Then show the spinner while loading buttons in a hidden div
// Then replace the spinner with the loaded buttons
$(function() {
var t;
$("article").hover(function() {
var that = this;
window.clearTimeout(t);
t = window.setTimeout(function () {
sharing_div = $('.sharing', that);
add_this_html =
'<div class="addthis_toolbox addthis_default_style "> \
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a> \
<a class="addthis_button_google_plusone" g:plusone:size="medium"></a> \
</div>';
if (sharing_div.find('.content div').length == 0) {
sharing_div.find('.spinner').show();
sharing_div.find('.content').html(add_this_html);
sharing_div.find('addthis_toolbox').attr({
'addthis:url': $(that).attr('data-url'),
'addthis:title': $(that).attr('data-title'),
'addthis:description': $(that).attr('data-description'),
})
if (window.addthis){ window.addthis = null; } // Forces addthis to reload
$.getScript('http://s7.addthis.com/js/250/addthis_widget.js#pubid=xxx&async=1',
function(){
addthis.init();
setTimeout(function() {
sharing_div.find('.spinner').hide();
sharing_div.find('.content').show();
}, 2500);
});
}
}, 800);
});
});
To answer your official question, yes, I believe this is possible to achieve.
But, to further elaborate on this, I believe what you may want to try working with is the order in which your external scripts and external markup are loaded. An interesting situation we find when dealing with asynchronous actions such as these, is that they don't always complete, load, or execute in the order you would like unless you specifically say so. jQuery lets you do this through some callbacks you can pass to the getScript and load methods.
There also should not be a "cross-domain" problem with javascript files on other domains, though there certainly is when loading HTML.
I'm not sure if this will exactly solve the problem you're having, but it certainly feels like this is worth a try. You could try making sure the markup loads before the scripts do:
$(function(){
$("#socialmedia").live('click',function(){
$("#loadhere").load('html-part.html', function() {
// this waits until the "html-part.html" has finished loading...
$.getScript('js-part.js');
});
});
});
Now, we should also ask about how you are building your "js-part.js" file. (You only showed what you wanted, not what you've built.) If this is truly a JS file, you can't just use some HTML <script> tags to load other JS files. (You would instead want to continue calling getScript in this file, or use one of several other approaches to get your other JS stuff loaded, such as manually appending script elements to the document's head, or using another library, etc...)
Good luck!
http://www.javascriptkit.com/script/script2/plugindetect.shtml
I am trying to detect flash plugin with Javascript from the above url, but the code doesn't seem to work for IE. Am I doing anything wrong here?
I just need to see whether the flash plugin is installed on the browser or not.
if (pluginlist.indexOf("Flash")== -1)
{
alert("You do not have flash player plugin installed.Please install flash player");
window.location = "/home";
}
swfobject is the established quasi-standard for dealing with flash in JavaScript.
There's a tutorial for Detecting Flash Player versions and embedding SWF files with SWFObject 2
i too tried the same flash plugin but in different link. I tried the following javascript code:
<script type="text/javascript" src="swfobject.js"></script>
<div id="flashcontent">
This text is replaced by the Flash movie.
</div>
<script type="text/javascript">
var so =
new SWFObject("movie.swf", "mymovie", "400", "200", "8", "#336699");
so.write("flashcontent");
</script>
Prepare an HTML element that will hold our Flash movie. The content placed in the ‘holder’ element will be replaced by the Flash content, so users with the Flash plug-in installed will never see the content inside this element. This feature has the added bonus of letting search engines index your alternate content.
var so = new SWFObject(swf, id, width, height, version, background-color
[, quality, xiRedirectUrl, redirectUrl, detectKey]);
And get succeeded. You can also try this code and tell me what happens. I hope you will get success. All The Best.
I tried to use the same plugin of the link you posted.
I used following code and it worked fine in my IE too..
<html>
<head>
<script language="javascript" type="text/javascript" src="plugins.js" ></script>
<script language="javascript" type="text/javascript">
if (pluginlist.indexOf("Flash")== -1)
{
alert("You do not have flash player plugin installed.Please install flash player");
window.location = "/home";
}
else{
alert("You have it installed");
}
</script>
</head>
<body>
</body>
</html>
I think the problem seems with the way of writing tag.
Have you made it exactly like mine? Or you can go with my HTML.
Thanks!
Hussain
I'm working on a Facebook Connect app. I have the Connect button up and running and users can successfully authenticate via Facebook. However, I'm having trouble getting their profile picture and name to display with XFBML. Here is what I'm doing:
<script type="text/javascript">
function fb_login_handler() {
var userbox = document.getElementById( "fb_userbox" );
userbox.innerHTML =
"<span>"
+ "<fb:profile-pic uid=loggedinuser facebook-logo='true'></fb:profile-pic>"
+ "Welcome, <fb:name uid=loggedinuser useyou='false'></fb:name>"
+ "</span>";
FB.XFBML.Host.parseDomTree();
}
</script>
...
<div id="fb_userbox">
<fb:login-button onlogin="fb_login_handler();" autologoutlink="1" length="long"></fb:login-button>
</div>
...
<!-- Facebook Connect initialization -->
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US" type="text/javascript">
</script>
<script type="text/javascript">
FB.init("[MY_API_KEY]", "/xd_receiver.htm",
{ "ifUserConnected" : fb_login_handler } );
</script>
I can successfully login with the Connect button, and the Javascript callback gets run, but I just end up with this:
http://www.friedo.com/fbuserbox.png
So neither the picture nor the name is getting populated. The same thing happens even if I hardcode my FB profile ID in place of loggedinuser.
Update: It seems (after randomly messing around) that I can get it to work if I turn off the facebook-logo attribute from the fb:profile-pic tag. Setting it to false (or removing it) causes the user box to render correctly. But I need to Facebook logo to work, too. :(
The exact markup that you have works fine under this test console. Are you sure you're not getting any JavaScript errors?
Also, can you test with the uid of a relatively old user. There seems to be a bug with displaying pictures for new users. My uid doesn't seem to have this problem, if you want to test it out with mine: 685184151
I tried this code in my server, it works perfectly, I get my name and picture with the fb logo, I tried it in IE8, Chrome 4.0, Safari 3.21 and Firefox 3.5, all with success.
You have to add these tags, so that the FBML tags works in IE, Safari and maybe some versions of the other browsers.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
I wanted to paste the whole script so you could see it, but am new to this site so I don't know how ( the code tag didn't work ). I didn't make any changes to your code, just added the tags I mentioned above along with the body and head tags.