Topic on Project:Support desk

[RESOLVED] How to insert discussion widget from Facebook or VK.com to discussion page?

22
Fokebox (talkcontribs)

Hello all! I could not find how to do it. 1) Are there some extensions that allow to do that? 2) So I know how to insert some javascript of a widget to discussion page, but I need also to insert some javascript between <head> tags! How can I do it?

MarkAHershberger (talkcontribs)
Fokebox (talkcontribs)

How to insert JS I have done it already! I cannot adapt Facebok extension, 'cause I am not good at progamming in php ). I want to try to do it myself but I do need how to insert code between <head></head> tags in all pages of wikimedia

MarkAHershberger (talkcontribs)

You want to use something like MediaWiki:Common.js on your site.

Fokebox (talkcontribs)

Well I know how to insert other js script to some page! Now I need to find out how to insert some script between head tags in html in all pages, because there are some rules that are neccessary to follow, for example: Put this script tag to the <head> of your page

<script type="text/javascript" src="//vk.com/js/api/openapi.js?75"></script>

<script type="text/javascript">
  VK.init({apiId: API_ID, onlyWidgets: true});
</script>

and Put this div tag to the place, where the Comments block will be

<div id="vk_comments"></div>
<script type="text/javascript">
VK.Widgets.Comments("vk_comments", {limit: 10, width: "496", attach: "*"});
</script>

So I know how to put the second script to the page and need to know how to be with first one!

MarkAHershberger (talkcontribs)
Fokebox (talkcontribs)

No ... it is not a skin!!! I try to put VK widget to discussion page of the wikipages

MarkAHershberger (talkcontribs)

If you don't want to use a skin, then you'll have to use MediaWiki:Common.js to dynamically inject the necessary elements.

Fokebox (talkcontribs)

Well I tried to use Mediawiki:Common.js! I put this script there

<script type="text/javascript" src="//vk.com/js/api/openapi.js?75"></script>
<script type="text/javascript">
VK.init({apiId: API_ID, onlyWidgets: true});
</script>

But I could not see this scipt anywhere. I did not appear in html in all pages! I set $wgAllowUserJs to true, but I doesn't work at all! Here is the link to my common.js http://www.wikijournal.ru/index.php/MediaWiki:Common.js What should I do? And There is no result (

Ciencia Al Poder (talkcontribs)

Mediawiki:Common.js is a script, not an HTML file. So you should write there as if that's the contents of a <script></script>.

Try putting this instead:

$.getScript("//vk.com/js/api/openapi.js?75", function(data, textStatus, jqxhr) {
	VK.init({apiId: API_ID, onlyWidgets: true});
});
Fokebox (talkcontribs)

Thnks, I tried, but it doesn't make sense! Well If you would like to see what I want to do is here: http://www.wikijournal.ru/vk.html
I put second part of the scipt using htmlet, but I don't know what to do with the first part that should be in head of the html (

Ciencia Al Poder (talkcontribs)

I guess it doesn't work because you need to change API_ID with some code. I've actually didn't saw your wiki because your domain isn't known to my DNS...

But for you to understand, I'll explain the code:

$.getScript() loads a JavaScript URL, and when it's loaded, it executes the function passed as the second parameter. You need to do this because, as I said, you can't put <script> tags inside Common.js because it's not HTML but directly a JS file. But $.getScript() will load the script as if it was called by a script tag.

The VK.init part is inside of the callback function because it depends on the script being loaded, so it's execution should wait until the script has been loaded, since that load is done asynchronously (because it's not a script tag).

Following those instructions you should be able to insert a facebook widget as well.

Fokebox (talkcontribs)

Thank you for explaination. I changed API_ID to my own, so it was like this in Mediawiki:Common.js:

$.getScript("//vk.com/js/api/openapi.js?75", function(data, textStatus, jqxhr) {
	VK.init({apiId: 3354880, onlyWidgets: true});
});

but it didn't work! ( I tried to have the whole code of the widget inserted using htmlet to discussion page in my wiki:

<head>

<!-- Put this script tag to the <head> of your page -->
<script type="text/javascript" src="//vk.com/js/api/openapi.js?75"></script>

<script type="text/javascript">
  VK.init({apiId: 3354880, onlyWidgets: true});
</script>
</head>
<body>

<!-- Put this div tag to the place, where the Comments block will be!!! -->
<div id="vk_comments"></div>
<script type="text/javascript">
VK.Widgets.Comments("vk_comments", {limit: 20, width: "800", attach: false});
</script>

</body>

And widget started to work fine! Well I am not good at javascripts, but I guess that there is something wrong when I have the code in mediawiki:common.js
So could you help me please?

MarkAHershberger (talkcontribs)

You should really be using a tool to look at your browser's console. When I load a page on your site, I see this in the console:

 Error: JavaScript parse error: Parse error: Missing operand in file 'MediaWiki:Common.js' on line 1

You should only have javascript in Common.js. You can load js using mw.loader.load. I tried putting the following in MediWiki:Common.js:

 mw.loader.load("//vk.com/js/api/openapi.js?75");
 VK.init({apiId: API_ID, onlyWidgets: true});

but that failed with VK being undefined.

Fokebox (talkcontribs)

I tried too

mw.loader.load("//vk.com/js/api/openapi.js?75");
VK.init({apiId: 3354880, onlyWidgets: true});

It didn't help. Is there anyway to put the code that I need directly between <head> tags in some php files of the wikimedia?

MarkAHershberger (talkcontribs)

Since your code is essentially the same as mine, I'm sure it failed the same way.

I've pointed Krinkle to this discussion. He was responsible for a lot of the ResourceLoader bits and can probably be more help here.

212.109.27.31 (talkcontribs)

<script type="text/javascript" src="//vk.com/js/api/openapi.js?82"></script>

<script type="text/javascript">

 VK.init({apiId: API_ID, onlyWidgets: true});

</script>

<script type="text/javascript"> VK.Widgets.Comments("vk_comments", {limit: 10, width: "496", attach: "*"}); </script>

Krinkle (talkcontribs)

Ciencia Al Poder already gave the solution a while ago.

mw.loader isn't relevant here since this isn't using ResourceLoader. Use jQuery.getScript with the callback it provides (since it is asynchronous).

  • Open MediaWiki:Common.css:
  • Edit
  • Select everything in the edit area
  • Replace with this:
jQuery.getScript('//vk.com/js/api/openapi.js?76', function () {
    VK.init({apiId: 3354880, onlyWidgets: true});
});
Fokebox (talkcontribs)

Thanks for your attention on this topic, did you mean open MediaWiki:Common.js instead of MeidaWiki:Common.css?
Anyway your code doesn't work. Widget do not appear on the page!

<head>

<!-- Put this script tag to the <head> of your page -->
<script type="text/javascript" src="//vk.com/js/api/openapi.js?75"></script>

<script type="text/javascript">
  VK.init({apiId: 3354880, onlyWidgets: true});
</script>
</head>
<body>

<!-- Put this div tag to the place, where the Comments block will be!!! -->
<div id="vk_comments"></div>
<script type="text/javascript">
VK.Widgets.Comments("vk_comments", {limit: 20, width: "800", attach: false});
</script>

</body>

But I tried another way which works perfectly! I created html page and inserted the whole script there and I used htmlet to link this page! And widget started to work! ) ... I guess it is not correct because there are head tags in the midle of html.

Ciencia Al Poder (talkcontribs)

Did you put <div id="vk_comments"></div> on the page you wanted the widget to appear? Because maybe you forgot to do that and that's why it wasn't working.

Well, in that case the script should be adapted a little:

jQuery.getScript('//vk.com/js/api/openapi.js?76', function () {
    VK.init({apiId: 3354880, onlyWidgets: true});
	$(function() {
		if ($('#vk_comments').length) {
			VK.Widgets.Comments("vk_comments", {limit: 20, width: "800", attach: false});
		}
	});
});
Fokebox (talkcontribs)

Thx for help, but I have found a solution! I created html file with this script and inserted to the discussion page using htmlet )

Krinkle (talkcontribs)

The code Ciencia and I posted should go on MediaWiki:Common.js. And no HTML (no <head>, <script>, <body> or <div>), just the snippet we posted, nothing more.

The solution you're opting now for I highly discourage, but do whatever you want.

Reply to "[RESOLVED] How to insert discussion widget from Facebook or VK.com to discussion page?"