« 上一篇 | 下一篇»

將 Google+ 訊息嵌入到 LifeType

22 九月, 2013 02:28 •  (2) 迴響  •  引用(0)  •  1504 hit.  • 分類: LifeType , google , Google+   

Google+ 有提供語法,可以將訊息內容嵌入到其他網頁。

嵌入的語法如

<!-- Place this tag in your head or just before your close body tag. --><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<!-- Place this tag where you want the widget to render. --><div class="g-post" data-href="https://plus.google.com/110359647288464417490/posts/ZgZPF5bg1yZ"></div>

 

只要把上面的與語法,貼到一般網頁原始碼裡面,就完成了,很簡單。結果可以參考這個測試 Hi Slider 的網頁
 

若是在 Blogger 上,也只要在寫文章時,切換到 html ,把上面的語法貼上去,就完成了。
 
 

但是,若是要把這語法貼到 LifeType 的文章中,由於 LifeType的文字編輯器 TinyMCE,及 LifeType 安全性設定的關係,就要修改些東西,才能正常顯示了!

 

一、修改模版檔案

在模版中有這一段 Script 語法

  • <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

比較方便的方法,就是把它加進模版檔案 header.template 裡面,我目前是加在<head> 底下。

又因為 LifeType 安全性的關係,在 Script 語法的前後要加上 {literal} {/literal}

上面的 {lang: 'zh-TW'} 可以不管它,那是為了要在 LifeType 文章中加入的 Google+ 迴響區塊,讓他變成中文而加進去的。


二、修改  /js/tinymce/tiny_mce-plog.js 

Google+ 的嵌入語法中,有這一段語法,這是要貼在文章中的

  • <div class="g-post" data-href="https://plus.google.com/110359647288464417490/posts/ZgZPF5bg1yZ"></div>

上面 div 裡面有 class、data-href 的標籤,若是把上面的語法直接貼到文章中,這些標籤會被 TinyMCE 吃掉。

所以要修改 tiny_mce-plog.js,讓 TinyMCE 知道他們是合法的標籤。

修改 /js/tinymce/tiny_mce-plog.js , 在 extended_valid_elements 裡面,新增

  • div[class|data-href]

 

這樣準備工作就完成了,以後若是要在 LifeType 文章中嵌入訊息,只要切換到 html 碼模式,貼上 Google+ 訊息的語法就完成了!

 

效果如下:


 

 

 

ps:

之前一直在測試這個Google+嵌入LifeType 的作法,偶爾可以看到在文章中成功出現Google+ 訊息的畫面,但大部分是失敗的。後來經過測試,因為我這模版檔案裡,以前有加上 lightbox 效果的 Script 語法

<script type="text/javascript" src="{$url->getUrl("/lightbox2/js/prototype.js")}"></script>
<script type="text/javascript" src="{$url->getUrl("/lightbox2/js/scriptaculous.js?load=effects")}"></script>
<script type="text/javascript" src="{$url->getUrl("/lightbox2/js/lightbox.js")}"></script>
<link rel="stylesheet" href="{$url->getUrl("/lightbox2/css/lightbox.css")}" type="text/css" media="screen" />
 

就是因為這些語法的關係,所以好像不能很順利的連到 https://apis.google.com/js/plusone.js ,導致G+ 訊息不能正常顯示嵌入,把它移除,就正常了!

創用 CC 授權條款
 
 
Related Posts Plugin for WordPress, Blogger...

2 Comments on "將 Google+ 訊息嵌入到 LifeType"

 

  1. OK了

       作者 yunol       [管理]

    自己加入就成功了!多謝阿欣。

    大姊:

    我正要回覆妳,妳就完成了!微笑

    我現在才發現,我們的版本都是 lifetype-1.2.11_r7114 ,裡面的 tiny_mce-plog.js 跟以前的版本內容有一點點不一樣。至於哪一版時改的,不確定了。

    剛剛才看到現在已有 1.2.12 版了, tiny_mce-plog.js 就跟我以前印象中的又一樣了!

    不管了,其實你可以直接看到我的  tiny_mce-plog.js ,妳現在的檔案就對了,extended_valid_elements 自己加進去就可以了!

  2.  

  3. 請問該如何修改?

       作者 yunol       [管理]

    我的TinyMCE是3.0的,tiny_mce-plog.js中找不到extended_valid_elements,有這段elements : "postText,postExtendedText",
    我加到裡面可是沒用,請問該如何修改?

  4.  

發表迴響
 authimage

Google+ 迴響

*********