facebook javascript, image picker - image

I/m having many img tag dynamically printed from facebook album pictures, like below-
echo '<'img src="' . $photo_detail['src_small'] . '" id="imageurl" onclick="return false" />';
I need is- When clicking on image the source of image is should set to- <'input type="hidden" id="imagesrc"/> value in the form
when submitting the form the value also submitted - like an image picker

To do what you need you will need to have an understanding of Javascript as well as Facebook's custom version of javascript called FBJS (if you are building an FBML canvas application).
If you do not yet have a strong understanding of how to do this outside of Facebook then I recommend reading through a good book on Javascript until you do.
Once you understand how to do this outside of Facebook the following wiki page should be a good guide on how you can use the same technique with FBJS: http://developers.facebook.com/docs/fbjs/

Related

CKEditor component HTML tags applied but not displayed

I am using ReactJS. I am trying to use CKEditor component.
I followed this tutorial.
Heading effect applied to the text.
I confirmed that the <h2> tag was applied to the data in console.log
However, it does not apply to the screen.
The same goes for media wrapped in <figure> . What is wrong?

Dynamic Inline Attachments in Laravel using Summernote

I've created some functionality to manage email campaigns. I use summernote to edit the email templates.
Like most editors, Summernote stores images as base64 encoded image tags.
The issue that I have is when I want to send out the email, most mail clients don't render the base64 image tag. Therefore I'd need to use:
<img src="{{ $message->embed($pathToFile) }}"> or <img src="{{ $message->embedData($data, $name) }}">
According to the Laravel documentation:https://laravel.com/docs/5.7/mail#inline-attachments
The issue is that the mail class requires a set view
return $this->from('example#example.com')->view('emails.orders.shipped');
What is the best way to get the inline images from summernote into the email view? (Note that the email can contain multiple images and each template differs)
The current mail functionality basically expects your view to have the embed functions already in your view. But in this case, I need to dynamically set it.
The only thing that I got working was to isolate the images in the summernote value (data saved from textarea) and re-create them as images on disk. Then to generate a view dynamically with the image paths (embed($pathToFile) }}"> ) already written to the dynamic view. Then injecting that dynamic view into the email.

Producing a pdf with internal anchor links using dompdf

I am using dompdf to collate a load of existing HTML pages. A lot of these pages have anchor links in them that I would like to preserve. When I collate these articles the pdf collates very nicely but the anchors links don't work. The text is underlined like a link but on clicking it you don't go anywhere.
I have some test HTML that I am using to try out anchor links. Such as:
$content .= '<div style="page-break-after: always;">blah</div>
<div><a id="blah">link location</a></div>';
and also I have tried using name instead of id, based on this forum post - http://www.dashinteractive.net/dompdf/index.php?v=1530231. Such as:
$content .= '<div style="page-break-after: always;">blah</div>
<div><a name="blah">link location</a></div>';
Of course neither of these are working as I would expect.
I can't find much on the internet about how dompdf handles internal links. Apart from this page http://webresourcesdepot.com/html-to-pdf-rendering-engine-dompdf/ that says it can handle links and anchors. Not sure how reliable it is...
How do you put internal anchor links in pdfs using dompdf please? Can it do it?
dompdf up through 0.6.2 should work so long as you use the <a name="blah">...</a> format. The only problem in that release is that if the A tag is empty it will be removed before the link is rendered.
Your second sample should be fine, though maybe just as part of typing up the question the actual anchor reference is incorrect. The following should work:
<div style="page-break-after: always;">blah</div>
<div><a name="blah">link location</a></div>
The current beta for 0.7.0 has a bug that mangles the anchor resulting in a mis-interpreted link type. That issue should be addressed for the stable 0.7.0 release.
Note that no version up to and including v0.7.0 supports linking based on ID.

Tumblr like button with ajax fetched posts

I've removed all post centered markup from my Tumblr theme and instead I'm using ajax to fetch the data. So far, so good. Now I want to add a like button to each post, but I can't seem to find any documents on how to do this (without resorting to their api, which needs oauth to work).
Are there no way to include like buttons when you use ajax to fetch the posts and you rather not go full fledge api with oauth?
Tumblr's new implementation of the "Like button" for individual posts uses an <iframe> element to function. The URL for this iframe is obtainable only through your Theme code.
For example:
{Block:Posts}
<div class="like-button">{LikeButton}{/div>
{/Block:Posts}
What is rendered for the {LikeButton} will look something like this:
<iframe id="like_iframe_84714330251" src="http://assets.tumblr.com/assets/html/like_iframe.html?_v=fa292ab73ee80893ffdf1edfabaa185a#name=blog-name-&post_id=84814329251&rk=reKNyFfj" scrolling="no" width="20" height="20" frameborder="0" class="like_toggle" allowtransparency="true"></iframe>
There does not seem to be any way to obtain this without including {LikeButton} inside of a {Block:Posts}
For using ajax, you could include a hidden element on the page that loads this information and parse it out when loading each page of posts using ajax.
So if in your theme you included something like:
<div id="posts-info" style="display: none;">
{Block:Posts}
<div class="post-info" data-postid="{PostID}">{LikeButton}</div>
{/Block:Posts}
</div>
When you load your posts with AJAX, you would also have to load the correct page of your Tumblr (with this code in the Theme).
You could then parse this information by matching the Post ID's to the posts you fetched with AJAX and insert that <ifame> code.
This is a really round-about solution but it should work.

DOMDocument and FBML/Google + Button not working

Well I'm having a bit of an issue, I have an application that uses DOMDocument to display some content but it is removing some code that is needed for FBML and a Google +1 button to display.
For example, Facebook's like button is <fb:like>, it is removing fb: from the string. Google's +1 button is like <g:plusone> and it's removing g:.
Is there any way to make it not remove that part of the code?
You can solve both issues.
With Facebook like button, you will want to use the HTML5 version. See: https://developers.facebook.com/docs/reference/plugins/like/
ex: <div class="fb-like" data-send="true" data-width="450" data-show-faces="true"></div>
With Google's Plus one you can use the HTML5 version as well. See: https://developers.google.com/+/plugins/+1button/
ex: <div class="g-plusone" data-size="tall" ... ></div>

Resources