I've got a page with a table of items that the user can select. I'd like to add a facebook LIKE button.
When the user clicks the like button, it will popup the comment box, which I'd like to be helpfully prepopulated comment based on the items the user has clicked. They can change it if they wish, or they can just leave it as is. It would say something like "I like Item-1 and Item-4", if those table rows were selected.
Is it even possible to pre-populate the comment field?
If so, is it possible to change it via javascript each time the user changes their selection?
It is not possible to pre-populate the comment field of the Like Button, as it must be user generated. However, you can create unique URLs for each table row that will generate unique content in the like button story to represent the item the user liked. For Example:
<fb:like href="http://www.example.com/example.php?row=row1"></fb:like>
<fb:like href="http://www.example.com/example.php?row=row2"></fb:like>
The OG meta data associated with each unique URL should represent the item information for that row. Example:
<meta property="og:title" content="Row 2 Item"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="http://www.example.com/example.php?row=row2"/>
<meta property="og:image" content="http://www.example.com/example_row2.jpg"/>
<meta property="og:site_name" content="example"/>
<meta property="og:description" content="Information about item at row 2"/>
Related
I am trying to tweet with image using javascript.I read about cards, and put the following on page i am sharing:
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="http://203.110.93.244/">
<meta name="twitter:creator" content="#SarahMaslinNir">
<meta name="twitter:title" content="Parade of Fans for Houston’s Funeral">
<meta name="twitter:description" content="NEWARK - The guest list and parade of limousines witproject here.">
<meta name="twitter:image" content="http://www.promon.in/media/images/products/2015/09/listing_image_vsRFOqw.jpg">
then i use this javascript to tweet:
twttr.widgets.createShareButton(
'http://203.110.93.244/offers/eat-n-drink/Delhi-greater-kailash-rara-avis/81/',
document.getElementById('twitter-btn'),
{
text: '#HelloWorld',
});
Problem is, I am not getting any image thumbnail.
Please guide me towards a viable solution.
Thanks.
Something as follows works for me. It opens a window whenever the user clicks a button... It sends the "URL" of the source page, "via" which is your twitter username, and "text" which is whatever message you want to appear in there. Note that the amount of text is limited and if too long Twitter silently eliminate part of the data.
The page URL with the image must appear first. You can test the validity of the page here: https://cards-dev.twitter.com/validator
jQuery("#twitter-share-button").click(function(e)
{
e.preventDefault();
var uri = "http://203.110.93.244/offers/eat-n-drink/Delhi-greater-kailash-rara-avis/81/";
var tweet = "https://twitter.com/intent/tweet?url="
+ encodeURI(uri)
+ "&via=yourtwittername&text="
+ encodeURI(uri)
+ encodeURI(" #your-hash-tag ")
+ encodeURI("some more text here");
window.open(tweet, "Share on Twitter");
});
I have this <meta property="og:title" content="some title"> in my <head>-section. I want to change this meta property depending on which page the user is navigating to. So first of all, in my index.html I have a default value in the <head>-section:
<head>
<meta property="og:title" content="some title whatever">
</head>
then I wrote this script, which I keep in an external .js file:
function setMetaTag(metaName, name, value) {
var meta = '<meta '+metaName+'="'+name+'" content="'+value+'"/>';
$(meta).insertAfter('title');
}
then I do this on every subpage:
setMetaTag('property', 'og:title', 'new title for this page');
so far it works, but of course, when users click back and forth on the page the new <meta>-tag gets repeated x-times and when users go back on the index.html, the <meta> from the previous title is displayed and not the default value.
How can I achieve, that only the title gets displayed once and default value gets displayed when back on the index.html?
I am trying to parse a webpage using jQuery. This is my code:
$.get(u, function(data)
{
console.log(data);
$(data).find('meta').each(function()
{
console.log($(this).text());
//alert($(this).text());
alert($(this).attr('content'));
console.log($(this).attr('content'));
});
});
The page source is here.
There are many meta tags in this page but its only able to parse 6 of them namely :
<meta property="og:type" content="website" />
<meta property="og:title" content="Affect and Engagement in Game-BasedLearning Environments" />
<meta property="og:description" content="The link between affect and student learning has been the subject of increasing attention in recent years. Affective states such as flow and curiosity tend to have positive correlations with learning while negative states such as boredom and frustrat..."/>
<meta property="og:url" content="http://ieeexplore.ieee.org/xpl/articleDetails.jsp?arnumber=6645369" />
<meta property="og:image" content="http://ieeexplore.ieee.org/assets/img/logo-ieee-200x200.png" />
<meta property="og:site_name" content="IEEE Xplore" />
<meta property="fb:app_id" content="179657148834307" />
What am I doing wrong?
jQuery will skip all meta-Tags which do not have closing brackets.
You therefore would be forced to parse the response using a regular expression, but this is in fact ugly.
It's very sad, that we still live in a world where there is such HTML out there.
If you really want to go that path, you could do some thing like this
data = data.replace(/(<meta.*[^\/])>/g, "$1/>");
before doing the "find" on it.
You must append the response to an element and then get the meta.
$(data).appendTo("#test");
var m = $('#test').find('meta');
alert(m.length);
$('#test').html(''); // delete content
Example: http://jsfiddle.net/B4ATz/
I have the following javascript, loading my menu on all of my pages
<script type = "text/javascript">
$(document).ready(function () {
$("#menudiv").load("menu.html");
});
</script>
I havent included the menu as it is a completely standard list, formatted to look like it does. One of the menu option contains the character "å", how can I make my page display this character correctly?
This usually happens when the server doesn't set the encoding of menu.html correctly. Make sure the correct encoding is in the headers. (see this document) Especially, make sure that the Content-Type header is correct and that you have a <meta charset="..."> element in menu.html
The encoding of the existing page doesn't matter at all! Whenever you download something, the browser will look for the encoding of the new data, convert that to Unicode and only then, merge the new data with what it already has.
add this HTML Meta tag in your page:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Or in HTML5 Way :
<meta charset="iso-8859-1">
Add the following meta tag to the head of your HTML document:
<meta charset="iso-8859-1">
Use the HTML entity code for displaying this and other ISO characters:
å or å
More information on HTML entities from w3: http://www.w3schools.com/tags/ref_entities.asp
I am trying to post a Action to the Facebook Timeline using the JS API
FB.api('/me/application:action_type' + '?opject_type='+document.location.href,'post',
function(response) {
if (!response || response.error) {
alert("error");
} else {
alert("success");
}
});
Posting works quite well and the API returns no error. A new activity appears at the Timeline but only as a small text within the "recent activities" box which looks like this:
What could be the problem if the action is not displayed like in the Attachment Preview of the Action Type Settings? Which look like this:
I have linked all the properties from the Object Type and tested my Object URL with the Facebook Debugging Tool and it looks like all the attributes can be parsed correctly by the Facebook scraper.
I also defined a aggregation layout for the action type. So what can be the reason that no Attachment is displayed?
You can see a single action attachment layout on your timeline by setting "Shown on timeline" instead of "Allowed on timeline", but by default you will never see a single action on the timeline. You will see the single action attachment in the ticker (and maybe in the news stream).
If the user doesn't change the display mode You will only see aggregations on a timeline
I also reported this issue as a bug to facebook. Their reply was that this behavior is by design and the attachment layout only appears in the activity log or when multiple activities have been posted to a users timeline.
Have you set the object parameters on your web page? For instance:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# app: http://ogp.me/ns/fb/app#">
<meta property="fb:app_id" content="123" />
<meta property="og:type" content="app:action" />
<meta property="og:url" content="http://www.example.com/" />
<meta property="og:url" content="http://www.example.com/" />
<meta property="og:title" content="Testing Title" />
<meta property="og:description" content="testing Description" />
<meta property="og:image" content="http.example.com/image.jpg" />
You will need to get the correct code off the Facebook Developers website but it is essential that you create your object in order for Facebook to get the parameters from your webpage.
You can test it by simply going into aggregations->preview->add-action, and in event, just paste the webpage. You will see instantly if it works.