Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

Widgets /

Discuss SilverStripe Widgets.

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

Adding external JavaScript/widget


Reply


843 Views

Avatar
debtfreeslave

Community Member, 13 Posts

18 July 2012 at 9:04pm

Hi

I am maintaining a Silverstripe 2.3.7 site and am frequently getting request to add in small pieces of code for some small functionality that needs to be implemented. The problem is that the code usually needs to target a specific page, for example - I have been asked to implement Learnpipe

See exactly what this is
http://www.learnpipe.ie/

The people at Learnpipe sent me the following:

Step 1. To ensure Facebook posts include your logo - insert the following code in the
<header> section of the template.
/********************************************/
I have inserted this in the /templates/Page.ss header
/********************************************/
<link rel="image_src" href="http://a2.sphotos.ak.fbcdn.net/hphotos-ak-ash3/
537010_372006922830724_988906636_n.jpg" width="100">

This will ensure that all questions that are shared to Facebook are displayed with the correct
logo. **If this change is NOT made, Facebook will randomly take an image from each page.

Step 2. Social Q&A widget
This is the active widget snippet for your college. Place in an appropriate place within the page
template.
/*******************************************************************************************************/
Here's the problem our templates are divided in faculties and then courses but all the computer courses use the same template so in order to target a particular computer course I need to add this java script on the page through the CMS. Initially when i did this the code was just striped I then edited the tiny mce config file to allow JS (extended elements) it stopped stripping but still didn't work. I then tried to use a html page I inserted my JS into the HTML and called it into the page using an iFrame.
/*******************************************************************************************************/
<script type="text/javascript" src="http://www.learnpipe.com/javascript/widget/qa/QAInit.js"></
script>
<script type="text/javascript">
var lpQA = lpQA({
appID:"some_id",
genQ: "false",
identifier: "your course code"
});
</script>

Variables explained:
appID : fixed and valid widget application ID, which is provided by learnpipe.
identifier: A widget identifier is a unique string which is used to look up/group page questions in the learnpipe
system. Please pass in the coursecode variable here. The relevant course codes are included in the table
below.
genQ: With this option set to “false”, the system treats the page as a course page. With this option “true”, the
system will enable non course specific questions. Use this option for non-course pages (contact, admissions,
accommodation, etc.).

/*******************************************************************************************************/
The target page imports the page.ss js as below:

<div>
<script type="text/javascript" src="http://www.learnpipe.com/javascript/widget/qa/QAInit.js"></script>
<script type="text/javascript"></script>
</div>

And the iframe is the following:

<p><iframe src="themes/gcd/templates/Includes/LearnpipeBAAFH.html" width="100%" frameborder="0"></iframe></p>

I didn't design the site so i am not an experienced SS developer but do use your great forums just could'nt find any info on this.
Ideally I'd like to find a method of targeting individual page with js if this is possible

Thanks in Advance

Gem