Embed dynamically updated blog RSS Feed to Website - javascript

I have a website on one domain, and a blog hosted on blogspot. at the bottom of the homepage on my website, I want to embed a link to the latest post on my blogspot along with the respective article image and title. I have a function that used to work but since i have moved to blogspot, the RSS url is different from what i previously used, thus the function will not work as expected anymore. How can I work this function around the blogspot rss embed link ?? thanks
blogspot rss2.0 embed link
RSS 2.0: http://blogname.blogspot.com/feeds/posts/default?alt=rss
existing function:
<script src="js/jquery.min.js" type="text/javascript"></script>
<script>
function getRSS(link, number) {
$.ajax(link, {
accepts:{
xml:"application/rss+xml"
},
dataType:"xml",
success:function(data) {
var blogItemArray = $(data).find("item");
var blogItemOne = $(blogItemArray).get(0);
var blogTitleOne = $(blogItemOne).find("title").text();
var blogLinkOne = $(blogItemOne).find("link").text();
var blogDescOne = $(blogItemOne).find("description").text();
var blogImgOne = $(blogDescOne).find("img.hs-featured-image").get();
var blogImgSrcOne = $(blogImgOne).attr("src");
$("#blog-feed-link-" + number).attr("href", blogLinkOne);
$(".vertAlignerImg" + number).append( $('<img class="blog-img-link-'+ number +'" />' ));
$(".blog-img-link-" + number).attr("src", blogImgSrcOne);
$(".vertAligner" + number).append( $('<h2 />', {text: blogTitleOne}) );
}
});
}
$(document).ready(function() {
getRSS('rsslink', "One");
getRSS('rsslink', "Two");
});
</script>
'rsslink' used to be a url that ended in /rss.xml. now it looks like the link above. thanks!

Related

Trying to load a jpg onto a page based on a URL Parameter

I have a site page (Wiki Page) that is re-used based on the URL Parameter that is sent when opening the page. The URL Parameter is used to filter out the contents of various document libraries and custom list on the page.
In addition, I would like to add code that will take this URL Parameter and lookup an item in a custom list to get a JPG image and replace the image that is currently on the page. (Or insert it in the upper left section of the page).
Any idea as to how I can accomplish this? Thank you in advance.
Since this site is now punishing students/users learning by rating homework questions as negative, I will rise above the "expert" users and post an answer to this homework. It took me a lot of time, because this is not my expertise.
I created a Script Editor web part with the following code:
<script type="text/javascript" src="../SiteAssets/js-enterprise/DisplayVirtualPicture.CEWP.js"></script>
<script type="text/javascript">
SP.SOD.executeFunc('sp.js', 'SP.ClientContext', LoadAll);
function LoadAll()
{getPicture();}
</script>
<img style="max-width:600px" title="undefined" src="https:xxxxxxx/SiteAssets/images/Blank.jpg">
The script DisplayVirtualPicture.CEWP.js is:
var currentID = GetUrlKeyValue('Name');
//console.log(currentID);
function getPicture() {
var mytable = "";
var clientContext = new SP.ClientContext.get_current();
var oList = clientContext.get_web().get_lists().getByTitle('VirtualPageLibrary');
var camlQuery = new SP.CamlQuery();
camlQuery.set_viewXml('<View><Query><Where><Eq><FieldRef Name=\'Title\'/><Value Type=\'Text\'>'+ currentID +'</Value></Eq></Where></Query></View>');
var collListItem = oList.getItems(camlQuery);
//clientContext.load(collListItem, 'Include(VirtualPicture, Title, Id)');
clientContext.load(collListItem);
clientContext.executeQueryAsync(function () {
var swListItms = collListItem.getEnumerator();
while (swListItms.moveNext())
{
var swItm = swListItms.get_current();
var mytable = swItm.get_item('VirtualPicture').get_url();
//console.log("img="+mytable);
$("img[title='undefined']").attr("src",mytable);
}
clientContext.executeQueryAsync(onQuerySucceededp,onQueryFailedp);
},
function (sender, args)
{
console.log('Request failed. ' + args.get_message() +
'\n' + args.get_stackTrace());
});
}
function onQuerySucceededp(sender, args) {
//console.log("success-1");
}
function onQueryFailedp(sender, args) {
alert('Error: ' + args.get_message() + '\n' + args.get_stackTrace());
}
It may not be the most efficient way of accomplishing this, but without the cooperation with expert users on this site, it's the best I can do.

Reddit RSS feed is not consistently fetching results

I have been trying to debug for this days now, and I’m not sure what the problem is.
To give you a little background:
I'm working on a project that pulls the top headline on the politics section of a far left news source (Huffington Post), a moderate left (CNN), a moderate right (Fox), and a far right (Breitbart).
From here, I’m finding Reddit posts referencing that article and appending it to the html. All of this is being done through YQL.
Here's an example with how I'm using CNN.
//CNN
$(function getCNNNews() {
var statement = "select * from feed where url='http://rss.cnn.com/rss/cnn_allpolitics.rss'";
$.queryYQL(statement, "json", undefined, function (data) {
// do something with "data".
console.log(data.query.results.item);
//Get first object in array
console.log(data.query.results.item[0]);
var firstObjectCNN = data.query.results.item[0];
$("#col2").append("<h1 id='cnn'>" + firstObjectCNN.title + "</h1>");
$("#col2").append("<h4 id='cnn'> Published by CNN <br/>" + firstObjectCNN.pubDate + "</h4>");
//Search for the top post referencing that headline on Reddit
$(function getCNNPostReddit() {
var newStatement = encodeURIComponent(firstObjectCNN.title).replace(/'/g , "%27");
var statement = "select * from feed where url='https://www.reddit.com/search.xml?q=" + newStatement + "&sort=new'";
$.queryYQL(statement, "json", undefined, function (data) {
console.log(statement);
console.log(data);
var firstCNNEntryResults = data.query.results;
if (firstCNNEntryResults == null)
{
document.getElementById("loading2").style.display = 'inline-block';
}
else
{
// Get first entry's (which is the entry with the most comments) rss feed containing comments
var firstCNNEntry = data.query.results.entry[0];
console.log("select * from feed where url='" + firstCNNEntry.link.href + ".rss");
// Erase end of URL that's not needed
var firstCNNEntryLink = firstCNNEntry.link.href;
firstCNNEntryLink = firstCNNEntryLink.substring(0, firstCNNEntryLink.indexOf('?'));
console.log(firstCNNEntryLink);
//Create a dynamic rss feed based on link to first entry; this is where the comments will come from.
$(function getCNNRedditComments() {
var statement = "select * from feed where url='" + firstCNNEntryLink + ".rss'" ;
$.queryYQL(statement, "json", undefined, function (data) {
console.log(data.query.results.entry);
//Start with the 4th comment; since the first 3 comments are auto moderator
for (var i = 0; i < data.query.results.entry.length; i++) {
console.log(data.query.results.entry[i].content.content);
$("#col2 #comment-box").append("<div id='comment'><span id='username'>" + data.query.results.entry[i].author.name + "</span>" + ":" + data.query.results.entry[i].content.content + "</div>")
}
});
});
}
});
});
});
});
I've made it so when the results come out null, I replace the comments with a loading symbol. The issue I'm having is, sometimes the comments will show, and other times they won't.
The current state of the site is here:
leftright.info
Reddit has a limit to how often you can fetch their RSS feeds. I had that problem too, so I came up with a workaround. I've created a public tool for it on my website.
https://burkybang.com/reddit_rss

Displaying Meetup members via API

I'm attempting to display a list of members of a Meetup group, using their API, see https://api.meetup.com/2/profiles?&sign=true&photo-host=public&group_urlname=pipeline-marketing&page=20.
Specifically I'm trying to display the profile photos of all the members of this specific group in HTML. I tried modifying some code found at http://www.jquerybyexample.net/2013/04/how-to-display-load-images-from-json-file-jquery.html but am having some difficulties. The page is blank. I'm not running it locally.
What am I doing wrong?
<div id="members"></div>
<script>
$(document).ready(function () {
var memberURL = "https://api.meetup.com/2/profiles?&sign=true&photo-host=public&group_urlname=pipeline-marketing&page=20";
$.getJSON(memberURL, function (json)
{
var imgList= "";
$.each(json.results, function () {
imgList += '<li><img src= "' + this.photo_url + '"></li>';
});
$('#members').append(imgList);
});
});
</script>
Thank you!

Replace / Ignore JavaScript in a String

I wrote a small RSS reader with JQuery. At first theres a screen with the titles of the articles, when clicked on a title I load the content of that article. The problem is, it contains some google ads script, which will replace the content of the article and fill the whole screen with an advertisement.
The following script is what I am tying to replace or ignore:
<script type="text/javascript"><!--
google_ad_client = "ca-pub-8356817984200457";
/* ijsselmondenieuws.nl */
google_ad_slot = "9061178822";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script><br />
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
So I wrote a method which is supposed to remove the script by a simple replace:
var replaceScript='<script type="text/javascript"><!--\n' +
'google_ad_client = "ca-pub-8356817984200457";\n' +
'/* ijsselmondenieuws.nl */\n' +
'google_ad_slot = "9061178822";\n' +
'google_ad_width = 468;\n' +
'google_ad_height = 60;\n' +
'//-->\n' +
'</script>\n' +
'<script type="text/javascript"\n' +
'src="http://pagead2.googlesyndication.com/pagead/show_ads.js">\n' +
'</script>';
function removeADS(ads) {
removeAD = ads.replace(replaceScript, " ");
}
But this doesn't work, I think it's not flexible either (if it would work). When something changes in the script, the application will get stuck at the advertisement again. Is there some way to completely ignore this script while fetching the content from an RSS feed or a more flexible replacement script?
Any help is appreciated,
Thanks!
It's not very wise to parse xml/html with regex.
Use a dom parser (jquery is a beautiful one ...hint hint):
var rssContentString = '<rss version='2.0'>...',
xmlDoc = $.parseXml(rssContentString),
$xml = $(xmlDoc),
helper = $('<div />'),
result;
result = helper
.append(
$xml
.find('script')
.remove()
.end()
)
.text();
UPDATE
Based on the new comments, since you get your rss content like this :
content:$.trim($(v).find("content").text())
you can modify this expression to the following :
content:$.trim($(v).find("content").find('script').remove().end().text())

Advert delivery via Javascript document.write

I'm building an advert delivery method and am try to do it through an external Javascript/jQuery page.
I have this so far, but I have some issues with it
$.get('http://url.com/ad.php', {
f_id: _f_id,
f_height: _f_height,
veloxads_width: _f_width
}, function (result) {
var parts = result.split(",");
var path = parts[0],
url = parts[1];
document.write('<img src="' + path + '">');
I can see the page load, but then after the code above is loaded, it creates a new page with just the advert on it. Is there anyway I can write it onto the page where the code was put?
And this is the script web masters put on their websites to include the adverts:
<script type="text/javascript">
var _f_id = "VA-SQ2TDEXO78N0";
var _f_width = 728;
var _f_height = 90;
</script>
<script type="text/javascript" src="http://website.com/cdn/addelivery.js"></script>
Cheers
is ad.php on the same domain as your script? if it's not have a look at this article
here is a code you could use in your html page, where you want the ad to be inserted:
$.get('http://url.com/ad.php',
{ f_id : _f_id, f_height : _f_height, veloxads_width : _f_width }
).success(function(result) {
var parts = result.split(",");
var path = parts[0], url = parts[1];
$('body').prepend('<div id="ad_id"><img src="'+path+'"></div>');
});
the selector (body here) can be an id, a class, ... (see documentation). You can also use prepend() or html() instead of append, to insert the code where you want ;)

Categories