I'm building a simple tool that generates some custom HTML based on data from the website.
After, we can simply publish this content to a Facebook page via the Facebook SDK (API).
The following PHP code is an excerpt of how the $content is set up:
$content = '';
$content .= '📍 The address<br>';
$content .= '🛀 2 bathrooms<br>';
Via some AJAX code, this $content is shown as HTML in a div on the page, where the user can further edit the texts.
Then, the user can click on 'share' and via AJAX the post is published to Facebook. I use the following PHP code to format the content before it is passed to the FB API:
$content = str_replace('<br>',chr(10),$content);
$content = html_entity_decode($content);
$content = strip_tags($content);
The problem is that the emojis are not showing on Facebook. When I test it with
$content = html_entity_decode('️');
Then the emoji is showing correctly, but it seems that it's not working because I get $content via AJAX/Jquery with
var content = $('#content').html();
And then pass it through AJAX.
So I suppose there is a formatting issue, but I can't wait a way to fix it..
EDIT: because the content is first shown on the page in a div, the emojis are turned into <img draggable="false" role="img" class="emoji" alt="📍" src="https://s.w.org/images/core/emoji/14.0.0/svg/1f4cd.svg">
After, my Jquery/AJAX code takes the contents of this div, so I assume it takes the above instead of the '📍'. But how can I work around this?
EDIT 2:
Passing
$content = '';
$content .= '📍 The address<br>';
$content .= '🛀 2 bathrooms<br>';
Directly to the Facebook API works and shows the emojis.
First using an other PHP function that adds the above code to a div via JQUERY/AJAX, and then getting the div's content using $('#content').html() and passing this does not work.
I found a working solution.
As I suspected, the problem was with Jquery's element.HTML(), which seems to format the data in some way.
I have now added a hidden input field, where I add and get the data via element.val() instead of element.html();
Also, to prevent the auto-formatting (perhaps caused by WordPress) of emojis into images, I have created some custom tags like {sun}, which are only replaced with their HTML codes (like ️) just before posting to Facebook.
Related
I currently have a wordpress website where the template is fixed but I would like to have the content all stored into 1 file that I can use to update the content.
The reasoning behind this is that I will have many different websites with the same template but different content. This way, if I ever required changes, all I would need to do is edit this 1 content.html file.
I have attempted to make a single HTML page where there would be different divs for different variables of the website, however the entire text of the HTML file is showing on the wordpress website rather than the specific id DIV "homepagetitle".
How do I use the file_get_contents or anything similar to retrieve specific sections of information through to my php wordpress website?
THE HTML FILE:
<html>
<div id="homepagetitle">AGENT SUCCESS 2 </div>
<div id="other">othercontent</div>
</html>
MY WORDPRESS SITE PHP FILE:
$homepagetitle = file_get_contents('http://neil1.zxstudios.ca/wp-content/themes/fullredpin5/content.html #homepagetitle');
echo '<h1 class="intro-text">'.$homepagetitle.'</h1>';
That is not how file_get_contents works. file_get_contents gets all file contents for the the specified target source. From the looks of it, I think you're coming from jQuery, where the .get() method allows to fetch page fragments with the #-identitifer.
If you want to emulate fetching a page fragment (e.g. #homepagetitle), look into DOM document parsing methods available in PHP (http://php.net/manual/en/class.domdocument.php). In pseudo-code:
$file = file_get_contents('/path/to/file.html');
$domParser = new DOMDocument($file);
$element = $domParser->getElement('element-id-here');
$text = $element->text;
echo '<h1>' . $text . '</h1>';
If you don't want to do this parsing, you need to split the file to multiple files and fetch the contents for different parts one-by-one. If you'd split that HTML file to two parts, they don't even need to be HTML:
file1.txt:
AGENT SUCCESS 2
file2.txt:
othercontent
Then in WP templates:
echo '<h1>' . file_get_contents('http://example.com/file1.txt') . '</h1>';
echo '<div class="content">' . file_get_contents('http://example.com/file2.txt') . '</div>';
Also, you're in deep sh*t in case someone hacks your file system and replaces those files, which would result unwanted content displayed on all websites where those files are fetched and displayed on.
You're using WordPress. Have you considered creating a central WordPress installation and use its RSS feeds (or maybe the REST API as of WP 4.4) to display the content elsewhere?
I'm currently designing a website for a company that uses an external site to display information about its clients. Currently, their old website just puts a link to the external profile of each client. however with this rebuild, I wondered if there was any way to load a specific portion of the external site onto their new page.
I've done my research, and I've found it's possible using jQuery and AJAX (with a bit of a mod) but all the tutorials relate to a div tag being lifted from the external site then loaded into the new div tag on the page.
Here's my problem: after reviewing the source code of the external source, the line of HTML I want isn't contained in a named DIV (other than the master wrap and I can't load that!)
The tag I need is literally: <p class="currentAppearance"> data </p>
It's on a different line for each profile so I can't just load line 200 and hope for the best.
Does anyone have any solution (preferably using php) that searches for that tag on an external page and then loads the specific tag into a div?
I hope I've been clear I am quite new to all this back end stuff!
First I would use to grab the content from the webpage:
http://www.php.net/manual/en/curl.examples-basic.php
$url = 'http://www.some-domain.com/some-page';
$curl = curl_init($url);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, TRUE);
$htmlContent = curl_exec($curl);
curl_close($curl);
Then using DomDocument (http://ca3.php.net/manual/en/book.dom.php) you'll be able to access the right div based on its ID for instance.
$doc = new DOMDocument();
$doc->loadHTML($htmlContent);
foreach ($pElements as $pEl) {
if ($pEl->getAttribute('class') == 'currentAppearance') {
$pContent = $pEl->nodeValue;
}
}
$pContent is now set with the content of the paragraph with class currentAppearance
You could use xpath syntax to grab it out of the document.
I'm trying to parse a HTML page where the majority of the content is contained in javascript. When I use the Chrome development tools I can see that the div class I'm trying to grab the content from is called div class=doodle-image. However when I either view the page as a source or try to grab it with php:
<?php
include_once('simple_html_dom.php');
$html = new simple_html_dom();
$html->load_file('http://www.google.com/doodles/finder/2012/All%20doodles');
$doodles = $html->find('.doodle-image');
echo $html;
?>
It returns the frame of the page but contains none of the divs or content. How can I grab the full content of the page?
That's because the element is empty when your PHP client fetches it, Google is loading in a JSON-object with JavaScript to populate the list of doodles. It does a Ajax-request to this page, and probably you can too.
you guys ever saw that FB scrapes the link you post on facebook (status, message etc.) live right after you paste it in the link field and displays various metadata, a thumb of the image, various images from the a page link or a video thumb from a video related link (like youtube).
any ideas how one would copy this function? i'm thinking about a couple gearman workers or even better just javascript that does a xhr requests and parses the content based on regex's or something similar... any ideas? any links? did someone already tried to do the same and wrapped it in a nice class? anything? :)
thanks!
FB scrapes the meta tags from the HTML.
I.e. when you enter a URL, FB displays the page title, followed by the URL (truncated), and then the contents of the <meta name="description"> element.
As for the selection of thumbnails, I think maybe FB chooses only those that exceed certain dimensions, i.e. skipping over button graphics, 1px spacers, etc.
Edit: I don't know exactly what you're looking for, but here's a function in PHP for scraping the relevant data from pages.
This uses the simple HTML DOM library from http://simplehtmldom.sourceforge.net/
I've had a look at how FB does it, and it looks like the scraping is done at server side.
class ScrapedInfo
{
public $url;
public $title;
public $description;
public $imageUrls;
}
function scrapeUrl($url)
{
$info = new ScrapedInfo();
$info->url = $url;
$html = file_get_html($info->url);
//Grab the page title
$info->title = trim($html->find('title', 0)->plaintext);
//Grab the page description
foreach($html->find('meta') as $meta)
if ($meta->name == "description")
$info->description = trim($meta->content);
//Grab the image URLs
$imgArr = array();
foreach($html->find('img') as $element)
{
$rawUrl = $element->src;
//Turn any relative Urls into absolutes
if (substr($rawUrl,0,4)!="http")
$imgArr[] = $url.$rawUrl;
else
$imgArr[] = $rawUrl;
}
$info->imageUrls = $imgArr;
return $info;
}
Facebook looks at various meta information in the HTML of the page that you paste into a link field. The title and description are two obvious ones but a developer can also use <link rel="image_src" href="thumbnail.jpg" /> to provide a preferred screengrab. I guess you could check for these things. If this tag is missing you could always use a website thumbnail generation service.
As I am developing a project like that, it is not as easy as it seems, encoding issues, rendering content with javascript, existence of so many non-semantic websites are one of big problems I encountered. Especially extracting video info and trying to get auto-play behavior is always tricky or sometimes impossible. You can see a demo in http://www.embedify.me , it is written in .net but it has a service interface so you can call it via javascript, also there is javascript api to get the same ui/behavior as in fb.
I would like to integrate my tumblr feed in to my website. It seems that tumblr has an API for this, but I'm not quite sure how to use it. From what I understand, I request the page, and tumblr returns an xml file with the contents of my blog. But how do I then make this xml into meaningful html? Must I parse it with php, turning the relevant tags into headers and so on? I tell myself it cannot be that painful. Anyone have any insights?
There's a javascript include that does this now, available from Tumblr (you have to login to see it): http://www.tumblr.com/developers
It winds up being something like this:
<script type="text/javascript" src="http://{username}.tumblr.com/js"></script>
You can use PHPTumblr, an API wrapper written in PHP which makes retrieving posts a breeze.
If you go to http://yourblog.tumblr.com/api/read where "yourblog" should be replaced with the name of your blog (be careful, if you host your Tumblr blog on a custom domain, like I do, use that) you'll see the XML version of your blog. It comes up really messy for me on Firefox for some reason so I use Chrome, try a couple of different browser, it'll help to see the XML file well-formed, indented and such.
Once your looking at the XML version of your blog, notice that each post has a bunch of data in an attribute="value" orientation. Here's an example from my blog:
<post id="11576453174" url="http://wamoyo.com/post/11576453174" url-with-slug="http://wamoyo.com/post/11576453174/100-year-old-marathoner-finishes-race" type="link" date-gmt="2011-10-17 18:01:27 GMT" date="Mon, 17 Oct 2011 14:01:27" unix-timestamp="1318874487" format="html" reblog-key="E2Eype7F" slug="100-year-old-marathoner-finishes-race" bookmarklet="true">
So, there's lots of ways to do this, I'll show you the one I used, and drop my code on the bottom of this post so you can just tailor that to your needs. Notice the type="link" part? Or the id="11576453174" ? These are the values you're going to use to pull data into your PHP script.
Here's the example:
<!-- The Latest Text Post -->
<?php
echo "";
$request_url = "http://wamoyo.com/api/read?type=regular"; //get xml file
$xml = simplexml_load_file($request_url); //load it
$title = $xml->posts->post->{'regular-title'}; //load post title into $title
$post = $xml->posts->post->{'regular-body'}; //load post body into $post
$link = $xml->posts->post['url']; //load url of blog post into $link
$small_post = substr($post,0,350); //shorten post body to 350 characters
echo // spit that baby out with some stylish html
'<div class="panel" style="width:220px;margin:0 auto;text-align:left;">
<h1 class="med georgia bold italic black">'.$title.'</h1>'
. '<br />'
. '<span>'.$small_post.'</span>' . '...'
. '<br /></br><div style="text-align:right;"><a class="bold italic blu georgia" href="'.$link.'">Read More...</a></div>
</div>
<img style="position:relative;top:-6px;" src="pic/shadow.png" alt="" />
';
?>
So, this is actually fairly simple. The PHP script here places data (like the post title and post text) from the xml file into php variables, and then echos out those variable along with some html to create a div which features a snippet from a blog post. This one features the most recent text post. Feel free to use it, just go in and change that first url to your own blog. And then choose whatever values you want from your xml file.
For example let's say you want, not the most recent, but the second most recent "photo" post. You have to change the request_url to this:
$request_url = "http://wamoyo.com/api/read?type=photo&start=1"
Or let's say you want the most recent post with a specific tag
$request_url = "http://wamoyo.com/api/read?tagged=events";
Or let's say you want a specific post, just use the id
$request_url = "http://wamoyo.com/api/read?id=11576453174";
So all you have to do is tack on the ? with whatever parameter and use an & if you have multiple parameters.
If you want to do something fancier, you'll need the tumblr api docs here: http://www.tumblr.com/docs/en/api/v2
Hope this was helpful!
There are two main ways to do this. First, you can parse the xml, pulling out the content from the the tags you need (a few ways to do this depending on whether you use a SAX or DOM parser). This is the quick and dirty solution.
You can also use an XSLT transformation to convert the xml source directly to the html you want. This is more involved since you have to learn the syntax for xslt templates, which is a bit verbose.