Include JavaScript code

##How to add (embed) custom code to berta.me website

There are two ways how add (embed) elements from other webites:

1. if embed code contains <iframe> or <div> then just open description field, choose HTML in upper right corner and paste the code. This is the simplest method. It is supported by google maps, YouYube, Vimeo and many others. Unfortunately not all services provide this option.

2. if your embed code also contains <script> in it, that means some JavaScript will be executed. This is more tricky, because if the code is somehow wrong, it can damage or erase the content of your website. To add JavaScript code go to Settings > Other settings > Javascript include field. In this field paste the JavaScript part of the code, but in description field paste HTML code. Follow our examples, if you not sure what are you doing.

---

###Add Facebook Like button

Use facebook button builder Like button builder or edit the code below. If something goes wrong simply delete it and start again. Javascript include field should contain code 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_GB/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

The code you paste into description field of your entry should be like this (replace www.berta.me with your own domain name):

<div class="fb-like" data-href="www.berta.me" data-send="true" data-width="450" data-show-faces="true"></div>

Add Facebook comments

Use facebook comments code builder or edit the code below. If something goes wrong simply delete it and start again. appId - replace application Id with your facebook application ID. Read more about facebook application ID in code builder page. Keep in mind, that this javascript code also works with like button, you don't have to duplicate it. Javascript include field should contain code 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_GB/all.js#xfbml=1&appId=1111111111";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

The code you paste into description field of your entry should be like this (replace www.berta.me with your own URL):

<div class="fb-comments" data-href="www.berta.me" data-num-posts="2" data-width="500"></div>

Add twitter feed

Use twitter widget builder to get latest code snippet or use our sample provided below.

elementID - replace with HTML element ID, twitter widget builder does not include id definition, you must add it yourself.

your_twitter_account - replace with your twitter account

The code below goes to JS field in Settings panel (it is default code, just line with id: 'elementID' is added):

<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
 id: 'elementID',
 version: 2,
 type: 'profile',
 rpp: 4,
 interval: 30000,
 width: 250,
 height: 300,
 theme: {
   shell: {
     background: '#333333',
     color: '#ffffff'
   },
   tweets: {
     background: '#000000',
     color: '#ffffff',
     links: '#4aed05'
   }
 },
 features: {
   scrollbar: false,
   loop: false,
   live: false,
   behavior: 'all'
 }
}).render().setUser('your_twitter_account').start();
</script>`

Add following code into HTML view of description field (or any where you can paste HTML). Don't forget to change elementID here too – it must be the same as in code above.

<div id="elementID"></div>

Add disqus comment field

To include DISQUS comments, add code provided below. Replace disqus shotname my_name with yours, more info at DISQUS Docs.

<script type="text/javascript">
    var disqus_shortname = 'my_name';
    (function() {
        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
        dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
</script>

The code you paste into description field of your entry should be like this:

<div id="disqus_thread"></div>

Add video

Most video sharing services like YouTube, Vimeo offer simple iframe version of embed code. Simply grab the code and paste into HTML of description field.

Add Soundcloud

Soundcloud offers iframe version of embed code. Simply grab the embed code and paste into HTML of description field.

Add Google maps

Google Maps offers iframe version of embed code. Simply grab the embed code and paste into HTML of description field.

Add Google +1 Button

To include Google +1 Button use builder or add code provided below:

<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>

The code you paste into description field of your entry should be like this:

<div class="g-plusone" data-size="tall"></div>

More info and customization options on Google +1 Button.

Add Custom JavaSript code

You can add any JavaScript code in berta as long the code is separated from rendering – pasting JavaScript into settings panel – YES, pasting it into description field – NO!

Add Multiple social media icons at once!

Please, look here for instructions.

Add Speaker Deck

Not supported at the moment

Add Tumblr page

Not supported at the moment

If you wish for more, please post a new issue or contact us.