I've created an alternate view for the detail page of a contentitem.
In this view I try to add the facebook commentsplugin to this view. The necessary javascript includes for the plugin to work are added.
This works
<div class="fb-comments" data-href="http://*************/#(Model.Header.Parent.ContentItem.AutoroutePart.Path)" data-numposts="1" data-colorscheme="light"></div>
This not
<div class="fb-comments" data-href="#(Model.Header.Parent.ContentItem.AutoroutePart.Path)" data-numposts="1" data-colorscheme="light"></div>
Is there a way to get the full url in an Orchard Alternate View like Request.Url.ToString()?
This can be read with ViewContext
<div class="fb-comments" data-href="#(ViewContext.HttpContext.Request.Url.ToString())" data-numposts="1" data-colorscheme="light"></div>
I got the comments plugin and the like button now working with the following workarround in jQuery
<div class="fb-comments" data-href="#(Model.Header.Parent.ContentItem.AutoroutePart.Path)" data-numposts="1" data-colorscheme="light"></div>
<div id="fb-root"></div>
<script>
$(function () {
if ($('.fb-comments, .fb-like').length > 0) {
$('.fb-comments, .fb-like').each(function () {
var href = location.protocol + "//" + location.hostname + "/" + $(this).data("href");
$(this).attr("data-href", href);
}).promise().done(includeFacebook);
} else {
includeFacebook();
}
});
function includeFacebook() {
(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/nl_NL/all.js#xfbml=1&appId=##########";
fjs.parentNode.insertBefore(js, fjs);
} (document, 'script', 'facebook-jssdk'));
}
Related
In my vue component I am adding a twitter button to tweet a URL that I give as prop to the component:
<a
class="twitter-share-button"
data-via="myPage"
data-size="large"
data-text="Check this out!"
:data-url="`https://mywebsite.com/${shareLink}`"
href="https://twitter.com/intent/tweet">
Tweet</a>
I have placed the embed code in mounted so it gets initialized on component mount.
mounted () {
this.twttr = (function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0],
t = window.twttr || {};
if (d.getElementById(id)) return t;
js = d.createElement(s);
js.id = id;
js.src = "https://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
t._e = [];
t.ready = function(f) {
t._e.push(f);
};
return t;
}(document, "script", "twitter-wjs"));
}
When shareLink changes I expect the Tweet button to share the reactive URL but its not. The URL stays the same as it was when the component was initialized.
So I have tried different things:
I have used a watcher to watch shareLink changes and re-render the Tweet button. That does not work.
I have removed the Tweet button from the DOM and re-placed it when shareLink changes. No success.
In the parent component I have increased a key value to re-generate the Tweet component when shareLink changes. Does not work.
I even tried to manipulate the data-url directly in the generated iframe that gets served by Twitter. No success.
I also initialise the twitter embed code when shareLink changes of course
Is there anything I oversee here?
I found the answer. The problem basically was that I would need to call twttr.widgets.load() when something in the button changes (source)
I therefore made the twttr code reactive itself, put it into the data function and refresh it via watcher when shareLink changes:
<template>
<span v-html="tweetButton"/>
</template>
<script>
export default {
data () {
return {
tweetButton: '',
twttr: {}
}
},
props: {
shareLink: String
},
mounted () {
this.renderTweetButton()
},
methods: {
renderTweetButton () {
this.tweetButton = `<a
class="twitter-share-button"
data-via="Example"
data-size="large"
data-text="Check this out!"
data-url="https://mywebsite.com/${this.shareLink}"
href="https://twitter.com/intent/tweet">
Tweet</a>`
this.twttr = (function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0],
t = window.twttr || {};
if (d.getElementById(id)) return t;
js = d.createElement(s);
js.id = id;
js.src = "https://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
t._e = [];
t.ready = function(f) {
t._e.push(f);
};
return t;
}(document, "script", "twitter-wjs"));
}
},
watch: {
shareLink () {
this.renderTweetButton()
this.twttr.widgets.load()
}
}
}
</script>
<style lang="sass" scoped>
</style>
This works great!
How about this:
Vue.component('BtnTwttr', {
props: {
shareLink: {
type: String,
default: ''
}
},
computed: {
encodedShareLink() {
return encodeURIComponent(`https://mywebsite.com/${this.shareLink}`)
}
},
template: ' <a class="twitter-share-button" data-size="large" :href="`https://twitter.com/intent/tweet?via=myPage&text=Check this out!&url=${encodedShareLink}`">Tweet: {{shareLink}}</a>'
})
new Vue({
el: "#app",
data: {
link: ''
},
mounted() {
this.twttr = (function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0],
t = window.twttr || {};
if (d.getElementById(id)) return t;
js = d.createElement(s);
js.id = id;
js.src = "https://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
t._e = [];
t.ready = function(f) {
t._e.push(f);
};
return t;
}(document, "script", "twitter-wjs"));
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<input type="text" v-model="link" /><br />
<btn-twttr :share-link="link" />
</div>
This works with any string that you write in the input field. (Unfortunately you cannot really test it in StackOverflow's sandboxed environment, but I tried copying the create string and using it in the browswer.)
I'm trying to create a facebook like box component on vue.js. Ths SFC looks like this:
<template>
<div>
<div v-html="fbSdk"></div>
<div v-if="facebookPage" class="fb-page"
:data-href="facebookPage"
data-hide-cover="false"
data-show-facepile="true"></div>
</div>
</div>
</template>
<script>
export default{
data: {
fbSdk: `
<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>
`
},
computed: {
facebookPage(){
return (this.$store.getters.postLogin) ? this.$store.getters.postLogin.payload.facebook_page : null;
},
}
}
</script>
I know we cannot assign a script tag in the data object like I did (or am I wrong). I'm getting a compilation error as follows:
ERROR in ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/facebook-sdk/facebook-like.vue
Module build failed: SyntaxError: Unterminated template (15:12)
13 | export default{
14 | data: {
> 15 | fbSdk: `
| ^
16 | <div id="fb-root"></div>
17 | <script>
18 | (function(d, s, id) {
# ./src/components/facebook-sdk/facebook-like.vue 4:2-113
# ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/views/thankyou.vue
# ./src/views/thankyou.vue
# ./src/routes/index.js
# ./src/main.js
# multi ./build/dev-client ./src/main.js
Is there a better way to do this?
The template string problem
The presence if </script> inside the template string closes the tag (and the string), thus the "unterminated" error.
Fix: Escape the </script> by using <\/script>:
data: {
fbSdk: `
<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>
`
},
An alternative solution
Instead of adding the script, execute the code inside mounted() lifecycle hook.
First move the <div id="fb-root"></div> to the template. Second, have that logic go to the mounted, but make sure you add an if, so the <script> is not appended multiple times.
<template>
<div>
<div id="fb-root"></div>
<div v-if="facebookPage" class="fb-page"
:data-href="facebookPage"
data-hide-cover="false"
data-show-facepile="true"></div>
</div>
</div>
</template>
<script>
export default{
data: {},
mounted() {
if (!document.getElementById('facebook-jssdk')) {
(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'));
}
},
computed: {
facebookPage(){
return (this.$store.getters.postLogin) ? this.$store.getters.postLogin.payload.facebook_page : null;
},
}
}
</script>
A hack
Another alternative, is to use a sort of a vue hack to use <script> tag in the template. Basically you create a <vue-hack-script> component that will be rendered as <script> tag.
Example below:
<template>
<div>
<div id="fb-root"></div>
<vue-hack-script v-once>
(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'));
</vue-hack-script>
<div v-if="facebookPage" class="fb-page"
:data-href="facebookPage"
data-hide-cover="false"
data-show-facepile="true">
</div>
</div>
</template>
<script>
export default {
data: {},
computed: {
facebookPage() {
return (this.$store.getters.postLogin) ? this.$store.getters.postLogin.payload.facebook_page : null;
},
},
components: {
'v-hack-script': { render: function (h) { return h('script', this.$slots.default) } }
}
}
</script>
I have a PDF which is open in new Window through Iframe, but when I disabled the f12 and inspect Element then it is not working on that PDF, it's working outside of PDF.
<body>
<div id="divPDFView" style="margin: auto;text-align: center;">
</div>
<div style="display:none;" id="divDocument">
#if (Model.MyAccountList.Count > 0)
{
foreach (var items in Model.MyAccountList)
{
<a href="#" onclick="myPdf(this)" id="#items.PdfName">
<div class="sm-video">
///There have some work
</div>
}
}
</body>
<script>
function myPdf(e) {
var filen = e.id;
debugger;
window.open('#Url.Action("pdfshow", "MyAccount")?pdfname=' + filen);
}
</script>
///Here i show PDF From View Which is pdfshow
<body>
<div>
#Html.Raw(TempData["Embed"])
</div>
</body>
This is JavaScript code which I use to disable the F12 and Inspect Element but this is work outside of PDF.
<script>
$(document).ready(function () {
debugger
document.onmousedown = disableclick;
status = "Right Click Disabled";
function disableclick(event) {
if (event.button == 2) {
alert(status);
return false;
}
}
});
</script>
<script type='text/javascript'>
$(document).keydown(function (event) {
debugger
if (event.keyCode == 123) {
return false;
}
else if (event.ctrlKey && event.shiftKey && event.keyCode == 73) {
return false; //Prevent from ctrl+shift+i
}
});
</script>
This is the controller code where PDF is created using Iframe
public ActionResult pdfshow(string pdfname = null)
{
string pdffile ="<iframe src='/Content/TutorialImage/TutorialPdf/" +
pdfname + "#toolbar=0' width='800px' height='600px'
id='myframe' oncontextmenu='return false;' >
</iframe>";
TempData["Embed"] = pdffile;
return View(TempData["Embed"]);
}
I'm trying to get a login via Javascript SDK from Facebook.
I just have never done something like that.
So this is my source code:
<html>
<head>
</head>
<body>
<script type="text/javascript">
window.fbAsyncInit=function(){
FB.init({
appId : '1234567890',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(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/es_LA/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
console.log('Logged in.');
}
else {
console.log('Logging in...');
FB.login();
}
});
</script>
<input type="button" onClick="FB.getLoginStatus();" value="Login" />
</body>
</html>
But sadly this is doing... nothing :(
There is nothing I can see in the console and nothing displayed (even if I push the Login-Button)
Maybe someone could help me?!
Best regards,
Kartilia
I have a website where I'm using facebook button after each post my website. The problem is that it takes a lot of time to load all buttons. Can I do something to make it load faster?
I'm using Facebook SDK. I'm using this code after body tag.
<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&appId='myid'&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
And the button code:
<div class="fb-like" data-href="" data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"></div>
<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.async=true;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&appId='myid'&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}
(document, 'script', 'facebook-jssdk'));
</script>