fb likebox disappears after backend editing

Questions about how to use the online - editors and suggestions how to improve them
Post Reply
pigsound
Posts: 36
Joined: Mon Aug 04, 2008 8:31 pm

fb likebox disappears after backend editing

Post by pigsound » Tue Jun 25, 2013 9:24 am

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

Maxim
Posts: 121
Joined: Thu Jun 13, 2013 6:52 am
Location: Запорожье
Contact:

Re: fb likebox disappears after backend editing

Post by Maxim » Tue Jun 25, 2013 9:50 am

Last edited by Maxim on Tue Feb 04, 2014 6:37 am, edited 1 time in total.
Simple Hosting
Бедная, бросаемая бурею, безутешная!

cmb
Posts: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, RLP, DE
Contact:

Re: fb likebox disappears after backend editing

Post by cmb » Tue Jun 25, 2013 9:55 am

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
Christoph M. Becker – Plugins for CMSimple_XH

pigsound
Posts: 36
Joined: Mon Aug 04, 2008 8:31 pm

Re: fb likebox disappears after backend editing

Post by pigsound » Tue Jun 25, 2013 10:45 am

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

    }
}

cmb
Posts: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, RLP, DE
Contact:

Re: fb likebox disappears after backend editing

Post by cmb » Tue Jun 25, 2013 10:56 am

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.
Christoph M. Becker – Plugins for CMSimple_XH

pigsound
Posts: 36
Joined: Mon Aug 04, 2008 8:31 pm

Re: fb likebox disappears after backend editing

Post by pigsound » Tue Jun 25, 2013 10:59 am

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.

cmb
Posts: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, RLP, DE
Contact:

Re: fb likebox disappears after backend editing

Post by cmb » Tue Jun 25, 2013 11:25 am

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.
Christoph M. Becker – Plugins for CMSimple_XH

pigsound
Posts: 36
Joined: Mon Aug 04, 2008 8:31 pm

Re: fb likebox disappears after backend editing

Post by pigsound » Tue Jun 25, 2013 11:33 am

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

cmb
Posts: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, RLP, DE
Contact:

Re: fb likebox disappears after backend editing

Post by cmb » Tue Jun 25, 2013 12:13 pm

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.
Christoph M. Becker – Plugins for CMSimple_XH

Maxim
Posts: 121
Joined: Thu Jun 13, 2013 6:52 am
Location: Запорожье
Contact:

Re: fb likebox disappears after backend editing

Post by Maxim » Tue Jun 25, 2013 12:21 pm

[ external image ] Возможно не нажали кнопку "Edit HTML Source"
Или не почистили cache или cookies

[ external image ] Maybe do not click "Edit HTML Source"
Maybe not delete cache or cookies
Simple Hosting
Бедная, бросаемая бурею, безутешная!

Post Reply