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"/>
Related
I am trying to recreate the example provided by Tableau here with a dashboard that is hosted in Tableau Online. A separate article from Tableau talks about modifying the URL of the JS API based on where the dashboard is hosted, which I've tried to follow.
Even though the resulting embed should require a login to be displayed, I expect that login to be displayed in that embedded output/iframe on my webpage. Please refer to the included code. Instead, I'm getting a CORS error:
Refused to display 'https://10ay.online.tableau.com/site/jpl/views/JPLDashboard_V05_JUE/Awareness?:iid=2&:size=800,700&:embed=y&:showVizHome=n&:bootstrapWhenNotified=y&:tabs=n&:apiID=host0#navType=1&navSrc=Parse' in a frame because it set 'X-Frame-Options' to 'sameorigin'.
Is the approach I'm taking correct? If embedding Tableau Online dashboards is possible with their JS API, how do I avoid the CORS error?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>JPL Dashboard</title>
<script type="text/javascript" src="https://online.tableau.com/javascripts/api/tableau-2.min.js"></script>
<script type="text/javascript">
function initViz() {
var containerDiv = document.getElementById("vizContainer"),
//url = "http://public.tableau.com/views/RegionalSampleWorkbook/Storms",
url = "https://10ay.online.tableau.com/site/jpl/views/JPLDashboard_V05_JUE/Awareness?:iid=2",
options = {
hideTabs: true,
onFirstInteractive: function() {
console.log("Run this code when the viz has finished loading.");
}
};
var viz = new tableau.Viz(containerDiv, url, options);
}
</script>
</head>
<body>
<div id="vizContainer" style="width:800px; height:700px;"></div>
<script type="text/javascript">
(function () {
window.onload = function () {
initViz();
};
})();
</script>
</body>
</html>
Ensure that the URL used for embedding the view is from the Share option in Tableau Online:
In Tableau Online, navigate to the view encountering the problem.
Click the Share button.
Copy the URL link within the Link section.
Configure the embed code to use this URL rather than the Tableau Online URL in the browser address bar.
If it is correct, try to add: <meta http-equiv="X-Frame-Options" content="allow"> in the HTML header
I hope it is helpful,
Gigi
I want to share a link on Facebook after the user has been asked a question on the webpage. The user will be asked "Do you like XYZ". Then, I want to display an option at the bottom of the page to share on Facebook. To share a link on Facebook is
window.open("www.facebook.com/sharer.php?u=window.location.href&t=document.title", "_blank");
and replacing the page's meta description should be something like this?
('meta[property="og:title"]').replaceWith('<meta property="og:title" content="SHARE THIS">');
But I can't seem to combine these into one button.
For instance, the code below is my attempt at doing this and it does not work (absolutely nothing happens).
<button>SHARE</button>
<script type='text/javascript'>
$('button').on('click', function() {
$('meta[property="og:title"]').replaceWith('<meta property="og:title" content={{ result }}>');
$window.open("www.facebook.com/sharer.php?u=http://localhost/&t=document.title", "_blank");
});
</script>
Actually you have a syntax error in you script. window.open doesn't need $ sign.
So, just replace your JS code with mine and it will works if you the correct URL in yor {{ result }}. Please follow below code::
<script type='text/javascript'>
$('button').on('click', function() {
$('meta[property="og:title"]').replaceWith('<meta property="og:title" content={{ result }}>');
window.open("www.facebook.com/sharer.php?u=http://localhost/&t=document.title", "_blank");
});
</script>
Additional Ref::
Window.open syntax
But be carefull, how can you share any localhost URL in FB share, unless and untill it's not on server.
I have been digging in the this site and others for several days and the answer to my problem still escapes me.
I have read all of these pages:
http://pastebin.com/cbagkw8h
but none of them exactly answers this question:
I am trying to get a Rally Dashboard (custom board) to appear in HTML/Javascript in a confluence wiki. I have gotten a simple Standard Report working using a read-only account and AppSDK1.32 with loginKey by embedding the following HTML/Javascript into the Confluence wiki page:
{html}
<meta name="Name" content="App Example: Rally Application" />
<meta name="Version" content="2011.04" />
<meta name="Vendor" content="Rally Software" />
<script type="text/javascript"
src="https://rally1.rallydev.com/apps/1.32/sdk.js?loginKey=loginkeyloginkeyloginkeyloginkeyloginkeyloginkeyloginkeyloginkeyloginkeyloginkeyloginkeyloginkeyloginkeyloginkeyloginkeyloginkey">
</script>
<script type="text/javascript">
function onLoad() {
var rallyDataSource = new rally.sdk.data.RallyDataSource(
'__WORKSPACE_OID__',
'__PROJECT_OID__',
'__PROJECT_SCOPING_UP__',
'__PROJECT_SCOPING_DOWN__');
rally.sdk.ui.AppHeader.destroy();
var reportConfig = {report: rally.sdk.ui.StandardReport.IterationBurndown,
width : 400, height: 300};
var report = new rally.sdk.ui.StandardReport(reportConfig);
report.display("reportDiv");
}
rally.addOnLoad(onLoad);
</script>
<div id="reportDiv" style="width: 400px; margin-left:20px"></div>
<br/>
{html}
I am trying to expand this success to an entire dashboard with App SDK2.x using the new apiKey - by using the following code:
{html}
<meta name="Name" content="App Example: Rally Application" />
<meta name="Version" content="2015.04" />
<meta name="Vendor" content="eBay Enterprise" />
<script type="text/javascript"
src="https://loginapirally1.rallydev.com/apps/1.32/sdk.js?loginKey=loginkeyloginkeyloginkeyloginkeyloginkeyloginkeyloginkeyloginkeyloginkeyloginkeyloginkeyloginkeyloginkeyloginkeyloginkeyloginkey">
</script>
<script type="text/javascript">
function onLoad() {
rally.sdk.ui.AppHeader.destroy();
document.getElementById("iframeA").width = screen.width - 60 ;
document.getElementById("iframeA").height = (screen.width - 60 ) * 3;
}
rally.addOnLoad(onLoad);
</script>
<iframe id="iframeA" src="https://loginapirally1.rallydev.com/#/111111111d/custom/222222222?expandApp=333333333&apiKey=_apikeyapikeyapikeyapikeyapikeyapikeyapikey" width="1024" height="1024">
</iframe>
<br/>
{html}
I am noticing a few things:
1) it almost works - I get the dashboard/report title but not the cards
2) the apiKey seems to have no affect at all - I still get prompted for a login and password (which I could stand if I could see the cards).
3) it doesn't seem to matter if I put the apiKey before or after the hash symbol
Citation A suggested using the "full screen" dashboard/report but didn't cover the apiKey.
Citaton B says that the AppSDK2 uses the apiKey as of Apr 14 2014 but doesn't say how to use it exactly with AppSDK2.
I have gotten the apiKey to work with the Ruby API but it is unclear how to access the dashboard/reports from there.
Citation C says that the AppSDK1 is based on the Javascript dojo framework and the AppSDK2 is based on the Javascript Sencha's ExtJS but avoids giving any kind of rosetta stone from one to the other.
The only other options I can think of is to 1) copy the entire HTML page-source from the "Custom Board" and then start debugging the Javascript with ExtJS (but I cannot find an example of where to put the apiKey for ExtJS) or 2) bypass all of the APIs and use Ruby Watir-Webdriver (which uses
Selenium) and VNCServer to clip an image of the "Custom Board" page and show THAT in confluence.
Citations: http://pastebin.com/YMUEPjSF
The issue seems to be specific to the canned Custom Board that cannot be loaded externally. It should work if you write a js source code to build a similar Board and compile that into a deployment html. That is similar to option (1) you mentioned in the end of your post if I understand it correctly.
Here is my test where I compared Custom Board and Custom HTML side by side.
Below is a screenshot from Rally. This custom dashboard has Custom Board on the left and Custom HTML on the right. The Custom HTML is using a code example of filterable board from AppSDK2 documentation.
Next I use this code:
<html>
<head>
<title>Custom Grid</title>
<meta name="Name" content="App: Custom Dashboard"/>
<meta name="Version" content="2011.08.31"/>
<meta name="Vendor" content="Rally Labs, NickM"/>
<script type="text/javascript" src="https://rally1.rallydev.com/apps/1.32/sdk.js?loginKey=c33e83...."></script>
<script type="text/javascript">
rally.addOnLoad(function() {
var iframe = document.createElement("iframe");
iframe.src = "https://loginapirally1.rallydev.com/#/14018981229/custom/34207853894"
iframe.width = 2000;
iframe.height = 1000;
document.getElementById("storyboard").appendChild(iframe);
});
</script>
</head>
<body>
<div id="storyboard"></div>
</body>
</html>
Here is the dashboard loaded externally on localhost:3000. The left column of the dashboard where Custom Board is expected to load is empty, but the right column with a custom html code of a board loads successfully:
It looks like the canned Custom Board cannot be loaded externally but a custom html code written in AppSDK2 can be displayed externally.
A couple of observations:
There is really no upgrade path from AppSDK1 to AppSDK2. The underlying frameworks and the class structures are very different and the code cannot be simply refactored. There is no translation from one to the other.
LoginKey is intended to work with AppSDK1. Both are legacy. Both predate AppSDK2 and ApiKey. To use ApiKey with custom html apps written with AppSDK2 see "Use API Key with AppSDK2" article.
AppSDK2 does not support LoginKey usage for authentication. The reason it seems to work in this example is that we load the entire page. Loading the entire page using iframe's src property is possible with LoginKey. In this example there is no reason to use ApiKey and LoginKey together. You are right that ApiKey makes no difference in this use case.
The way LoginKey works is that it "tricks" the browser into thinking that there is this different server, loginapirally1.rallydev.com. If you look in Network tab of your browser and see that request comes from there it means that LoginKey is working. ApiKey works differently. There is no equivalent to loginapirally1 server with ApiKey.
If you are being prompted to supply login credentials when using LoginKey it means that LoginKey is not working. See "LoginKey Troublshooting" article.
Embedding custom AppSDK2 apps in 3rd party portals (running custom apps externally) is possible with ApiKey, and the supported scenario described in this guide is similar to the option (1) you mentioned in the end of your post. Loading entire Rally page or entire Rallynavigation is not a supported use case even though it is possible with LoginKey.
In HTML code I written script with data-url statically which working fine but my question is how to share link which is generated dynamically?
HTML
<div>
<script type="IN/Share" data-url="http://www.everdrobe.com/rate/551107c763eef/recent" data-counter="top" id="linked_url"></script>
</div>
Linkedin Script
<script src="//platform.linkedin.com/in.js" type="text/javascript"> lang: en_US</script>
I think script executed only once at load time that's why it not working any other way Can I share?
Help should appraciate.
In your js file,
$("#linked_url").click(function() {
window.open("https://www.linkedin.com/shareArticle?mini=true&url="
+ $(this).data("url")
+"&title=",'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');
return false;
});
You can share on LinkedIn using a format like so...
https://www.linkedin.com/sharing/share-offsite/?url={url}
Source: Official LinkedIn Sharing Documentation.
So, of course, then you can share in JS dynamically with just...
var yoururl = "yoursite.com?something=somethingelse&test=test2";
$('.share-link').html(
'<a href="' +
'https://www.linkedin.com/sharing/share-offsite/?url=' +
encodeURIComponent(yoururl) +
'">Share on LinkedIn</a>'
);
If you want to prepolulate things like title, description, thumbnail, etc., then check out the OpenGraph tags ase described by the Official LinkedIn Shareable Documentation.
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.