and thanks for taking a moment,
I have gone to the twitter site and created an embedded timeline per their instructions.
if I place the generated code on a simple html page on my desktop, all works as expected. When I place the same code inside my SPA application, i only get a 'follow me' link on the site. The SPA application is built on the John Papa example.
There are no javascript errors thrown. I'm guessing that the heart of the issue may have something to do with the routing, b/c if I navigate directly to the page where I've embedded my timeline, the code works as expected.
i.e. http://localhost:50000/App/views/shared/pillar.html
However, I also have a google calendar widget, and that works as expected.
Tested this in Chrome, FF, IE. Behavior is the same.
Any thoughts on how I might diagnose this further? Or is my approach totally wrong? I'm just looking to add the latest n-number of tweets to what is basically a blog. Nothing too fancy.
<a class="twitter-timeline" href="https://twitter.com/PoundingCode" data-widget-id="313336765203218432">Tweets by #PoundingCode</a>
<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");
I figured out a solution, but rather than take this down, I hope it might help the next person:
Put the twitter widget code into a new html document.
Have that document take in a querystring called handle
Have that html document parse the querystring and inject it.
Create an iframe bound to an observable that has your twitter handle, passing in that handle as your querystring parameter.
the iFrame data-binding:
iframe data-bind="with: twitter, attr: { src: '../App/views/shared/twitter.html?handle=' + twitter() }" style="height:622px;" seamless="seamless"
The twitter page
<body>
<a class="twitter-timeline" href="https://twitter.com/" + get('handle') data-widget-id="313336765203218432" ></a>
<script>
function get(name) {
if (name = (new RegExp('[?&]' + encodeURIComponent(name) + '=([^&]*)')).exec(location.search))
return decodeURIComponent(name[1]);
}
!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>
</body>
The Twitter script only checks the DOM once after being loaded. An SPA changes the DOM dynamically, so you have to tell the Twitter script to scan the DOM again:
const twttr = window.twttr
twttr.widgets.load()
If the script was loaded already (usually https://platform.twitter.com/widgets.js), then the twttr object is available in the global namespace.
Here is the relevant documentation: https://developer.twitter.com/en/docs/twitter-for-websites/javascript-api/guides/scripting-loading-and-initialization
Related
I have a local host application in which a user can enter a blog to website by logging in and anyone can read the contents of the blog. while creating the blog the application auto generates a url based on the name of the blog. The URL is a basically a string e.g. Name: "New Blog" URL: "New-Blog".
Now when a person views the blog i want to give him the ability to share the blog on his Facebook account. So i used a Facebook code generator to ge teh code for the share 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 = 'https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v3.2';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-share-button" data-href="http://localhost/Blog/{{BlogList.Url}}" data-layout="button" data-size="large" data-mobile-iframe="false"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&src=sdkpreparse" class="fb-xfbml-parse-ignore"></a></div>
This was the code that was generated. Now i realize that this is not going to work with the url i am passing: http://localhost/Blog/{{BlogList.Url}}
Now what url should i use to be able to share this on facebook while also get the url name that was auto generated.
The URL must be absolute, and it must be public:
http://yourdomain/Blog/xxx
You need to replace localhost with your domain, and you may want to use https instead of http. You should not use http anymore, but that is just a side note.
I created this script to hide a page only if chrome 18 has not been found, how can I make sure to do the redirect of the url to a external page if chrome 18 has not been found instead of hiding only the page ?
I want to do the redirect to this website http://search.aol.com/aol/webhome
<div id="hiddenContent" style="display: none;">
My hidden content.
</div>
<script>
function GetChromeVersion() {
var raw = navigator.userAgent.match(/Chrom(e|ium)\/([0-9]+)\./);
return raw ? parseInt(raw[2], 10) : false;
}
if (GetChromeVersion() == 18)
document.getElementById("hiddenContent").style.display = "";
</script>
It's possible, e.g. by using:
window.location.href='http://search.aol.com/aol/webhome';
Inside your function. BUT I wouldn't recommend you this. You should never trust the client as JavaScript can easily be changed and someone could access your site even despite the JavaScript redirect if they wanted to and made a minimal effort to modify page sources. Javascript is handled on the client-side, while php is completely server-side. In this case I'd use php instead of JavaScript. Try to check it with php and if it's not chrome 18, use: header('Location: http://search.aol.com/aol/webhome');
Edit:
<?php function is_chrome()
{
return(eregi("chrome/18", $_SERVER['HTTP_USER_AGENT'])); } if(is_chrome()) { header('Location: http://www.search.aol.com/aol/webhome'); } ?>
Place it on top of the file, should work, but haven't tested it yet, if not, just change the string in eregi('chrome/18') to what you need (it's a regular expression)
I've got an odd issue that I cannot figure out. When using Twitter and Google+ share buttons, it shares the correct page title, but also gives a completely wrong URL.
What's even more weird is that it is using a URL from another website of mine, completely unrelated!
These are the buttons:
<li>Tweet</li>
<li><div class="g-plusone" data-size="medium" data-annotation="inline"></div></li>
Here is the javascript that powers them:
<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>
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
I've made sure to be logged into the right account when grabbing the code for the buttons.
I don't get it!
ps. It is being done within my own Wordpress Template if that helps, but I've done this before with no problems.
Make sure you don't have a rel=canonical link on your page pointing to a different URL. Perhaps another plugin is outputting it?
I think I've looked over 50 different examples online, but can't find the same problem.
I've got a jquery mobile site and a full site (it's a WordPress site). I've put the following code in the header.php file of the full site:
<script type="text/javascript">
function urlParam(name){
var results = new RegExp('[\\?&]' + name + '=([^amp;#]*)').exec(window.location.href);
if(results)
return results[1] || 0;
else
return '';
}
if(urlParam('view') == 'full'){
}
if(urlParam('view') == ''){
// <![CDATA[
var mobile = (/iphone|ipad|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));
if (mobile) {
document.location = "http://mysite.com/mobile/index.html";
}
// ]]>
}
</script>
This works fine and when I load the full site on my iphone it redirects to the mobile version.
However, I have a link to the full site on my mobile site like so:
<li>Full Site</li>
When I click this link it DOES take me to the full site, but if I click on any links on the full site, I get redirected back to the mobile site.
FYI, I've tried (and failed) setting cookies. All the scripts I've used haven't worked (I'm sure it's my fault) and I end up stuck in a continuous redirect.
First off, you only need the statement: if(urlParam('view') != 'full'){ check if mobile and redirect.. }
I suggest you use document.write(urlParam('view')); to check what urlParam('view') actually returns. This should make it easier for you to debug. Though the best way to debug is to use chrome or firefox tools.
Having some trouble getting the link back to the page from a posted FB Comment plugin to work. Here is my situation:
Setup Comments plugin using HTML5 code snippet provided by FB.
Page renders correctly with FB Comments plugin showing.
I'm able to successfully post a comment using the plugin.
The submitted comment properly displays on my FB Wall. However, when I click on the link to be taken to the commented article I am led to the page properly, but my FB comment is missing from the plugin section.
In other words, if I go to a URL like below I can post my FB comment and refresh the page and the comment appears:
http://www.foo.com/bar/
However, when clicking on the post from my FB Wall I am led to a URL like below which shows the plugin area with no posts:
http://www.foo.com/bar/?fb_comment_id=fbc_10150317957204611_18871330_10150317957674611#f14f0016ac
My code snippet for the page with the plugin looks something like this:
<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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-comments" data-href="http://www.foo.com/bar/" data-num-posts="2" data-width="668" style="margin-top: 10px;"></div>
The problem might be on how you get the url you feed fb-comments (http://foo.com/bar/)
DO NOT use data-href="< ?php echo $_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"]; ?> to get the url. For some reason Facebook's new comment id parameter doesn't work with that.
If you get the url from a local function such as data-href="<?php echo get_post_permalink() ?>" it works! And when you click the post from FB wall, it takes you to that exact comment