working example of tweet with image using javascript django - javascript

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");
});

Related

Scraping a messy javascript-heavy website with python

I was trying to scrape the household links from this page :
https://www.sreality.cz/en/search/to-rent/apartments?page=2
For instance, for the first apartment I would like to obtain the link with:
https://www.sreality.cz/en/detail/lease/flat/1+kt/plzen-jizni-predmesti-technicka/25873756#img=0&fullscreen=false
However the website is quite heavy on javascript. By using requests.get() I only obtain an uninformative chunk of html code:
from requests import get
i = 2
url = f"https://www.sreality.cz/en/search/to-rent/apartments?page={i}"
response = get(url)
print(response.text)
-----------------------------
<!doctype html>
<html lang="{{ html.lang }}" ng-app="sreality" ng-controller="MainCtrl">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0,minimal-ui">
<!--- Nastaveni meta pres JS a ne pres Angular, aby byla nastavena default hodnota pro agenty co nezvladaji PhantomJS --->
<title ng:bind-template="{{metaSeo.title}}">Sreality.cz ⢠reality a nemovitosti z celé ÄR</title>
<meta name="description" content="NejvÄtší nabídka nemovitostí v ÄR. Nabízíme byty, domy, novostavby, nebytové prostory, pozemky a další reality k prodeji i pronájmu. Sreality.cz">
<meta property="og:title" content="Sreality.cz ⢠reality a nemovitosti z celé ÄR">
<meta property="og:type" content="website">
<meta property="og:image" content="https://www.sreality.cz/img/sreality-logo-og.png">
-----------------------------
ETC ...
The question is therefore, how to proceed with some simple scraping activity for websites of this kind ?
Thanks in advance for the help.
I don't think that website has a public API but looking at the API calls from the network tab I could fetch the details for your need and make it as link have a look at the below code.
Let me know if you have any questions :)
import time
import requests
page=2
numberofresults=20
epochmiliseconds=round(time.time() * 1000)
paramsdict={
"category_main_cb":1,
"category_type_cb":2,
"page":page,
"per_page":numberofresults,
"tms":epochmiliseconds
}
data=requests.get("https://www.sreality.cz/api/en/v2/estates",params=paramsdict).json()
for lead in data["_embedded"]["estates"]:
locality=lead["seo"]["locality"]
name=lead["name"]
hash_id=lead["hash_id"]
typedata=[s for s in name.split(" ") if "+" in s][0].replace("\u00a0"," ").split(" ")[0]
print(f'https://www.sreality.cz/en/detail/lease/flat/{typedata}/{locality}/{hash_id}'))
Output:
First ask website, if they provide any API to get the desired information.
To deal with javascript during the scraping only request will not work. You should go Selenium only or for scrapy in combination of scrapy-selenium. These two allow loading of javascript during scraping.
Feel free to ask if you have any other question.

FB.ui share_open_graph giving wrong reponse on mobile

My coding as below:
<!DOCTYPE>
<html>
<head>
<script src="https://connect.facebook.net/en_US/sdk.js"></script>
<meta property="fb:app_id" content="1665615247095212" />
<meta property="og:type" content="heppiheppi:shares" />
<meta property="og:url" content="http://mywebsite.com" />
<meta property="og:title" content="Walk-in" />
<meta property="og:image" content="http://mywebsite.com/images/intro.jpg" />
<meta property="og:description" content="Bring more customers" />
</head>
<body style='padding:0;margin:0;'>
<div id="fb-root"></div>
<script>
FB.init({
appId : '1665615247095212',
xfbml : true,
version : 'v2.7'
});
function LaunchDialog(){
FB.ui({
method: 'share_open_graph',
action_type: 'og.shares',
action_properties: JSON.stringify({
object:'http://mywebsite.com',
})
},
function(response) {
if (response && !response.error_message) {
alert('Posting completed.');
} else {
alert('Error while posting.');
}
});
}
</script>
Share now
</body>
</html>
If test on desktop browser, click "Share now", prompt the share dialog, click cancel/X, it will displays 'Error while posting.'
If test on mobile browser, click "Share now", prompt the share dialog, click cancel/X, it will displays 'Posting completed.'
Does anyone has any clue on this issue?
You set og:type to "heppiheppi:shares", have you created this Object type in your App !?? If it's not, set it back to "website".
Facebook team has confirmed this as a bug and assign this to the relevant team to investigate further.
Update from Facebook:
The sharing team have investigated in detail and determined that the discrepancy is due to the different code paths on our side for the mobile and desktop version of the dialog
When you receive a post ID or error message in the response object, it should be as documented if the user has logged into your app and/or has granted publish_actions permission
For all other cases, we don't document what the response will be, and the discrepancy you're encountering is that sometimes you receive an empty 'response' object and other times there's no response object at all
At this time it's not planned to make any changes to resolve this, and you cannot use the lack of response from the dialog to make any determination about whether a post was created
Apologies for the delay in getting a definite answer here, but you should assume that the current behaviour will remain in the short to medium term;
If long term changes are made, I think it's more likely that the response will be removed completely as that would be consistent with the other changes in this area to prevent share gating and other incentivization of users posts.

Jquery/Javascript How to change <meta property="og:title"> dynamically

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?

set meta tage dynamic page with javascript

i want to change title in every page of my code but when i view source code i still see the old title.
here is my code:
window.onload = function (){
setProductMeta();
}
function setProductMeta(){
var des = document.getElementById("description").setAttribute("content","dynamic meta description");
document.getElementById("keywords").setAttribute("content","dynamic meta keywords");
document.title = "Point of Sale System";
}
and this meta tage above
<title>Welcome to Atmostphere Technology</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta id="title" name="title" content="Welcome to Atmostphere Technology" />
<meta id="description" name="description" content="atmos is best service in cambodia" />
<meta id="keywords" name="keywords" content="atmos is best service in cambodia" />
The server delivers the source code to the browser.
The browser converts the markup in to a DOM.
Then JavaScript runs and any DOM manipulation you perform is performed. It never touches the source code.
While it is sometimes useful to change the title with JavaScript (e.g. Facebook do it to indicate the number of alerts since the page was last interacted with), almost everything that consumes meta data does not execute JavaScript. If you want to change something fundamental about the page, do it in the source code, not with client side programming.

Timeline Action Layout - No Attachment displayed

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.

Categories