2

I'm trying to share some Malayalam text to Facebook feed dialog via Blogger but I'm facing some problem. Here's the issue. I'm using the feed dialog code directly in the HTML part of the blog post and because of that, the final text is automatically converted into Unicode decimal by blogger and Facebook is displaying the text in the same unreadable format.

An example

function FBShareOp(){
 var name = 'ഇതൊരു ടെസ്റ്റ് പോസ്റ്റാണ്'
 var description = "ഇതൊരു ടെസ്റ്റ് പോസ്റ്റാണ്"
 var share_image  = 'IMAGE LINK ';
 var share_url  = 'URL'; 
 var share_capt = 'ഇതൊരു ടെസ്റ്റ് പോസ്റ്റാണ്';

so in the above code, I'm using the custom Malayalam text ഇതൊരു ടെസ്റ്റ് പോസ്റ്റാണ് and after the post is published, blogger is converting that text to ഇതൊരു ടെസ്റ്റ് പോസ്റ്റാണ് and Facebook is displaying the text exactly like that.

So how can I make it work? I don't want blogger to format it like that. Is there any way to post that text without such formatting so that Facebook can display it properly? Thanks in advance.

Devid Farinelli
  • 7,514
  • 9
  • 42
  • 73
Arun Kumar
  • 23
  • 2

1 Answers1

0

This happens because the XML parser that Blogger uses escapes certain characters. A way to stop the content from getting escaped is by enclosing it within -

<![CDATA[ 
 ... Your code ...
]]>

But inside the post editor, the above method is not working. Instead, you will have to decode the Entities via a JavaScript function (As demonstrated in the following answer). Your code will change in the following manner -

<script>

   var decodeEntities = (function() {
     // this prevents any overhead from creating the object each time
     var element = document.createElement('div');

     function decodeHTMLEntities(str) {
      if(str && typeof str === 'string') {
        // strip script/html tags
        str = str.replace(/<script[^>]*>([\S\s]*?)<\/script>/gmi, '');
        str = str.replace(/<\/?\w(?:[^"'>]|"[^"]*"|'[^']*')*>/gmi, '');
        element.innerHTML = str;
        str = element.textContent;
        element.textContent = '';
       }

       return str;
    }

   return decodeHTMLEntities;
   })();

   function FBShareOp(){
   var name = decodeEntities('ഇതൊരു ടെസ്റ്റ് പോസ്റ്റാണ്');
   var description = decodeEntities("ഇതൊരു ടെസ്റ്റ് പോസ്റ്റാണ്");
   var share_image  = 'IMAGE LINK ';
   var share_url  = 'URL'; 
   var share_capt = decodeEntities('ഇതൊരു ടെസ്റ്റ് പോസ്റ്റാണ്');
   }

</script>
Community
  • 1
  • 1
Prayag Verma
  • 5,581
  • 3
  • 30
  • 56
  • Hi Prayag, thanks for the reply. It's not working for me here. Still it's formatting text like that. Can you please test it on a blogger blog and confirm? Thanks in advance. I'm using the code directly in the post HTML and not in blog theme btw. – Arun Kumar Apr 03 '17 at 13:45
  • Check the HTML source of this Blogger blog - http://saifyv1.blogspot.com/ Near the top you will see instance of your code. You will notice that with CDATA present, the escaping doesn't happen – Prayag Verma Apr 03 '17 at 13:50
  • Yes I see it. I'm checking again on my blog. I'll get back to you. Thanks – Arun Kumar Apr 03 '17 at 14:03
  • I tested and still it's not working for me. My doubt is that aren't you using this method in your blogger template? But I'm not. I'm using it on individual blog posts (Edit-HTML). – Arun Kumar Apr 03 '17 at 14:13
  • You're using it directly on theme because I just tested it on theme and it's working for me too. But like I said in my main question, I want to use this code in individual blog posts because I want this to appear in some posts only and not the entire blog. So I can simply create a post, go to the HTML section and paste the code and the function will appear on that post only. That's what I'm trying to do. Anyway thanks a lot for your help.. – Arun Kumar Apr 03 '17 at 14:23
  • @ArunKumar I have updated the answer with a different approach to solve the problem – Prayag Verma Apr 03 '17 at 16:32
  • No luck prayag. I used the code just like you gave me but still seeing the same type of text in the page source. – Arun Kumar Apr 04 '17 at 01:41
  • The text will be the same (in escaped form) but when these variables will be called, they should present the text in the correct manner. Can you share how these variables (like `name`, `description`, etc ) are called on your blog? – Prayag Verma Apr 04 '17 at 02:52
  • Hi prayag, this is how the variables are called.. `FB.ui({ method: 'feed', name: name, link: share_url, picture: share_image, caption: share_capt, description: description }, function(response) { if(response && response.post_id){} else{} }); }` – Arun Kumar Apr 04 '17 at 08:37
  • I checked it from my side, this code is working without issue (Refer to https://pastebin.com/raw/e9yEZ8vy) See the demonstration here - http://i.imgur.com/9IGRfS6.gif . Even though the text is escaped, but upon sharing, it appears correctly – Prayag Verma Apr 04 '17 at 10:23
  • 1
    Thanks a lot Prayag. It's working for me now. I must have made some mistake earlier. Working great now. Thanks again – Arun Kumar Apr 05 '17 at 01:21