Page 1 of 1

fb likebox disappears after backend editing

Posted: Tue Jun 25, 2013 9:24 am
by pigsound
hi,

i inserted the facebook like box into a cmsimplewebsite and it works quite well, but when the content is edited via the backend-login, the whole <div> defining the like box disappears. i tried to enter the lines for the <div> manually in the source code of the cmsimple-editor, but this does not work; the code is simply not saved.
does anyone know why this happens?

this is the part of the code that is being deleted somehow:

Code: Select all

<div class="fb-like-box" data-href="https://www.facebook.com/myfacebookpage" data-width="435" data-height="450" data-show-faces="false" data-stream="true" data-show-border="false" data-header="false" force_wall="true" sp_help="false">
    </div>
i already looked for a plugin, but i could not find any that seemed useful in this case.

pigsound

Re: fb likebox disappears after backend editing

Posted: Tue Jun 25, 2013 9:50 am
by Maxim

Re: fb likebox disappears after backend editing

Posted: Tue Jun 25, 2013 9:55 am
by cmb
Hi pigsound,

the editors (which one do you use? TinyMCE?) usually are configured to clean the edited (X)HTML, so as to produce valid (X)HTML. In this case the attributes might be the problem. For TinyMCE you can configure extended_valid_elements (see http://www.cmsimple-xh.org/wiki/doku.ph ... tomization).

However, there is Faceblink, which should work fine.

Christoph

Re: fb likebox disappears after backend editing

Posted: Tue Jun 25, 2013 10:45 am
by pigsound
hi dear helpers,

@ maxim: thank you. i tried the wrapper. i installed the plugin, copied the code into the content page but i could not make it work.

@ mcb: faceblink seems to only work for likebutton, sharebutton and facebook-link. i don't know how to use it with the facebook like box.

yes, i use TinyMCE. i read the instrucktions in the link you posted. i opened the init_full.js file in the folder plugins/tinymce/inits/
what do i have to add to avoid that tinyMCE deletes my sourcecode for the likebox?
init_full.js code:

Code: Select all

{
    // General options

    theme : "advanced",
    element_format : "%ELEMENT_FORMAT%",
    language : "%LANGUAGE%",
    plugins : "autosave,pagebreak,style,layer,table,save,advimage,advlink,advhr,emotions,iespell,"
            + "insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,"
            + "noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount,media,lists",
   /*
    style_formats : [


        {title : "Normal", block : "p", classes : true , remove : "all", exact : false},
        {title : "Teaser", block : "p", classes : "teaser", exact : true},
        {title : "Zitat",  block : "p", classes : "zitat", exact : false },

    ],*/
    // Theme options
    theme_advanced_buttons1 : "save,|,fullscreen,code,formatselect,fontselect,fontsizeselect,styleselect",
    theme_advanced_buttons2 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,cut,copy,paste,pastetext,pasteword,|,bullist,numlist,outdent,indent,blockquote",
    theme_advanced_buttons3 : "undo,redo,|,link,unlink,anchor,image,media,cleanup,|,hr,removeformat,visualaid,|,forecolor,backcolor,|,search,replace,|,charmap",
    theme_advanced_buttons4 : "emotions,sub,sup,|,tablecontrols,insertdate,inserttime,help",
    theme_advanced_toolbar_location : "top",
    theme_advanced_toolbar_align : "left",
    theme_advanced_statusbar_location : "bottom",
    theme_advanced_resizing : true,
    theme_advanced_blockformats : "h1,h2,h3,p,div,h4,h5,h6,blockquote,dt,dd,code",
    theme_advanced_font_sizes : "8px=8px, 10px=10px,12px=12px, 14px=14px, 16px=16px, 18px=18px,20px=20px,24px=24px,36px=36px",


//    height : "%EDITOR_HEIGHT%",
    content_css : "%STYLESHEET%",
    //link and image list
    external_image_list_url: "%TINY_FOLDER%cms_image_list.js",
    external_link_list_url: "%TINY_FOLDER%cms_link_list.js",

    // Extra
    plugin_insertdate_dateFormat: "%d-%m-%Y",
    plugin_insertdate_timeFormat: "%H:%M:%S",
    inline_styles : true,
    apply_source_formatting : true,
    relative_urls : true,
    convert_urls: false,
    entity_encoding : "raw",
//    entity_encoding : "'.$plugin_cf['tinymce']['entity_encoding'].'",


    file_browser_callback: "%FILEBROWSER_CALLBACK%" ,
    fullscreen_new_window : false ,
    fullscreen_settings : {
    theme_advanced_buttons1: "save,|,fullscreen,code,|,formatselect,fontselect,fontsizeselect,styleselect,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,cut,copy,paste,pastetext,pasteword,|,bullist,numlist,outdent,indent,blockquote,|,undo,redo",
    theme_advanced_buttons2 : "link,unlink,anchor,image,media,cleanup,|,hr,removeformat,visualaid,|,forecolor,backcolor,|,search,replace,|,charmap,emotions,|,sub,sup,tablecontrols,insertdate,inserttime,|,help",
	theme_advanced_buttons3 : "",
	theme_advanced_buttons4 : ""

    }
}

Re: fb likebox disappears after backend editing

Posted: Tue Jun 25, 2013 10:56 am
by cmb
pigsound wrote:i read the instrucktions in the link you posted. i opened the init.js file in the folder plugins/tinymce/
what do i have to add to avoid that tinyMCE deletes my sourcecode for the likebox?
O, that's the wrong file! (the documentation should clarify this). You have to look under plugins/tinymce/inits/. There are several files init_*.js; you have to edit the one you're using (see the plugin back-end of TinyMCE -> Toolbar). There you have to add the following line:

Code: Select all

extended_valid_elements : "div[*]",
(untested) And note the overall syntax of the file, and put the line in somewhere, where it syntactically fits.
pigsound wrote:faceblink seems to only work for likebutton, sharebutton and facebook-link. i don't know how to use it with the facebook like box.
Yes, you're probably right. However, that may be a good addition for Faceblink.

Re: fb likebox disappears after backend editing

Posted: Tue Jun 25, 2013 10:59 am
by pigsound
oh, that was crossposting - in the meantime i found the right js-file, as you can see in my (edited) previous post. :-)
thank you for your advice - i think i am slowly getting behind this riddle. i will try out your suggestion.

Re: fb likebox disappears after backend editing

Posted: Tue Jun 25, 2013 11:25 am
by cmb
pigsound wrote:oh, that was crossposting - in the meantime i found the right js-file, as you can see in my (edited) previous post. :)
Ah, yes. :)

But now I'm puzzled; I've inserted the DIV in a fresh CMSimple_XH 1.5.7 installation with default editor configuration, and the element was not removed by TinyMCE. :?

About the wrapper plugin: this suggestion was meant for the IFRAME variant of the like box, e.g.:

Code: Select all

<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FFacebookDevelopers&width=292&height=590&show_faces=true&colorscheme=light&stream=true&show_border=true&header=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:590px;" allowTransparency="true"></iframe>
This might be done with the wrapper plugin, but actually I see no advantage using wrapper over directly inserting the IFRAME in this case.

Re: fb likebox disappears after backend editing

Posted: Tue Jun 25, 2013 11:33 am
by pigsound
in my version of cmsimple_XH 1.5.7 your patch solved my problem... thank you for that!

i cannot explain, why your version of cmsimple_XH accepted the div... and i have not changed any editor settings before.

thank you as well for the info about using the wrapper-plugin with the like box IFRAME variant. i obviously read the wrapper instructions not very cautiously... :roll:

pigsound

Re: fb likebox disappears after backend editing

Posted: Tue Jun 25, 2013 12:13 pm
by cmb
pigsound wrote:in my version of cmsimple_XH 1.5.7 your patch solved my problem...
Good. :)

You may restrict the overly permissive rule by listing the allowed attributes explicitely:

Code: Select all

extended_valid_elements : "div[data-href|data-width|...]",
pigsound wrote:i cannot explain, why your version of cmsimple_XH accepted the div... and i have not changed any editor settings before.
Hmm, perhaps that's related to the browser in use or maybe the template's DOCTYPE.

Re: fb likebox disappears after backend editing

Posted: Tue Jun 25, 2013 12:21 pm
by Maxim
[ external image ] Возможно не нажали кнопку "Edit HTML Source"
Или не почистили cache или cookies

[ external image ] Maybe do not click "Edit HTML Source"
Maybe not delete cache or cookies