Tips for personalizing your Tumblr feed on a website

Good day, dear readers!

I am currently working on a single-page website for my friend's band and have decided to incorporate a Tumblr feed instead of a traditional news section. The only issue is that I lack expertise in JS / JQuery.

As of now, the posts are displaying correctly, but the feed currently showcases the post title, brief description, and then the date. I wish to rearrange this order so that the date appears before the title. To achieve this, I have resorted to using some CSS to adjust the positioning (position: relative).

Here is what I have included in the header section:

<script src="http://www.google.com/jsapi" type="text/javascript"></script>

And here is what I have added just before the closing body tag:

<script type="text/javascript">

google.load("feeds", "1");

function OnLoad() {       
    var feedControl = new google.feeds.FeedControl();             
    feedControl.setNumEntries(3);

    feedControl.addFeed("http://xxxxxxxxxx.tumblr.com/rss");             
    feedControl.draw(document.getElementById("recentPosts"));     
}           

google.setOnLoadCallback(OnLoad); 

</script>

If anyone has any suggestions on how I can customize the output so that the date is displayed before the title, I would greatly appreciate it!

Warm regards, John

javascriptjquerycssfeedtumblr

Answer №1

My suggestion would be to manipulate the HTML generated by Google's script by incorporating jQuery for a smoother process. Make sure to implement your modifications following the

google.setOnLoadCallback(OnLoad);

Answer №2

This code snippet demonstrates a potential implementation (not verified):

 <script type="text/javascript">
google.load("feeds", "1"); 
function fetchFeeds()
{
    var feedControl = new google.feeds.FeedControl();             
    feedControl.setNumEntries(3); 

    var htmlContent;
    var feedSource = new google.feeds.Feed("http://www.example.com/feed.xml");

    feedSource.load(function(result) {
        if (!result.error) {
            var containerElement = document.getElementById("feedContainer");
            for (var index = 0; index < result.feed.entries.length; index++) {
                var entryItem = result.feed.entries[index];

                htmlContent += entryItem.publishedDate + "<p>" + entryItem.title + "</p>" + entryItem.content + "<br>";

                document.getElementById("feedContainer").innerHTML = htmlContent;
            }
        }
    });   
}
google.setOnLoadCallback(fetchFeeds);    
</script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

There is an overflow issue where content on the left side is being hidden when the overflow is set to auto

I am attempting to display a content box consistently on both desktop and mobile by utilizing a fixed width and overflow property. :root { --box: rgb(20, 33, 150); --box1: rgb(55, 75, 255); --background: rgb(147, 158, 255); } body { -we ...

htmlcssflexboxbootstrap-4overflow

Utilize getElementsByClassName to dynamically alter the appearance of specific elements upon triggering an event

I'm attempting to utilize onmouseover="document.getElementsByClassName().style.background='color'" in order to switch the color of all divs with a specified classname to a different color when hovering over another element on the page. ...

javascriptcssonmouseovergetelementsbyclassname

Only switch a radio button when the Ajax call results in success

Within an HTML form, I am working with a group of Radio buttons that trigger an Ajax call when the onchange() event is fired. This Ajax call communicates with the server to process the value sent by the call. The response can either be a string of "succes ...

javascripthtmlajaxradio-buttondom-events

Enable the bottom footer to expand along with the content to support a dynamically growing page

I followed a tutorial on keeping footers at the bottom of a webpage (http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page) to create a site with a fixed footer. However, I encountered an issue when there is more content than can fit ...

htmlcss

center menu items will be displayed as a fallback in case flexbox is unavailable

The code I have creates space between menu items and centers them both horizontally and vertically within each item. This is achieved by using a wrapper for the menu items: .gel-layout { list-style: none; direction: ltr; text-align: left; ...

htmlcss

Unable to locate the specified script using node.js

Recently, I've started working with Javascript and Node.js. My current project is utilizing OpenMCT (https://github.com/nasa/openmct) and I'm facing an issue when trying to integrate a script as a plugin in an index.html file. Upon starting the N ...

javascripthtmlnode.jswebpack

Is there a way to run /_next/static/xxx.js using a script tag?

I have customized my next.config file (webpack) to generate a static JavaScript file (.next/static/loader.js). The original loader.js is an Immediately Invoked Function Expression (IIFE): (function stickerLoader(){ alert('Hello'); // ... so ...

javascriptnext.js

Arranging five divs within one main div horizontally with equal margins between them

I am currently working on a website system where I need to place 5 divs within 1 main div horizontally. However, I want the spacing between the 5 divs to be equal and fixed within the main div. Below is how my current page looks: https://i.stack.imgur.com ...

htmlcss

What is causing the divs to remain stationary instead of floating away with BootStrap?

My divs aren't aligning properly as expected when using the BootStrap Grid System. For example, if I have 4 columns and then another 2 columns, the second div should take up the next 4 columns but instead it's appearing below in the same column r ...

htmlcsstwitter-bootstrap

Tips for iterating through a nested object in JavaScript with the forEach method

Here is my answer to the query. In this snippet, results represents a freshly initialized array. The object address nests within the user object. response.data.forEach(user => { results.push({ id: user.id, name: user.n ...

javascriptvue.jsforeachvuejs2

Troublesome code with Ajax, Jquery, and PHP is causing issues

I've been trying to send an array from php to js using ajax, but for some reason it's not working no matter what I try. I'm convinced it must be a simple fix, but I seem to have exhausted all my options. <!doctype html> <html lang= ...

javascriptphpjqueryhtmlajax

The global class variable encounters an error when trying to assign the value of "socket" to it

Within my class constructor, I am setting up a Socket connection and then storing the socket parameter in a global class variable (this.socket_variable = socket) so that I can access it across all functions in the class. CODE const { Server } = require(&q ...

javascriptnode.jsangularwebsocket

The functionality of jQuery's .hide and .show methods can sometimes result in unexpected behaviors while

I am experiencing some issues with this code snippet - it is causing some unexpected animations. The first issue is that it is lowering the content by about 1em during the animation and then moving it back up afterwards. The second issue is on the archive ...

jquerycsshtml

Creating cookies in R Shiny: Storing variables for future use

Writing a fixed string to cookies can be done easily using methods like Cookies.set(\'cookie_2\', \'value\', { expires: 7 }) (see tutorial here). However, saving the variable user to cookie_2 may require a different ...

javascriptrcookiesshiny

What is the best way to populate a SelectField with data retrieved from an ajax request?

Update: Success! I have successfully resolved my issue. Now I'm wondering if there is a more elegant solution for this problem? I am new to programming with Python3, Flask, and Jquery. What I am trying to achieve is to have one SelectField update it ...

jqueryajaxpython-3.xflask-wtforms

Clicking the delete button will halt the process once the user cancels the confirm alert

The website is now capable of extracting API data and displaying it in a table. Additionally, users can delete rows from the table by clicking on a button. (pic) Table and alert display after clicking the delete button Q: If I click cancel on the alert, ...

javascripthtmljqueryajax

The onClick function for a button is not functioning properly when using the useToggle hook

When the button is clicked, it toggles a value. Depending on this value, the button will display one icon or another. Here is the code snippet: export const useToggle = (initialState = false) => { const [state, setState] = useState(initialState); c ...

javascriptreactjstypescriptreact-hooksonclick

What is the best way to implement an AppBar that fades in and out when scrolling within a div?

I'm trying to implement a Scrollable AppBar that hides on scroll down and reappears when scrolling up. Check out this image for reference To achieve this functionality, I am following the guidelines provided by Material-UI documentation export defa ...

javascriptcssreactjsmaterial-ui

What is the appropriate utilization of the await keyword within concise if-else statements in JavaScript?

Along with transitioning away from jQuery, my main focus is to make my code more efficient. In large scale enterprise applications, the excessive use of jQuery and JavaScript can become problematic. I have decided to switch back to vanilla JavaScript for ...

javascriptjqueryasynchronouskendo-ui

What is the best way to retrieve the data from this date object?

How can I access the date and time in the code below? I've attempted using functions within the Text block without success. It's unclear to me what mistake I'm making or how to correctly access this object, or transform it into an object th ...

javascriptreactjsreact-nativemobile